<template>
	<!-- 该页码为填写信息的组件 -->
	<!-- 只读文件 -->
	<readOnlyInfo v-if="isDisable" ref="applyInfoRef" applyName="alipay" />
		
	<view v-if="!isDisable">
		<uni-collapse ref="collapse">
			<uni-collapse-item title="经营信息"  class="coll-title" :open="true">
				<view class="content">
					
					<JeePayForm text="产品类型" >
						<label class="radio"><radio value="1" checked="true" style="transform: scale(0.6,0.6);" />当面付</label>
					</JeePayForm>
					
					<JeePayForm text="经营类目" >
						<dataPicker :code="mccCode" :localdata="mccAli" @change="publicSelect($event, 'mccCode')"  paramType="splicing" />
					</JeePayForm>
					
					<JeePayForm text="营业执照图片">	
						 <JeepayUpLoad ocrFlag="license" :imgUrl="applyDetailInfo.licenseImg" @uploadSuccess="uploadSuccess($event, 'licenseImg')" @clear="clear('licenseImg')" />
					</JeePayForm>
						
					<JeePayForm text="营业执照编号" v-model:value="applyDetailInfo.licenseNo" />
					
					<JeePayForm text="营业执照有效期截止">
						<termOfValidity :defaultDate="applyDetailInfo.licenseEffectEnd" @publicSelect="publicSelect($event, 'licenseEffectEnd')" />
					</JeePayForm>
					
					<JeePayForm text="特殊资质照" >
						 <JeepayUpLoad :imgUrl="applyDetailInfo.specialLicenseImg" @uploadSuccess="uploadSuccess($event, 'specialLicenseImg')" @clear="clear('specialLicenseImg')" />
					</JeePayForm>
					
				</view>
			</uni-collapse-item>
			<uni-collapse-item title="门店信息" class="coll-title">
				<view class="content">

					<JeePayForm text="商户名称全称" v-model:value="applyDetailInfo.mchFullName" />
					
					<JeePayForm text="商户地理位置" >
							<dataPicker :code="areaCode" :localdata="address" @change="publicSelect($event, 'areaCode')"  paramType="arr" />
					</JeePayForm>

					<JeePayForm text="商户详细地址" v-model:value="applyDetailInfo.address" />
					
					<JeePayForm text="门头照">
						<JeepayUpLoad :imgUrl="applyDetailInfo.storeOuterImg" @uploadSuccess="uploadSuccess($event, 'storeOuterImg')" @clear="clear('storeOuterImg')" />
					</JeePayForm>

					<JeePayForm text="店内环境照">
						<JeepayUpLoad :imgUrl="applyDetailInfo.storeInnerImg" @uploadSuccess="uploadSuccess($event, 'storeInnerImg')" @clear="clear('storeInnerImg')" />
					</JeePayForm>
					
				</view>
			</uni-collapse-item>
			<uni-collapse-item title="联系人信息"  class="coll-title">
				<view class="content">
					
					<JeePayForm text="支付宝账号" v-model:value="applyDetailInfo.accountNo" />
					
					<JeePayForm text="商户联系人姓名" v-model:value="applyDetailInfo.contactName" />
					
					<JeePayForm text="商户联系人电话" v-model:value="applyDetailInfo.contactPhone" />
					
					<JeePayForm text="商户联系人邮箱" v-model:value="applyDetailInfo.contactEmail" />

				</view>
			</uni-collapse-item>
			<!-- 费率组件 -->
			<defaultRate ref="defaultRateRef" isCheck="all" />
		</uni-collapse>

	</view>	
</template>

<script setup>
import {ref , reactive, inject } from 'vue'
import address from '@/components/applyJson/address.json' // 地址
import mccAli from '@/components/applyJson/mccAli.json' // 行业
import JeepayUpLoad from '@/components/JeepayUpLoad/JeepayUpLoad.vue' // 图片上传
import defaultRate from '../components/defaultRate.vue' // 默认费率
import readOnlyInfo from '../components/readOnlyInfo.vue' // 只读文件
import tool from '@/util/tool.js' // 工具类函数
import JeePayForm from '@/components/applyComponents/JeePayForm.vue' // 通用左右结构布局
import termOfValidity from '@/components/applyComponents/termOfValidity.vue' // 选择证件有效期
import dataPicker from '@/components/applyComponents/dataPicker.vue' // 通用级联选择


const channelInfo = inject('channelInfo')
const emit = defineEmits(['applyHandle'])
const defaultRateRef = ref(null) // 默认费率组件

// 商户进件详细信息（JSON类型字符串）
const applyDetailInfo = reactive({
	productType: 1,//产品类型
})

// 状态: 0-未发起、 1-审核中、 2-进件成功、 3-驳回待修改、 4-待验证、 5-待签约
// 状态为 1,2,4,5 开启disable  (也就是状态不为 0 3)
let isDisable = ref(false)
if (!['0', '3', '8'].includes(channelInfo.state)) isDisable.value = true

// 上传图片成功  以及OCR识别信息回显
const uploadSuccess = (res, name) => {
	applyDetailInfo[name] = res.data
	Object.assign(applyDetailInfo, res.ocrInfo) // ocr信息回显
}

// 清除图片  仅前端
const clear = key => applyDetailInfo[key] = ''

// 通用选择事件 回调函数
const publicSelect = (e, key) => applyDetailInfo[key] = e.detail.value

// 发起进件
const launchApply = isTempData => {
	
	// 拿费率组件的值
	applyDetailInfo.paywayFeeList = defaultRateRef.value.getList(isTempData)
	
	// 判断类型，对象类型是费率正常提交   Sting 是错误信息
	if (typeof applyDetailInfo.paywayFeeList === 'string') return uni.showToast({ title: applyDetailInfo.paywayFeeList, icon: 'none' })
	
	emit('applyHandle', {name: 'alipay',isTempData, applyDetailInfo})
}

let mccCode = ref() // 行业mcc回显
let areaCode = ref('') // 商户省市区回显

let applyInfoRef = ref(null) // 只读组件信息

// 合并信息方法, 智能读取，和信息回显，通过此方法合并
const assignObj = (obj) => {
	// 开启只读模式
	if (isDisable.value) {
		obj.mccText = tool.mccBack(obj.mccCode, mccAli, 'splicing')  // 行业码转文字
		obj.areaText = tool.addressBack(obj.areaCode, address) // 地理码转文字
		applyInfoRef.value.getApplyInof(obj) // 传给只读组件
	}

	// 信息回显
	Object.assign(applyDetailInfo, obj) 
	// 以下两个码是为了给级联选择器做回显用，需要最后一个码
	obj.mccCode ? mccCode.value = obj.mccCode.split('_')[1] : null // mcc码，拼接类型要截取
	obj.areaCode ? areaCode.value = obj.areaCode[2] : null // 数组类型，直接拿最后一个
}

defineExpose({ launchApply, assignObj })

</script>

<style scoped lang="scss">
@import '../static/information.scss';
</style>