<template>
	<view :style="'background-color: '+theme.bg+';color: '+theme.text" style="height: 100vh;">
		<myNav :title="id?i18n.mine.safety.modify:i18n.mine.safety.add"></myNav>
		
		<view class="listBox">
			<view class="width-100b height-96 line-height-96">
				<text class="font-30 bold-font">{{i18n.mine.safety.username}}</text>
			</view>
			<view class="width-100b height-96">
				<input class="width-100b height-96 font-30" type="text" v-model="username" :placeholder="i18n.mine.safety.input1"/>
			</view>
		</view>
		
		<view class="listBox">
			<view class="width-100b height-96 line-height-96">
				<text class="font-30 bold-font">{{i18n.mine.safety.card_num}}</text>
			</view>
			<view class="width-100b height-96">
				<input class="flex-1 height-96 font-30 nummedium-font" type="text" v-model="card_num" :placeholder="i18n.mine.safety.input2"/>
			</view>
		</view>
		
		<view class="listBox">
			<view class="width-100b height-96 line-height-96">
				<text class="font-30 bold-font">{{i18n.mine.safety.bank_name}}</text>
			</view>
			<view class="width-100b height-96">
				<input class="width-100b height-96 font-30" type="text" v-model="bank_name" :placeholder="i18n.mine.safety.input3"/>
			</view>
		</view>
		
		<view class="listBox">
			<view class="width-100b height-96 line-height-96">
				<text class="font-30 bold-font">{{i18n.mine.safety.bank_deposit}}</text>
			</view>
			<view class="width-100b height-96">
				<input class="width-100b height-96 font-30" type="text" v-model="bank_deposit" :placeholder="i18n.mine.safety.input4"/>
			</view>
		</view>
		
		<view class="listBox">
			<view class="width-100b height-96 line-height-96">
				<text class="font-30 bold-font">{{i18n.mine.safety.bank_code}}</text>
			</view>
			<view class="width-100b height-96">
				<input class="width-100b height-96 font-30" type="text" v-model="bank_code" :placeholder="i18n.mine.safety.input5"/>
			</view>
		</view>
		
		<view class="flex align-center justify-center">
			<button @click="add" class="cu-btn loginBtn">{{i18n.mine.safety.save}}</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				username:"",
				card_num:"",
				bank_name:"",
				bank_deposit:"",
				bank_code:'',
				
				flag:true,
				theme: '',
			}
		},
		onLoad(option) {
			// console.log(option)
			if(option.id){
				this.id = option.id
				this.username = option.username
				this.card_num = option.card_num
				this.bank_name = option.bank_name
				this.bank_deposit = option.bank_deposit
				this.bank_code = option.bank_code
			}
		},
		onShow() {
			if (uni.getStorageSync("theme") == "dark") {
				this.theme = this.$store.state.darkTheme
			} else {
				this.theme = this.$store.state.lightTheme
			}
		},
		computed: {
			i18n() {
				return this.$t('message');
			},
		},
		methods: {
			add(){
				if(!this.flag) return
				if(this.username==""){
					this.tos(this.i18n.mine.safety.input1)
					return
				}
				if(this.card_num==""){
					this.tos(this.i18n.mine.safety.input2)
					return
				}
				if(this.bank_name==""){
					this.tos(this.i18n.mine.safety.input3)
					return
				}
				this.flag = false
				uni.showLoading()
				this.post('/my/add_collection', {
					id: this.id,
					username: this.username,
					card_num: this.card_num,
					bank_name: this.bank_name,
					bank_deposit: this.bank_deposit,
					bank_code:this.bank_code
				}).then(res => {
					this.flag = true
					uni.hideLoading()
					if(res.code == 1){
						this.tos(res.msg)
						setTimeout(()=>{
							uni.navigateBack()
						},500)
					}
				})
			},
		}
	}
</script>

<style>
	.listBox{
		width: 100%;
		/* height: 96rpx; */
		padding: 0 45rpx;
		margin-bottom: 1rpx;
		/* background-color: #FFFFFF; */
	}
	.loginBtn{
		width: 600rpx;
		height: 96rpx;
		margin: 50rpx auto;
		background: linear-gradient(180deg, #52F3C9 0%, #3ECEB2 100%) !important;
		border-radius: 12rpx;
		line-height: 96rpx;
		color: #FFFFFF;
		font-size: 32rpx;
		text-align: center;
	}
</style>

