<template>
	<view>
		<view class="u-font-32 font-bold u-m-32 text-center">结算信息</view>
		<view class="container">
			<view class="form-item required">
				<view class="title"> 结算类型</view>
				<up-radio-group v-model="form.settlementType">
					<up-radio v-for="(value,key) in settlementTypes" :label="value" :name="key">
					</up-radio>
				</up-radio-group>
			</view>

			<template v-if="form.settlementType*1==0">
				<view class="form-item required">
					<view class="title"> 非法人手持结算授权书</view>
					<my-upload-img v-model="form.noLegalHandSettleAuthPic.url" :size="200"></my-upload-img>
				</view>

				<view class="form-item required">
					<view class="title"> 非法人结算授权书</view>
					<my-upload-img v-model="form.noLegalSettleAuthPic.url" :size="200"></my-upload-img>
				</view>

				<view class="form-item required">
					<view class="title"> 非法人身份证正面</view>
					<my-upload-img v-model="form.noLegalIdCardFrontPic.url" :size="200"></my-upload-img>
				</view>


				<view class="form-item required">
					<view class="title"> 非法人身份证反面</view>
					<my-upload-img v-model="form.noLegalIdCardBackPic.url" :size="200"></my-upload-img>
				</view>

				<view class="form-item required">
					<view class="title"> 非法人姓名
					</view>

					<up-input placeholder="非法人姓名" :placeholder-class="placeholderClass"
						v-model="form.noLegalName"></up-input>
				</view>
				<view class="form-item required">
					<view class="title"> 非法人身份证号码
					</view>

					<up-input placeholder="非法人身份证号码" :placeholder-class="placeholderClass"
						v-model="form.noLegalId"></up-input>
				</view>
			</template>


			<view class="form-item required">
				<view class="title"> 结算卡类型</view>
				<up-radio-group v-model="form.settlementCardType">
					<up-radio v-for="(value,key) in settlementCardTypes" :label="value" :name="key">
					</up-radio>
				</up-radio-group>
			</view>

			<view class="form-item required">
				<view class="title"> 银行卡正面</view>
				<my-upload-img @uploadSuccess="uploadSuccess($event,'BankCard','bankCardFrontPic')"
					v-model="form.bankCardFrontPic.url" :size="200"></my-upload-img>
			</view>

			<view class="form-item " :class="{required:form.settlementCardType==11}">
				<view class="title"> 银行卡反面</view>
				<my-upload-img v-model="form.bankCardBackPic.url" :size="200"></my-upload-img>
			</view>



			<view class="form-item required">
				<view class="title"> 开户行省市区</view>
				<view class="input-box u-flex  u-row-between u-col-center" @click="showCitySelect=true">
					<text class="color-999" v-if="!pro_city_area">请选择</text>
					<text class="color-333" v-else>{{pro_city_area}}</text>
					<up-icon name="arrow-down"></up-icon>
				</view>
			</view>
			<view class="form-item required">
				<view class="title"> 开户行</view>
				<bankSelect v-model="form.bankName" v-model:bankInstId="form.bankInstId"
					v-model:bankAliasCode="form.bankType"></bankSelect>
			</view>
			<view class="form-item " v-if="pro_city_area&&form.bankName">
				<view class="title"> 支行</view>
				<bankBranchList :query="bankBranchListQuery" v-model:bankBranchName="form.bankBranchName"
					v-model:bankBranchCode="form.bankBranchCode"></bankBranchList>
			</view>
			<view class="form-item required">
				<view class="title"> 结算卡号</view>
				<up-input placeholder="结算卡号" :placeholder-class="placeholderClass"
					v-model="form.settlementCardNo"></up-input>
			</view>
			<view class="form-item required">
				<view class="title"> 开户名称</view>
				<up-input placeholder="开户名称" :placeholder-class="placeholderClass"
					v-model="form.settlementName"></up-input>
			</view>
			<view class="form-item required">
				<view class="title"> 结算银行预留手机号</view>
				<up-input placeholder="结算银行预留手机号" :placeholder-class="placeholderClass"
					v-model="form.bankMobile"></up-input>
			</view>
			<!-- <view class="form-item ">
				<view class="title"> 开户行行别名称</view>
				<up-input placeholder="开户行行别名称" :placeholder-class="placeholderClass"
					v-model="form.bankName"></up-input>
			</view> -->

			<!-- 
			<view class="form-item ">
				<view class="title"> 开户行缩写</view>
				<up-input placeholder="开户行缩写" :placeholder-class="placeholderClass"></up-input>
			</view>
			<view class="form-item ">
				<view class="title"> 开户行编号
				</view>
				<up-input placeholder="开户行编号" :placeholder-class="placeholderClass" v-model="form.bankType"></up-input>
			</view> 
			<view class="form-item ">
				<view class="title"> 支行开户行行别名称

				</view>
				<up-input placeholder="支行开户行行别名称" :placeholder-class="placeholderClass"
					v-model="form.bankBranchName"></up-input>
			</view>

			<view class="form-item ">
				<view class="title"> 支行开户行编号

				</view>
				<up-input placeholder="支行开户行编号" :placeholder-class="placeholderClass"
					v-model="form.bankBranchCode"></up-input>
			</view>
			-->


			<template v-if="form.settlementCardType*1==21">
				<view class="form-item required">
					<view class="title"> 开户许可证</view>
					<my-upload-img v-model="form.openAccountLicencePic.url" :size="200"></my-upload-img>
				</view>
			</template>






		</view>


		<citySelect v-model="showCitySelect" @city-change="cityChange" @init="getRegionData"></citySelect>

	</view>

</template>

<script setup>
	import {
		computed,
		reactive,
		watch,
		ref,
		watchEffect
	} from 'vue';
	import shopSelect from './shop-select.vue'
	import citySelect from '../../components/u-city-select.vue'
	import bankSelect from './bank-select.vue'
	import bankBranchList from './bankBranchList.vue'
	import {
		userTypes,
		sexs,
		contactPersonTypes,
		companyChildTypes,
		settlementTypes,
		settlementCardTypes,
		certTypes
	} from '@/entryManager/data.js'
	import {
		getInfoByImg
	} from '@/http/api/order/entryManager.js'
	import list from 'uview-plus/components/u-list/list';

	const regions = ref([])

	function getRegionData(arr = []) {
		regions.value = arr
	}

	const showCitySelect = ref(false)
	const showBankSelect = ref(true)

	const wxProvinceCode = ref('')

	function uploadSuccess(url, type, key) {
		uni.showLoading({
			type: '识别中，请稍等……！'
		})
		getInfoByImg({
			url,
			type
		}).then(res => {
			uni.hideLoading()
			if (res) {
				form.bankName = res.subImages[0].kvInfo.data.bankName
				form.settlementCardNo = res.subImages[0].kvInfo.data.cardNumber
			}
		})
	}

	function basicSelectChange(e) {

	}

	function cityChange(e) {
		console.log('cityChange', e);
		form.openAccProvince = e.province.regionName;
		form.openAccCity = e.city.regionName;
		form.openAccArea = e.area.regionName;
		wxProvinceCode.value = e.city.wxProvinceCode;
		form.openAccProvinceId = e.province.regionId;
		form.openAccCityId = e.city.regionId;
		form.openAccAreaId = e.area.regionId;
		console.log('form', form);
	}

	const pro_city_area = computed(() => {
		if (form.openAccProvince && form.openAccCity && form.openAccArea) {
			const text = form.openAccProvince + '-' + form.openAccCity + '-' + form.openAccArea
			console.log('text', text);
			return text
		}
		return ''
	})
	const form = reactive({
		"settlementType": "0",
		"noLegalName": "",
		"noLegalId": "",
		"settlementCardType": "11",
		"settlementCardNo": "",
		"settlementName": "",
		"bankMobile": "",
		"openAccProvinceId": "",
		"openAccCityId": "",
		"openAccAreaId": "",
		"openAccProvince": "",
		"openAccCity": "",
		"openAccArea": "",
		"bankName": "",
		"bankInstId": "",
		"bankType": "",
		"bankBranchName": "",
		"bankBranchCode": "",
		"bankCardFrontPic": {
			"url": "",
			"wechatId": "",
			"alipayId": ""
		},
		"bankCardBackPic": {
			"url": "",
			"wechatId": "",
			"alipayId": ""
		},
		"openAccountLicencePic": {
			"url": "",
			"wechatId": "",
			"alipayId": ""
		},
		"noLegalHandSettleAuthPic": {
			"url": "",
			"wechatId": "",
			"alipayId": ""
		},
		"noLegalSettleAuthPic": {
			"url": "",
			"wechatId": "",
			"alipayId": ""
		},
		"noLegalIdCardFrontPic": {
			"url": "",
			"wechatId": "",
			"alipayId": ""
		},
		"noLegalIdCardBackPic": {
			"url": "",
			"wechatId": "",
			"alipayId": ""
		}
	})
	const placeholderClass = ref('u-font-28')

	const isRequired = ref('required')
	const bankBranchListQuery = computed(() => {
		return {
			bankAliceCode: form.bankType,
			cityCode: wxProvinceCode.value
		}
	})

	const props = defineProps({
		data: {
			type: Object,
			default: () => {

			}
		}
	})

	watchEffect(() => {
		if (regions.value.length && form.openAccCityId) {
			if (!wxProvinceCode.value) {
				const findPItem= regions.value.find(v=>v.regionId==form.openAccProvinceId)
				const cityIyem=findPItem?(findPItem.children.find(v=>v.regionId==form.openAccCityId)):null
				if(cityIyem){
					wxProvinceCode.value =cityIyem.wxProvinceCode
				}
			}
		}
	})
	watch(() => props.data, (newval) => {
		console.log('watch 变', newval);

		for (let key in form) {
			if (props.data.hasOwnProperty(key)) {
				form[key] = props.data[key]
			}
		}
		console.log(form);
	}, {
		deep: true,
		immediate: true
	})

	const emits = defineEmits(['update'])
	watch(() => form, (newval) => {
		emits('update', newval)
	}, {
		deep: true
	})
</script>

<style lang="scss">
	.container {
		padding: 32rpx 28rpx;
		border-radius: 16rpx;
		margin-bottom: 32rpx;
		background-color: #fff;
	}

	.form-item {
		margin-bottom: 32rpx;

		.title {
			font-weight: 700;
			margin-bottom: 16rpx;
		}

		&.required {
			.title::before {
				content: '*';
				color: red;
			}
		}

		&:last-child {
			margin-bottom: 0;
		}
	}

	.input-box {
		padding: 10px 10px;
		border-radius: 4px;
		border: 1px solid #dadbde;
	}
</style>