<template>
	
	<!-- 开通业务 -->
	<view class="title-center"> 开通业务 </view>
	
	<view style="margin-bottom: 20px">
		
		<JeePayForm text="商户类型">
			{{ openService.merchantType == '1' ? '个人' : '企业' }}
		</JeePayForm>
		
		<template v-if="openService.merchantType != '1'">
			
			<JeePayForm text="法人身份证人像面照片">
				<JeepayUpLoad :imgUrl="openService.idcard1Img" @uploadSuccess="uploadSuccess($event, 'idcard1Img')"  @clear="clear('idcard1Img')" />
			</JeePayForm>
			<JeePayForm text="法人身份证国徽面照片">
				<JeepayUpLoad :imgUrl="openService.idcard2Img" @uploadSuccess="uploadSuccess($event, 'idcard2Img')"  @clear="clear('idcard2Img')" />
			</JeePayForm>
			<JeePayForm text="营业执照照片">
				<JeepayUpLoad :imgUrl="openService.licenseImg" @uploadSuccess="uploadSuccess($event, 'licenseImg')"  @clear="clear('licenseImg')" />
			</JeePayForm>
			<JeePayForm text="门头照">
				<JeepayUpLoad :imgUrl="openService.storeOuterImg" @uploadSuccess="uploadSuccess($event, 'storeOuterImg')"  @clear="clear('storeOuterImg')" />
			</JeePayForm>
			<JeePayForm text="店内环境照">
				<JeepayUpLoad :imgUrl="openService.storeInnerImg" @uploadSuccess="uploadSuccess($event, 'storeInnerImg')"  @clear="clear('storeInnerImg')" />
			</JeePayForm>
			<JeePayForm text="收银台照">
				<JeepayUpLoad :imgUrl="openService.storeCashierImg" @uploadSuccess="uploadSuccess($event, 'storeCashierImg')"  @clear="clear('storeCashierImg')" />
			</JeePayForm>
			<JeePayForm text="开户许可证照片">
				<JeepayUpLoad :imgUrl="openService.companyAccountLicenseImg" @uploadSuccess="uploadSuccess($event, 'companyAccountLicenseImg')"  @clear="clear('companyAccountLicenseImg')" />
			</JeePayForm>
		</template>
		
		<template v-if="openService.settAccountType == 'C'">
			<JeePayForm text="结算卡正面照片">
				<JeepayUpLoad :imgUrl="openService.settAccountLicenseImg" @uploadSuccess="uploadSuccess($event, 'settAccountLicenseImg')"  @clear="clear('settAccountLicenseImg')" />
			</JeePayForm>
			<JeePayForm text="结算卡反面照片">
				<JeepayUpLoad :imgUrl="openService.settBankCardBackImg" @uploadSuccess="uploadSuccess($event, 'settBankCardBackImg')"  @clear="clear('settBankCardBackImg')" />
			</JeePayForm>
			<JeePayForm text="结算人身份证人像照片">
				<JeepayUpLoad :imgUrl="openService.settAccountIdcard1Img" @uploadSuccess="uploadSuccess($event, 'settAccountIdcard1Img')"  @clear="clear('settAccountIdcard1Img')" />
			</JeePayForm>
			<JeePayForm text="结算人身份证国徽面照片">
				<JeepayUpLoad :imgUrl="openService.settAccountIdcard2Img" @uploadSuccess="uploadSuccess($event, 'settAccountIdcard2Img')"  @clear="clear('settAccountIdcard2Img')" />
			</JeePayForm>
		</template>
		
		<JeePayForm text="授权委托书" v-if="openService.settAccountType == 'D'">
			<JeepayUpLoad :imgUrl="openService.authEnturstPic" @uploadSuccess="uploadSuccess($event, 'authEnturstPic')"  @clear="clear('authEnturstPic')" />
		</JeePayForm>

		<JeePayForm text="商务协议" v-if="openService.settAccountType == '3'" :start="false">
			<JeepayUpLoad :imgUrl="openService.bankPic" @uploadSuccess="uploadSuccess($event, 'bankPic')"  @clear="clear('bankPic')" />
		</JeePayForm>
		
		<JeePayForm text="支付宝商户经营类目">
		  <jeeDataPicker :localdata="aliMcc" :code="openService.aliFeeMcc" @change="publicSelect($event, 'aliFeeMcc')" paramType="oneLevel" />
		</JeePayForm>
		
	</view>
	
	<!-- 费率组件 -->
	<defaultRate ref="defaultRateRef" @autoPos="autoPosHandle" />

	<view class="authentication-btn" @click="onSubmitWxRealName">发起认证</view>
	
	<!-- 商户实名认证 -->
	<view class="authentication">
		<view class="title">
			<text>商户实名认证</text>
			<view v-if="vdata.wxOpenInfo.signUrl" @click="refreshWxOpenInfo"  class="btn">刷新</view>
		</view>
		<view>{{vdata.wxOpenInfo.state || "异常[" + vdata.wxOpenInfo.errInfo + "]"}}</view>
	</view>

	<view class="reject" v-if="vdata.wxOpenInfo.errInfo">
		<text class="title">驳回原因</text>
		<view style="color: #fd2821">{{ vdata.wxOpenInfo.errInfo }}</view>
	</view>

	<view class="code-box" v-if="vdata.wxOpenInfo.signUrl">
		<view>商户联系人使用已绑定银行卡的微信扫下面的二维码:</view>
		<image :src="tool.drawQRcode(vdata.wxOpenInfo.signUrl)" />
		<view class="jeepay-tip-text">(温馨提示:自助认证不限制谁来操作认证,但建议是商户联系人进行认证,以免后期需要扫码找不到微信认证管理员)</view>
	</view>
	
</template>

<script setup>
import JeePayForm from "@/components/applyComponents/JeePayForm.vue"; // 通用左右结构布局
import JeepayUpLoad from "@/components/JeepayUpLoad/JeepayUpLoad.vue"; // 图片上传
import { ref, reactive, inject, toRaw } from 'vue'
import { $mchApplymentsInfo, $getMchApplymentWxOpenInfo, $dgpayWxRealName, } from "@/http/apiManager.js";	
import tool from "@/util/tool.js"; // 工具类函数
import jeeDataPicker from "@/components/applyComponents/dataPicker.vue"; // 通用级联选择
import wxMcc from "@/components/applyJson/jeepayMcc.json"; // 微信mcc
import defaultRate from "../../components/defaultRate.vue"; // 默认费率

/*
 开通业务板块  只在进件成功后开启  state:2
 */
let vdata = reactive({
  wxOpenInfo: {}, // 微信开户意愿信息
});
let openService = reactive({ // 进件信息
	// aliConfList:[], // 支付宝业务
	// wxConfList: [], // 微信业务
})

let defaultRateRef = ref(null); // 费率组件

const channelInfo = inject('channelInfo')

// 支付宝经营类目
const aliMcc = reactive([
	{ value: '2015050700000000', text: '美食' },
	{ value: '2015091000052157', text: '超市便利店' },
	{ value: '2015062600004525', text: '休闲娱乐' },
	{ value: '2015062600002758', text: '购物' },
	{ value: '2016062900190124', text: '爱车' },
	{ value: '2015063000020189', text: '生活服务' },
	{ value: '2016042200000148', text: '教育培训' },
	{ value: '2016062900190296', text: '医疗健康' },
	{ value: '2015080600000001', text: '航旅' },
	{ value: '2016062900190337', text: '专业销售/批发' },
	{ value: '2016062900190371', text: '政府/社会组织' },
])

// 通用选择器回调
const publicSelect = (e, name) => {
	openService[name] = e.detail.value
}

// 请求微信实名认证查询
const getWxOpenInfo = () => {
  $getMchApplymentWxOpenInfo(channelInfo.applyId)
    .then((res) => {
      if (vdata.isRefresh) {
        uni.showToast({ title: "已刷新", icon: "none" });
        vdata.isRefresh = false;
      }
      vdata.wxOpenInfo = res.bizData;
    })
};

// 刷新微信实名认证
const refreshWxOpenInfo = () => {
  vdata.isRefresh = true;
  getWxOpenInfo();
};

if (channelInfo.state == 2) {
  // 请求非加密的进件信息
	let originData = 1
  $mchApplymentsInfo(channelInfo.applyId, originData)
    .then(({ bizData }) => {
      Object.assign(openService, JSON.parse(bizData.applyDetailInfo));
    }).catch((err) => console.log(err));

  // 请求微信实名认证查询
  getWxOpenInfo();
}

// 上传图片成功  及OCR识别回显
const uploadSuccessOS = (res, name) => {
  openService[name] = res.data;
  if (res.ocrInfo && Object.keys(res.ocrInfo).length < 1) return false;
  // OCR图片识别  idCard-身份证 idcard1Img，idcard2Img  license-营业执照 licenseImg
  if (name == "idcard1Img") {
    openService.idcardName = res.ocrInfo.idcardName; // 法人身份证姓名
    openService.idcardNo = res.ocrInfo.idcardNo; // 法人身份证号
  }
};

// 清除图片  仅前端
const clear = (name, url) => openService[name] = ""

// 发起认证
const onSubmitWxRealName = () => {
	// 有费率的进件渠道，要在发起进件之前，获取所选择的费率信息
	openService.paywayFeeList = defaultRateRef.value.getList(false)
  uni.showLoading({ title: "提交中..." });
  $dgpayWxRealName(channelInfo.applyId, toRaw(openService)).then((res) => {
		uni.hideLoading();
		uni.showToast({ title: "提交成功", icon: "none" })
		uni.navigateBack()
	})
}

</script>

<style scoped lang="scss">
@import "../../static/information.scss";
// 微信实名认证
.authentication {
  padding: 35rpx 30rpx 35rpx 30rpx;
  box-sizing: border-box;
  border-bottom: 1rpx solid #e8e8e8;
  .title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30rpx;
  }
}

// 驳回原因
.reject {
  padding: 35rpx 30rpx 35rpx 30rpx;
  box-sizing: border-box;
  display: flex;
	flex-direction: column;
  justify-content: space-between;
  border-bottom: 1rpx solid #e8e8e8;
  .title {
    margin-right: 30rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
		margin-bottom: 30rpx;
  }
}

// 发起认证
.authentication-btn {
  display: flex;
  justify-content: center;
  margin: 30rpx auto;
  width: 380rpx;
  height: 90rpx;
  line-height: 90rpx;
  border-radius: 10rpx;
  background: #0041c4;
  font-weight: 500;
  font-size: 30rpx;
  color: #fff;
}

// 图片
.code-box {
  box-sizing: border-box;
  padding: 35rpx 30rpx 35rpx 30rpx;
  display: flex;
  flex-direction: column;
  image {
    margin: 40rpx auto;
    width: 200px;
    height: 200px;
  }
}
.btn {
	border-radius: 10rpx;
	background: #3981FF;
	color: #fff;
	padding: 5rpx 15rpx;
}
.title-center {
	padding: 30rpx;
	text-align: center;
	background-color: #fafbfc;
	border-top: 1rpx solid #e8e8e8;
}
.business-title {
	padding: 30rpx;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
}
.business-content {
	margin: 0 30rpx 30rpx ;
	border: 1rpx solid #e8e8e8;
	box-sizing: border-box;
	border-radius: 10rpx;
}
</style>