<script setup>
	// 添加银行卡
	import {
		ref,
		reactive,
		computed,
		getCurrentInstance,
	} from 'vue'
	import {
		useStore
	} from 'vuex'
	import {
		onLoad,
	} from '@dcloudio/uni-app'
	// 工具库
	import util from '@/common/js/util.js'
	// api
	import api from '@/api/index.js'
	// 获取验证码
	import getCode from '@/components/getCode/getCode'
	// 
	const {
		proxy
	} = getCurrentInstance()
	// 银行搜索
	const bankSearch = ref('')
	// 银行卡列表
	const bankList = reactive([])
	// 银行卡类型列表
	const bankTypeList = reactive([])
	// 银行卡类型下标
	const bankTypeIndex = ref('')
	// 表单对象
	const form = reactive({
		bankName: '',
		cardType: '',
		cardNumber: '',
		phoneNumber: '',
		userIdCard: '',
		userRealName: '',
	})

	onLoad(() => {
		// 获取字典
		getBankList()
		// 获取银行卡类型
		getBankTypes()
	})

	// 获取银行卡
	function getBankList() {
		api.getDicFuzzy({
			path: ['bank_type'],
			query: {
				dictLabel: bankSearch.value,
			}
		}).then(rs => {
			if (rs.code == 200) {
				bankList.length = 0
				bankList.push(...rs.data)
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

	// 获取银行卡类型
	function getBankTypes() {
		api.getDict({
			path: ['card_type'],
		}).then(rs => {
			if (rs.code == 200) {
				bankTypeList.length = 0
				bankTypeList.push(...rs.data.map(item => {
					// 转大写
					item.dictValue = item.dictValue.toUpperCase()
					return item
				}))
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

	/**
	 * 选择银行
	 * @param {Object} item 银行列表项
	 */
	function handleSelectBank(item) {
		if (form.bankName === item.bankName) return
		form.bankName = item.dictLabel
		proxy.$refs.bankRef.close()
	}

	/**
	 * @param {Object} event
	 */
	function handleBankTypeIndex(event) {
		const index = event.detail.value
		if (bankTypeIndex.value === index) return
		bankTypeIndex.value = index
	}

	// 绑定
	function handleSubmit() {
		const data = {
			...form
		}

		// 
		if (!data.bankName) {
			util.alert('银行卡名称不能为空')
			return
		}
		if (bankTypeIndex.value === '') {
			util.alert('银行卡类型不能为空')
			return
		}
		if (!data.phoneNumber) {
			util.alert('手机号不能为空')
			return
		}
		if (!data.userIdCard) {
			util.alert('身份证号不能为空')
			return
		}
		if (!data.cardNumber) {
			util.alert('用户手机号不能为空')
			return
		}
		if (!data.userRealName) {
			util.alert('真实姓名不能为空')
			return
		}
		// 
		data.cardType = bankTypeList[bankTypeIndex.value].dictValue

		// 
		api.mine.addBankCard({
			data,
		}).then(rs => {
			if (rs.code == 200) {
				uni.$emit('updateBindingBank')
				util.alert('添加成功')

				setTimeout(() => {
					uni.navigateBack()
				}, 500)
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}
</script>

<template>
	<view class="appbw">
		<!-- 表单 -->
		<view class="form mtb30 mlr40">
			<view class="line" @click="$refs.bankRef.open()">
				<view class="title">银行名称</view>
				<view class="inputBox rows">
					<view class="f1" v-if="form.bankName">{{form.bankName}}</view>
					<view class="placeholderStyle f1" v-else>请选择银行名称</view>
					<uni-icons type="bottom" />
				</view>
			</view>

			<view class="line">
				<view class="title">银行卡类型</view>
				<view class="inputBox">
					<picker :range="bankTypeList" range-key="dictLabel" @change="handleBankTypeIndex">
						<view class="rows">
							<view class="f1" v-if="bankTypeIndex!==''">{{bankTypeList[bankTypeIndex].dictLabel}}</view>
							<view class="placeholderStyle f1" v-else>请选择银行名称</view>
							<uni-icons type="bottom" />
						</view>
					</picker>
				</view>
			</view>

			<view class="line">
				<view class="title">银行卡卡号</view>
				<view class="inputBox">
					<input class="input" v-model="form.cardNumber" type="text" placeholder="请输入银行卡卡号"
						placeholder-class="placeholderStyle" />
				</view>
			</view>

			<view class="line">
				<view class="title">姓名</view>
				<view class="inputBox">
					<input class="input" v-model="form.userRealName" type="text" placeholder="请输入姓名"
						placeholder-class="placeholderStyle" />
				</view>
			</view>

			<view class="line">
				<view class="title">身份证号</view>
				<view class="inputBox">
					<input class="input" v-model="form.userIdCard" type="text" placeholder="请输入身份证号"
						placeholder-class="placeholderStyle" />
				</view>
			</view>

			<view class="line">
				<view class="title">手机号（银行绑定的手机号）</view>
				<view class="inputBox">
					<input class="input" v-model="form.phoneNumber" type="text" placeholder="请输入手机号"
						placeholder-class="placeholderStyle" />
				</view>
			</view>

			<!-- <view class="line">
				<view class="title">验证码</view>
				<view class="inputBox rows">
					<input class="input" type="text" placeholder="请输入验证码" />
					<view class="getCode btn black plr30">
						<getCode />
					</view>
				</view>
			</view> -->

			<!-- 温馨提示 -->
			<view class="notice ptb20 plr30 br20">
				<view class="key">温馨提示</view>
				<view class="content mt15 c333 f28">
					<view>为保证账户资金安全，请仔细核对好填写信息，在点击绑定</view>
				</view>
			</view>

			<view class="btn lg black mt50" @click="handleSubmit">绑定</view>
		</view>

		<view class="fill"></view>
	</view>

	<!-- 搜索银行卡 -->
	<uni-popup ref="bankRef" type="bottom">
		<view class="selectionBox ptb20 plr20 bfff c999 f28">
			<view class="title c333 f34 tac">选择银行卡</view>

			<!-- 可选的列表 -->
			<view class="mt20">
				<scroll-view scroll-y="true" class="scroll">
					<view class="selection">
						<view class="option df aic" v-for="(item,index) in bankList" :key="index"
							@click="handleSelectBank(item,index)" :class="{'active': item.dictLabel === form.bankName}">
							<text class="thd f1">{{item.dictLabel}}</text>
						</view>
					</view>
				</scroll-view>
			</view>

			<!--  -->
			<view class="inputBox rows mt20 ptb10 plr20 br20">
				<input class="f1" type="text" v-model="bankSearch" placeholder="输入你想选择的用户" />
				<view class="" @click="getBankList">搜索</view>
			</view>
		</view>
	</uni-popup>
</template>

<style lang="scss" scoped>
	// 图表
	.form {

		// 
		.line {
			margin: 30rpx 0;

			// 
			.title {
				color: #111;
				font-size: 32rpx;
			}

			// 
			.inputBox {
				margin-top: 15rpx;
				padding: 10rpx 30rpx;
			}
		}
	}

	// 菜单选择列表
	.selectionBox {
		.scroll {
			height: 800rpx;

			.option {
				box-sizing: border-box;
				height: 60rpx;
				border-bottom: 1rpx solid #E5E5E5;

				// 被选择的
				&.active {
					background-color: #E5E5E5;
				}
			}
		}

		// 
		.editBox {
			background-color: #F4F4F4;
		}
	}

	// 
	.notice {
		background-color: #ff888844;

		.content {
			color: #aa3333;
		}
	}
</style>