<template>
	<!-- 折叠面版存在BUG，所以收益人卡片也采取了 手写的折叠面板 所用样式和 费率板块一致 -->
	<view class="rate-title" @click="rateHeightHandle">
		<view style="font-size: 28rpx; font-weight: 700;">受益人卡片</view>
		<text class="svg" :class="{trans:(rateheight != '0px')}"></text>
	</view>
	
	<view class="rate-list" ref="rateListRef" :style="{height: rateheight}">
		
		<view @click="addOwner" class="add-owner">新增企业受益人</view>
		
		<view class="owner-box" v-for="(item, index) in vdata.companyBeneficiaryList" :key="index">
			<view class="owner-title">
				<view>企业受益人信息{{ index + 1 }}</view>
				<view>
					<view v-if="props.legalBtn" @click="emits('setLegalInfo', index)" class="owner-del" style="margin-bottom: 20rpx;">将法人设置为受益人</view>
					<view @click="delOwnerCard(index)" class="owner-del">删除该受益人</view>
				</view>
			</view>

			<JeePayForm text="受益人身份证人像面照" backColor="#fff" :start="!props.isOwner">
				 <JeepayUpLoad ocrFlag="idCard" :imgUrl="vdata.companyBeneficiaryList[index].idcard1Img" @uploadSuccess="uploadSucOwner($event, index, 'idcard1Img')" @clear="clearOwner('idcard1Img', index)" />
			</JeePayForm>

			<JeePayForm text="受益人身份证国徽面照" backColor="#fff" :start="!props.isOwner">
				 <JeepayUpLoad ocrFlag="idCard" :imgUrl="vdata.companyBeneficiaryList[index].idcard2Img" @uploadSuccess="uploadSucOwner($event, index, 'idcard2Img')" @clear="clearOwner('idcard2Img', index)" />
			</JeePayForm>
			
			<JeePayForm text="受益人身份证姓名" v-model:value="vdata.companyBeneficiaryList[index].idcardName" backColor="#fff" :start="!props.isOwner" />
			<JeePayForm text="受益人身份证号" v-model:value="vdata.companyBeneficiaryList[index].idcardNo" backColor="#fff" :start="!props.isOwner" />
			
			<JeePayForm text="受益人身份证起始有效期" backColor="#fff" :start="!props.isOwner">
				<termOfValidity :defaultDate="vdata.companyBeneficiaryList[index].idcardEffectBegin" @publicSelect="publicSelect($event, 'idcardEffectBegin')" :isEnd="false" />
			</JeePayForm>
			
			<JeePayForm text="受益人身份证结束有效期" backColor="#fff" :start="!props.isOwner">
				<termOfValidity :defaultDate="vdata.companyBeneficiaryList[index].idcardEffectEnd" @publicSelect="publicSelect($event, 'idcardEffectEnd')" />
			</JeePayForm>
			
			<JeePayForm text="受益人身份证居住地址" backColor="#fff" v-model:value="vdata.companyBeneficiaryList[index].idcardAddress" :start="!props.isOwner" />
			
		</view>

	</view>
	
</template>

<script setup>
	
	import { ref, reactive, watch, onMounted, toRaw, nextTick } from 'vue'
	import JeepayUpLoad from '@/components/JeepayUpLoad/JeepayUpLoad.vue' // 图片上传
	import { onLoad } from '@dcloudio/uni-app'
	import JeePayForm from '@/components/applyComponents/JeePayForm.vue' // 通用左右结构布局
	import termOfValidity from '@/components/applyComponents/termOfValidity.vue' // 选择证件有效期
	
	const props = defineProps({
		isOwner: { type: Boolean, default: false }, // 法人是否为收益人，是收益人可以删除最后一个卡片，不是则不能删除最后一个
		legalBtn: { type: Boolean, default: false }, // 法人设置为收益人按钮
		isShengft: { type: Boolean, default: false }, // 盛付通页面 会自动生成一个卡片
	})
	
	const emits = defineEmits(['setLegalInfo'])
	
	let rateheight = ref('0px') // 费率板块的高度
	function rateHeightHandle () {
		rateheight.value == '0px' ? rateheight.value = 'auto' : rateheight.value = '0px'
	}

	const vdata = reactive({
		companyBeneficiaryList: []
	})
	
	// 盛付通进件 受益人信息必填一项
	onMounted(() => {
		if (props.isShengft && vdata.companyBeneficiaryList.length == 0) {
			addOwner()
		}
	})
	
	// 信息回显
	const ownerInfoBack = info => Object.assign(vdata.companyBeneficiaryList, info)
	
	// 新增受益人卡片
	const addOwner = () => {
		nextTick(() => {
			// 法人是受益人，最多数组最多3项， 不是，数组最多4项
			let len = vdata.companyBeneficiaryList.length
			if (props.owner && len >= 3) {
				return uni.showToast({ title: '最多新增三个企业受益人', icon: 'none' })
			} 
			if (!props.owner && len >= 4) {
				return uni.showToast({ title: '最多新增四个企业受益人', icon: 'none' })
			}
			vdata.companyBeneficiaryList.push({
				idcard1Img: '',
				idcardNo: '',
				idcardName: '',
				idcardAddress: '',
				idcard2Img: '',
				idcardEffectEnd: '',
				idcardEffectBegin: '',
			})
		})
	}

	// 删除卡片
	const delOwnerCard = i => {
		if (vdata.companyBeneficiaryList.length == 1 && !props.isOwner) {
			return uni.showToast({ title: '最后一项不可删除', icon: 'none' })
		}
		vdata.companyBeneficiaryList.splice(i, 1)
	}

	// 受益人身份证图片上传成功
	const uploadSucOwner = (res, index, name) => {
		vdata.companyBeneficiaryList[index][name] = res.data // 图片回显
		// ocr信息回显
		Object.assign(vdata.companyBeneficiaryList[index], res.ocrInfo)
	}

	// 删除收益人图片
	const clearOwner = (name, index) => vdata.companyBeneficiaryList[index][name] = ''

	// 父组件进件时，会调用该方法获取参数
	const ownerInfo = () => toRaw(vdata.companyBeneficiaryList)

	defineExpose({ ownerInfo, ownerInfoBack })
</script>

<style lang="scss" scoped>

// 新建受益人卡片
.add-owner {
	width: 320rpx;
	height: 60rpx;
	line-height: 60rpx;
	border-radius: 0.3125rem;
	text-align: center;
	background: #0041c4;
	font-weight: 500;
	font-size: 0.9375rem;
	color: #fff;
	margin: 20rpx auto;
}
.owner-box {
	border: 1rpx solid #e8e8e8;
	margin: 20rpx;
	padding: 30rpx 30rpx 3rpx 30rpx;
	box-sizing: border-box;
	border-radius: 10rpx;
	.item {
		padding-left: 0;
		padding-right: 0;
	}
	.owner-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}
	.owner-del {
		border-radius: 0.3125rem;
		background: #0041c4;
		font-weight: 500;
		color: #fff;
		text-align: center;
		padding: 8rpx 20rpx;
	}
}

.rate-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx;
	color:#000;
	font-weight: 550;
	border-bottom: 1px solid #ebeef5;
	image {
		width: 28rpx;
		height: 28rpx;
	}
	.svg {
		font-family: uniicons;
		text-decoration: none;
		text-align: center;
		color: rgb(187, 187, 187);
		font-size: 14px;
		&::before {
			content: "\e6b8";
		}
	}
}
.trans{
	transform: rotate(180deg);
}
.rate-list {
	// height: 600rpx;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	.list-item {
		border-bottom: 1px solid #ebeef5;
		padding: 35rpx 30rpx;
		display: flex;
		flex-direction: column;
		font-size: 28rpx;
		
		input {
			border: 1px solid  #ebeef5;
			display: inline-block;
			width: 180rpx;
			margin: 0 10rpx;
			padding: 0 10rpx;
		}
		
		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 30rpx;
		}
	}
}


</style>