<template>
	<!-- 上传图片&提交审核 状态4 出现-->
	<view v-if="channelInfo.state == 4">
		
		<view class="title">上传图片</view>
		
		<JeePayForm text="营业执照照片" v-if="applyInfo.merchantType != '1'">
			<JeepayUpLoad :imgUrl="applyInfo.idcard1Img" @uploadSuccess="uploadSuccess($event, 'idcard1Img')" @clear="clear('idcard1Img')" />
		</JeePayForm>
		
		<JeePayForm text="法人身份证国徽面照片" >
			<JeepayUpLoad :imgUrl="applyInfo.idcard1Img" @uploadSuccess="uploadSuccess($event, 'idcard1Img')" @clear="clear('idcard1Img')" />
		</JeePayForm>
		
		<JeePayForm text="法人身份证人像面照片" >
			<JeepayUpLoad :imgUrl="applyInfo.idcard2Img" @uploadSuccess="uploadSuccess($event, 'idcard2Img')" @clear="clear('idcard2Img')" />
		</JeePayForm>
		
		<JeePayForm text="手持证件照片" >
			<JeepayUpLoad :imgUrl="applyInfo.idcardInHandImg" @uploadSuccess="uploadSuccess($event, 'idcardInHandImg')" @clear="clear('idcardInHandImg')" />
		</JeePayForm>
		
		<JeePayForm text="门头照" >
			<JeepayUpLoad :imgUrl="applyInfo.storeOuterImg" @uploadSuccess="uploadSuccess($event, 'storeOuterImg')" @clear="clear('storeOuterImg')" />
		</JeePayForm>
		
		<JeePayForm text="店内环境照" >
			<JeepayUpLoad :imgUrl="applyInfo.storeInnerImg" @uploadSuccess="uploadSuccess($event, 'storeInnerImg')" @clear="clear('storeInnerImg')" />
		</JeePayForm>
		
		<JeePayForm text="收银台照" >
			<JeepayUpLoad :imgUrl="applyInfo.storeCashierImg" @uploadSuccess="uploadSuccess($event, 'storeCashierImg')" @clear="clear('storeCashierImg')" />
		</JeePayForm>
		
		<JeePayForm text="结算银行卡正面照片" >
			<JeepayUpLoad :imgUrl="applyInfo.settAccountLicenseImg" @uploadSuccess="uploadSuccess($event, 'settAccountLicenseImg')" @clear="clear('settAccountLicenseImg')" />
		</JeePayForm>
		
		<JeePayForm text="结算银行卡反面照片" >
			<JeepayUpLoad :imgUrl="applyInfo.settAccountBankImg2" @uploadSuccess="uploadSuccess($event, 'settAccountBankImg2')" @clear="clear('settAccountBankImg2')" />
		</JeePayForm>
		
		<JeePayForm text="开户许可证照片" v-if="applyInfo.merchantType == '3'">
			<JeepayUpLoad :imgUrl="applyInfo.companyAccountLicenseImg" @uploadSuccess="uploadSuccess($event, 'companyAccountLicenseImg')" @clear="clear('companyAccountLicenseImg')" />
		</JeePayForm>
		
		<JeePayForm text="入账账户身份证人像面照片" v-if="applyInfo.codeLegalPersonAcc == 0">
			<JeepayUpLoad :imgUrl="applyInfo.settAccountIdcard1Img" @uploadSuccess="uploadSuccess($event, 'settAccountIdcard1Img')" @clear="clear('settAccountIdcard1Img')" />
		</JeePayForm>
		
		<JeePayForm text="入账账户身份证国徽面照片" v-if="applyInfo.codeLegalPersonAcc == 0">
			<JeepayUpLoad :imgUrl="applyInfo.settAccountIdcard2Img" @uploadSuccess="uploadSuccess($event, 'settAccountIdcard2Img')" @clear="clear('settAccountIdcard2Img')" />
		</JeePayForm>
		
		<JeePayForm text="结算授权证书照片" v-if="applyInfo.codeLegalPersonAcc == 0">
			<JeepayUpLoad :imgUrl="applyInfo.settleAuthLetterPhoto" @uploadSuccess="uploadSuccess($event, 'settleAuthLetterPhoto')" @clear="clear('settleAuthLetterPhoto')" />
		</JeePayForm>
		
		<JeePayForm text="收单协议盖章页照片" :start="false">
			<JeepayUpLoad :imgUrl="applyInfo.acquiringAgreementPhoto" @uploadSuccess="uploadSuccess($event, 'acquiringAgreementPhoto')" @clear="clear('acquiringAgreementPhoto')" />
		</JeePayForm>
		
		<JeePayForm text="其他材料照片" :start="false">
			<JeepayUpLoad :imgUrl="applyInfo.other1" @uploadSuccess="uploadSuccess($event, 'other1')" @clear="clear('other1')" />
		</JeePayForm>
		
		<view class="submit" @tap="onSubmit">提交审核</view>
		
	</view>
	
	<!-- 自主签约 -->
	<signing v-if="['2','5'].includes(channelInfo.state)" />
	
	<!-- 费率组件 与按钮 -->
	<template v-if="(channelInfo.state == 2)&&(vdata.paywayFeeList.length>0)"  >
		
		<defaultRate ref="defaultRateRef"  />
		<view class="exhibition">请展开费率列表进行配置，已经配置过费率商户的不需重复配置</view>
		<view v-if="channelInfo.channelVar1" class="exhibition">
			<view>错误信息：</view>
			{{ channelInfo.channelVar1 }}
		</view>
		<view class="submit" @tap="rateSubmit">费率配置</view>
		
	</template>
	
</template>

<script setup>

import {ref ,reactive, toRaw, inject, onMounted } from 'vue';
import JeepayUpLoad from '@/components/JeepayUpLoad/JeepayUpLoad.vue' // 图片上传
import { $yspayUpload ,$ysPayRateConfig, $mchApplymentsInfo } from '@/http/apiManager.js'
import graceChecker from '@/util/graceChecker.js'//引入表单校验工具函数
import signing from '../../components/signing.vue' // 自主签约组件
import defaultRate from '../../components/defaultRate.vue' // 费率
import JeePayForm from '@/components/applyComponents/JeePayForm.vue' // 通用左右结构布局

const channelInfo = inject('channelInfo')

const applyInfo = ref({}) // 本页面的进件信息

const vdata = reactive({
	paywayFeeList: [] // 费率
})

const defaultRateRef = ref(null) // 费率组件

// 提交审核
const onSubmit = () => {
	
	let check = JSON.parse(JSON.stringify(rules)) // 深拷贝一份
	
	if (applyInfo.value.merchantType != 1) {
		check.push(
			{name: "licenseImg",checkType: "notnull",errorMsg: "请上传营业执照照片"}
		)
	} 
	if (applyInfo.value.merchantType == 3) {
		check.push(
			{name: "companyAccountLicenseImg",checkType: "notnull",errorMsg: "请上传开户许可证照片"}
		)
	} 
	if (applyInfo.value.codeLegalPersonAcc == 0) {
		check.push(
			{name: "settAccountIdcard1Img",checkType: "notnull",errorMsg: "请上传入账账户身份证人像面照片"},
			{name: "settAccountIdcard2Img",checkType: "notnull",errorMsg: "请上传入账账户身份证国徽面照片"},
			{name: "settleAuthLetterPhoto",checkType: "notnull",errorMsg: "请上传结算授权证书照片"},
		)
	}
	
	let checkRes = graceChecker.check(applyInfo.value, check);
	if (!checkRes) return uni.showToast({ title: graceChecker.error, icon: "none"})
	
	uni.showLoading({ title: '提交中' })
	$yspayUpload(channelInfo.applyId, toRaw(applyInfo.value)).then(res => {
		uni.hideLoading()
		uni.showToast({ title: '操作成功', icon: 'none' })
		uni.navigateBack({})
	})
}

const rules = [
	{name: "idcard1Img",checkType: "notnull",errorMsg: "请上传法人身份证人像面照片"},
	{name: "idcard2Img",checkType: "notnull",errorMsg: "请上传法人身份证国徽面照片"},
	{name: "idcardInHandImg",checkType: "notnull",errorMsg: "请上传手持证件照片"},
	{name: "storeOuterImg",checkType: "notnull",errorMsg: "请上传门头照"},
	{name: "storeInnerImg",checkType: "notnull",errorMsg: "请上传店内环境照"},
	{name: "storeCashierImg",checkType: "notnull",errorMsg: "请上传收银台照"},
	{name: "settAccountLicenseImg",checkType: "notnull",errorMsg: "请上传结算银行卡正面照片"},
	{name: "settAccountBankImg2",checkType: "notnull",errorMsg: "请上传结算银行卡反面照片"},
	{name: "settAccountBankImg2",checkType: "notnull",errorMsg: "请上传结算银行卡反面照片"},
]

// 调用进件查询接口
const mchApplyInfoHandle = () => {
	let originData = 1
	$mchApplymentsInfo(channelInfo.applyId, originData).then( ({bizData}) => {
		applyInfo.value = JSON.parse(bizData.applyDetailInfo)
	})
}
const setApplyInfo = () => mchApplyInfoHandle()

// 上传图片成功
const uploadSuccess = (res, name) => 	applyInfo.value[name] = res.data

// 清除图片  仅前端
const clear = (name, url) => applyInfo.value[name] = ''

// 配置费率
const rateSubmit = () => {
	uni.showLoading({title: '提交中'})
	vdata.paywayFeeList = defaultRateRef.value.getList(false)
	$ysPayRateConfig(channelInfo.applyId, { paywayFeeList: vdata.paywayFeeList }).then((res) => {
		uni.hideLoading()
		uni.navigateBack({})
		uni.showToast({title: '提交成功', icon: 'none'})
	})
}

defineExpose({ setApplyInfo })
</script>

<style scoped lang="scss">
.title {
	text-align: center;
	margin: 30rpx;
}
.submit{
	display: flex;
	justify-content: center;
	margin: 30rpx auto;
	width: 380rpx;
	height: 90rpx;
	line-height: 90rpx;
	border-radius: 10rpx;
	background: #3981FF;
	font-weight: 500;
	font-size: 30rpx;
	color: #fff;
}
.exhibition {
	margin: 30rpx;
}
</style>