<template>
	<view>
		<form @submit="formSubmit" @reset="formReset">
			<view class="form-list">
				<view class="form-item">
					<view class="item-name">
						<text class="domation mr10">*</text>
						{{ $t('MY_WAL_24') }}
					</view>
					<input v-model="form.cardNumber" type="text" value="" :placeholder="$t('w_0271')"
						placeholder-class="placeholderclass gray9 f28" class="form-input" />
				</view>
				<!-- <picker :range="accountList" :value="bank_index" @change="bindPickerChange" range-key="bankName">
					
				</picker> -->
				<view class="form-item" style="border-bottom: 1rpx solid #eee;width: 100%;" @click="listShow = true">
					<view class="item-name">
						<text class="domation mr10">*</text>
						{{ $t('CK_KS_41') }}
					</view>
					<view class="form-input">{{ bank_index == '' ? $t('CK_KS_38') : bank_index }}</view>
					<!-- <input class="form-input" disabled type="text" :value="bank_index == '' ? $t('CK_KS_38') : bank_index" placeholder="" /> -->
					<text class="icon iconfont icon-jiantou"></text>
				</view>

				<view class="form-item">
					<view class="item-name">
						<text class="domation mr10">*</text>
						{{ $t('CK_KS_43') }}
					</view>
					<input v-model="form.subBankName" type="text" value="" :placeholder="$t('w_0272')"
						placeholder-class="placeholderclass gray9 f28" class="form-input" />
				</view>
				<view class="form-item">
					<view class="item-name">
						<text class="domation mr10">*</text>
						{{ $t('MY_WAL_33') }}
					</view>
					<input v-model="form.accountName" type="text" value="" :placeholder="$t('w_0189')"
						placeholder-class="placeholderclass gray9 f28" class="form-input" />
				</view>
				<view class="form-item">
					<view class="item-name">
						<text class="domation mr10">*</text>
						{{ $t('MY_WAL_36') }}
					</view>
					<input v-model="form.idCard" type="text" value="" :placeholder="$t('w_0190')"
						placeholder-class="placeholderclass gray9 f28" class="form-input" />
				</view>
				<template v-if="userInfo.pkCountry == 1">
					<view class="form-item">
						<view class="item-name">
							<text class="domation mr10">*</text>
							{{ $t('w_0052') }}
						</view>
						<input v-model="form.phone" type="text" value="" :placeholder="$t('w_0184')"
							placeholder-class="placeholderclass gray9 f28" class="form-input" />
					</view>
					<view class="form-item" v-if="!isWhite">
						<view class="item-name">
							<text class="domation mr10">*</text>
							{{ $t('w_0043') }}
						</view>
						<view class="d-b-c">
							<input v-model="form.verificationCode" type="text" value="" :placeholder="$t('w_0057')"
								placeholder-class="placeholderclass gray9 f28" class="form-input" />
							<button class="get-code-btn" type="default" @click="sendCode"
								:disabled="is_send">{{ send_btn_txt }}</button>
						</view>
					</view>
				</template>
			</view>
			<view class="normal-sub-btn ">
				<button form-type="submit" class="f32 mt60 normal-sub-btn">{{ $t('w_0035') }}</button>
			</view>
		</form>
		<u-picker :cancelText="$t('MN_F_31')" :confirmText="$t('MN_F_32')" @cancel="listShow = false" :show="listShow"
			ref="uPicker" :loading="loading" :columns="[accountList]" @confirm="bindPickerChange"
			keyName="bankName"></u-picker>
	</view>
</template>

<script>
	import test from '../../../uni_modules/uview-ui/libs/function/test';
	export default {
		data() {
			return {
				form: {
					pkBank: '',
					accountName: '',
					subBankName: '',
					cardNumber: '',
					idCard: '',
					phone: '',
					verificationCode: ''
				},
				/*是否已发验证码*/
				is_send: false,
				/*发送按钮文本*/
				send_btn_txt: this.$t('w_0055'),
				/*当前秒数*/
				second: 60,
				bank_index: '',
				accountList: [],
				account_info: {
					bankName: '',
					enableState: '',
					pkCountry: '',
					pkCreator: '',
					pkId: '',
					pkModified: '',
					pkTransaction: ''
				},
				userInfo: {},
				isWhite: false,
				listShow: false,
				loading: true,
				bindLoading: false
			};
		},
		onLoad(e) {
			this.getUserInfoData();
			this.isWhiteList();
			this.getData();
		},
		methods: {
			/*提交*/
			formSubmit: function(e) {
				let self = this;
				if (self.bindLoading) {
					return
				}
				var formdata = self.form;
				// console.log(formdata);
				formdata.pkBank = self.account_info.pkId;
				if (formdata.cardNumber == '') {
					uni.showToast({
						title: self.$t('w_0271'),
						duration: 1000,
						icon: 'none'
					});
					return false;
				}
				if (formdata.pkBank == '') {
					uni.showToast({
						title: self.$t('w_0302'),
						duration: 1000,
						icon: 'none'
					});
					return false;
				}
				if (formdata.subBankName == '') {
					uni.showToast({
						title: self.$t('w_0272'),
						duration: 1000,
						icon: 'none'
					});
					return false;
				}
				if (formdata.accountName == '') {
					uni.showToast({
						title: self.$t('w_0189'),
						duration: 1000,
						icon: 'none'
					});
					return false;
				}
				if (formdata.idCard == '') {
					uni.showToast({
						title: self.$t('w_0190'),
						duration: 1000,
						icon: 'none'
					});
					return false;
				}
				if (this.userInfo.pkCountry == 1) {
					if (formdata.phone == '') {
						uni.showToast({
							title: self.$t('w_0053'),
							duration: 1000,
							icon: 'none'
						});
						return false;
					}

					if (formdata.verificationCode == '' && !self.isWhite) {
						uni.showToast({
							title: self.$t('w_0057'),
							duration: 1000,
							icon: 'none'
						});
						return false;
					}
				}
				let callback = function() {
					self.bindLoading = true;
					self._post('member/api/bank/add', formdata, function(res) {
						self.bindLoading = false;
						self.showSuccess(res.msg, function() {
							// #ifndef H5
							uni.navigateBack({
								delta: parseInt(1)
							});
							// #endif
							// #ifdef H5
							history.go(-1);
							// #endif
						});
					}, err => {
						self.bindLoading = false;
					});
				};
				if (self.isWhite) {
					callback();
				} else {
					self.testCard(formdata, callback);
				}
			},
			isWhiteList() {
				let self = this;
				self._get('member/api/bank/is-white-list', {}, res => {
					if (res.flag == 'Y') {
						self.isWhite = true;
					} else {
						self.isWhite = false;
					}
				});
			},
			testCard(formdata, callback) {
				let self = this;
				self._post(
					'member/api/bank/verify-bank-card', {
						accountName: formdata.accountName, //开户姓名
						cardNumber: formdata.cardNumber, //银行卡号
						idCard: formdata.idCard, //身份证号
						phone: formdata.phone //手机号
					},
					res => {
						callback();
					}
				);
			},
			bindPickerChange: function(e) {
				console.log(e.value[0]);
				this.bank_index = e.value[0].bankName;
				this.account_info = e.value[0];
				this.listShow = false;
			},
			// 获取用户信息
			getUserInfoData() {
				let self = this;
				// self.loading = true;
				self._get('member/api/member/get-info', {}, function(res) {
					if (res.code == 200) {
						self.userInfo = res.data;
					}
					uni.setStorageSync('currencyIcon', res.data.currencyIcon);
					// self.loading = false;
					uni.hideLoading();
				});
			},
			/*获取数据*/
			getData() {
				let self = this;
				self.loading = true;
				self._get('system/api/bank/list', {}, function(res) {
					self.accountList = res.data;
					self.loading = false;
					console.log(self.accountList);
					uni.hideLoading();
				});
			},
			/*发送短信*/
			sendCode() {
				let self = this;
				var formdata = self.form;
				if (formdata.phone == '') {
					uni.showToast({
						title: self.$t('w_0278'),
						duration: 1000,
						icon: 'none'
					});
					return false;
				}
				if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(formdata.phone)) {
					uni.showToast({
						title: self.$t('w_0279') + '!',
						duration: 2000,
						icon: 'none'
					});
					return;
				}

				self._get(
					'member/api/sms/verification', {
						phone: self.form.phone
					},
					result => {
						uni.showToast({
							title: self.$t('MY_WAL_49')
						});
						self.is_send = true;
						self.changeMsg();
					}
				);
			},
			/*改变发送验证码按钮文本*/
			changeMsg() {
				if (this.second > 0) {
					this.send_btn_txt = this.second + this.$t('S_L_9');
					this.second--;
					setTimeout(this.changeMsg, 1000);
				} else {
					this.send_btn_txt = this.$t('w_0055');
					this.second = 60;
					this.is_send = false;
				}
			}
		}
	};
</script>

<style lang="scss">
	.form-list {
		padding: 49rpx 58rpx 37rpx 52rpx;
		background-color: #ffffff;
		margin-bottom: 57rpx;

		.form-item {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;
			color: #333;
			min-height: 104rpx;
			border-bottom: 1rpx solid #eee;

			.item-name {
				width: 170rpx;
				flex-shrink: 0;
			}

			.form-input {
				flex: 1;
				height: 76rpx;
				line-height: 76rpx;
				border-radius: 38rpx;
				font-size: 28rpx;
				color: #333;
				background: none;
				padding: 0 20rpx 0 51rpx;
			}
		}

		.form-item:last-child {
			border: none;
		}

		.form-tips {
			color: #fb3024;
			line-height: 60rpx;
			min-height: 56rpx;
			padding-left: 180rpx;
		}
	}

	.placeholderclass {}

	.get-code-btn {
		min-width: 161rpx;
		height: 74rpx;
		background: #333333;
		line-height: 74rpx;
		padding: 0rpx 20rpx;
		border-radius: 40rpx;
		white-space: nowrap;
		// border: 1rpx solid $dominant-color;
		color: #ffffff;
		box-sizing: border-box;
		margin-left: 46rpx;
		font-size: 24rpx;
	}

	.get-code-btn[disabled='true'] {
		// border: 1rpx solid #cccccc;
		color: #333;
		background-color: #ffffff;
	}

	.icon.icon-jiantou {
		font-size: 28rpx;
		color: #999;
	}
</style>