<template>
	<view class="card_list">
		<u-swipe-action v-if="isEdit">
			<u-swipe-action-item :options="options" @click="delBank">
				<BankCard :bankInfo="form" :bankCode="bankCode" />
			</u-swipe-action-item>
		</u-swipe-action>
		<view class="m-top30">
			<u-button :text="isEdit ? '+ 修改银行卡' : '+ 添加银行卡'" color="#F6F6f6" :customStyle="{color: '#3d3d3d', fontWeight: 500, fontSize: '28rpx'}" @click="show = true"></u-button>
		</view>
		<!-- 添加银行卡弹出框 -->
		<u-popup :show="show" mode="center" :round="12" @close="show = false">
			<view class="bankForm">
				<text class="col-3d f-w-500 f-28 l-h-38 my-30">输入卡号添加</text>
				<u--form :model="form" ref="uForm" labelWidth="60">
					<u-form-item label="卡号" prop="account">
						<u-input v-model="form.account" border="bottom" :type="'number'" placeholder="请输入本人银行卡号" @change="formatNumber" />
					</u-form-item>
					<u-form-item label="持卡人姓名" prop="accountName">
						<u-input v-model="form.accountName" border="bottom" placeholder="姓名"/>
					</u-form-item>
					<u-form-item label="卡类型" prop="accountBank">
						<u-input v-model="form.accountBank" border="bottom" placeholder="卡类型" disabled disabledColor="#fff"/>
					</u-form-item>
					<u-form-item>
						<u-button text="提交" color="#FFB336" shape="circle" @click="submit"></u-button>
					</u-form-item>
				</u--form>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import BankCard from '@/pages_my/components/bankCard.vue'
	import { verifyBankCardNumber, bankCardAttribution } from '@/utils/util.js'
	import { addBank, getBank, updateBank, deleteBank } from '@/api/user.js'
	import { mapGetters } from 'vuex'
	export default {
		components: { BankCard },
		data() {
			return {
				show: false, // 添加银行卡显示
				isEdit: false, // 是否为编辑银行卡
				flag: true,
				bankCode: 'ABC',
				// 银行卡滑动配置
				options: [{
					text: '解除绑定',
					style: {
						backgroundColor: '#F6F6F6',
						color: '#3d3d3d'
					}
				}],
				form: { account: '', accountName: '', accountBank: '' }, // 添加银行卡
				rules: {
					account: [
						{ required: true, message: '请输入您的卡号', trigger: ['blur', 'change'] },
						{
							validator: (rule, value, callback) => {
								let cardNum = value.replace(/\s/g, '')
								return verifyBankCardNumber(cardNum);
							},
							message: '银行卡号不正确',
							// 触发器可以同时用blur和change
							trigger: ['change','blur'],
						}
					],
					accountBank: [
						{ required: true, message: '请输入卡号获取类型', trigger: ['change'] }
					],
					accountName: [
						{ required: true, message: '请输入持卡人姓名', trigger: ['change'] }
					]
				}
			}
		},
		onReady() {
		//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
		computed: { ...mapGetters(['userInfo']) },
		mounted() {
			// this.getBankInfo()
		},
		methods: {
			// 格式银行卡号与输入卡号时提示银行信息
			formatNumber(){
				if(this.flag) {
					this.flag = false
					setTimeout(() => {
						this.form.account = this.form.account.replace(/\s/g,'').replace(/(\d{4})(?=\d)/g,"$1 ")
						let cardNum = this.form.account.replace(/\s/g, '')
						const { bankName, cardTypeName, bankCode } = bankCardAttribution(cardNum)
						let Str = (bankName || '') + ' ' + (cardTypeName || '')
						this.form.accountBank = Str
						this.bankCode = bankCode
						this.flag = true
					}, 1500)
				}
			},
			// 获取商家提现账户信息
			async getBankInfo() {
				let businessId = this.userInfo.businessId
				const res = await getBank(businessId)
				this.isEdit = res.code !== 200
				this.form = this.isEdit ? res : { account: '', accountName: '', accountBank: '' }
			},
			// 解除绑定银行卡
			delBank(){
				let _this = this
				let accountIds = this.form.accountId
				uni.showModal({
					title: '提示',
					content: '是否要解除绑定银行卡',
					success: async function (res) {
						if (res.confirm) {
							await deleteBank(accountIds)
							uni.$u.toast('解绑成功')
							_this.getBankInfo()
						} else if (res.cancel) {
							uni.$u.toast('已取消')
						}
					}
				})
			},
			// 添加银行卡
			 submit(){
				this.$refs.uForm.validate().then(async valid => {
					if(this.isEdit) {
						await updateBank(this.form)
						uni.$u.toast('更新成功')
						this.show = false
						this.getBankInfo()
					} else {
						await addBank(this.form)
						uni.$u.toast('添加成功')
						this.show = false
						this.getBankInfo()
					}
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.card_list{
	padding: 20rpx 30rpx 0;
}
// 添加银行卡
.bankForm{
	width: 690rpx;
	height: 590rpx;
	box-sizing: border-box;
	padding: 20rpx;
	background: #FFFFFF;
	border-radius: 12rpx;
}
</style>