<!--
  通用 【签约开通】页面

  @author terrfly
  @site https://www.jeequan.com
  @date 2022/11/03 08:35
-->

<template>
  <div v-if="vdata.recordId">
    <div v-if="vdata.detailData.state == 5">
      <a-descriptions title="电子协议签署" />
      <a-form v-if="!vdata.isSign">
        <a-form-item v-if="vdata.signData.contractNo" label="协议编号">
          <p style="margin-top: 5px;">{{ vdata.signData.contractNo }}</p>
        </a-form-item>

        <a-form-item v-if="vdata.signData.signUrl" label="协议地址">
          <p style="margin-top: 5px;"><a :href="vdata.signData.signUrl" target="_blank">{{ vdata.signData.signUrl }}</a></p>
        </a-form-item>

        <a-form-item v-if="vdata.signData.signUrl" label="协议地址快捷访问二维码">
          <QrcodeVue :value="vdata.signData.signUrl" :size="150" class="qrcode" />
        </a-form-item>

        <a-form-item v-if="vdata.signData.expireTs" label="协议失效时间">
          <p style="margin-top: 5px;">{{ vdata.signData.expireTs }}</p>
        </a-form-item>
      </a-form>

      <p v-else>协议已审核通过</p>
    </div>

    <div v-else-if="vdata.detailData.state == 6">
      <a-form :model="vdata.applyData" style="padding-bottom: 30px;" :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
        <a-descriptions title="上传图片&提交审核" />

        <a-form-item v-if="vdata.applyData.licenseImg" label="营业执照照片">
          <JeepayUpload v-model:src="vdata.applyData.licenseImg" bizType="applyment" />
        </a-form-item>
        <a-form-item v-if="vdata.applyData.idcard1Img" label="法人身份证人像面照片">
          <JeepayUpload v-model:src="vdata.applyData.idcard1Img" bizType="applyment" />
        </a-form-item>
        <a-form-item v-if="vdata.applyData.idcard2Img" label="法人身份证国徽面照片">
          <JeepayUpload v-model:src="vdata.applyData.idcard2Img" bizType="applyment" />
        </a-form-item>
        <a-form-item v-if="vdata.applyData.storeOuterImg" label="门头照">
          <JeepayUpload v-model:src="vdata.applyData.storeOuterImg" bizType="applyment" />
        </a-form-item>
        <a-form-item v-if="vdata.applyData.storeInnerImg" label="店内环境照">
          <JeepayUpload v-model:src="vdata.applyData.storeInnerImg" bizType="applyment" />
        </a-form-item>
        <a-form-item v-if="vdata.applyData.settAccountLicenseImg" label="结算银行卡照片">
          <JeepayUpload v-model:src="vdata.applyData.settAccountLicenseImg" bizType="applyment" />
        </a-form-item>
        <a-form-item v-if="vdata.applyData.companyAccountLicenseImg" label="开户许可证照片">
          <JeepayUpload v-model:src="vdata.applyData.companyAccountLicenseImg" bizType="applyment" />
        </a-form-item>
        <a-form-item v-if="vdata.applyData.settAccountIdcard1Img" label="入账账户身份证人像照">
          <JeepayUpload v-model:src="vdata.applyData.settAccountIdcard1Img" bizType="applyment" />
        </a-form-item>
        <a-form-item v-if="vdata.applyData.settAccountIdcard2Img" label="入账账户身份证国徽面照片">
          <JeepayUpload v-model:src="vdata.applyData.settAccountIdcard2Img" bizType="applyment" />
        </a-form-item>
        <a-form-item v-if="vdata.applyData.acntArtifImg" label="入账非法人证明照片">
          <JeepayUpload v-model:src="vdata.applyData.acntArtifImg" bizType="applyment" />
        </a-form-item>
        <a-form-item v-if="vdata.applyData.organizationImg" label="组织机构代码证照片">
          <JeepayUpload v-model:src="vdata.applyData.organizationImg" bizType="applyment" />
        </a-form-item>
        <a-form-item v-if="vdata.applyData.taxRegistrationImg" label="税务登记证照片">
          <JeepayUpload v-model:src="vdata.applyData.taxRegistrationImg" bizType="applyment" />
        </a-form-item>
        <a-form-item v-if="vdata.applyData.handCertificateImg" label="手持证件照片">
          <JeepayUpload v-model:src="vdata.applyData.handCertificateImg" bizType="applyment" />
        </a-form-item>
        <a-form-item v-if="vdata.applyData.additionImg" label="补充资料照片">
          <JeepayUpload v-model:src="vdata.applyData.additionImg" bizType="applyment" />
        </a-form-item>
      </a-form>
    </div>

    <div v-else-if="(vdata.detailData.state == 2)">
      <NextBizsCommonPage ref="nextBizsCommonPage" />
    </div>
    
    <div v-else>
      <a-result title="暂无更多操作">
        <template #icon>
          <smile-twoTone />
        </template>
      </a-result>
    </div>

    <div class="drawer-btn-center">
      <a-button v-if="vdata.detailData.state == 5" type="primary" :loading="vdata.btnLoading" @click="onSubmit"><check-outlined />确认签署</a-button>
      <a-button v-if="vdata.detailData.state == 6" type="primary" :loading="vdata.btnLoading" @click="onSubmit"><check-outlined />上传&提审</a-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { $elecContractGenerate, $elecContractSign, $fuiouUpload } from '@/api/manage'
import { reactive, ref, inject, getCurrentInstance, nextTick } from 'vue'
import NextBizsCommonPage from '../../commons/NextBizsCommonPage.vue'
import QrcodeVue from 'qrcode.vue'
import dateUtil from '@/utils/dateUtil.js'
const { $infoBox } = getCurrentInstance()!.appContext.config.globalProperties

// 接收父组件的参数注入： 进件详细欣欣
let applyRecord : any = inject('applyRecord')

const nextBizsCommonPage = ref()

const vdata : any = reactive({
  recordId: null, // 更新对象ID
  detailData: {} as any, // 进件对象
  applyData: {} as any, // 数据资料对象
  visible: false, // 是否显示弹层/抽屉
  signData: {} as any, // 电子协议对象
  isSign: false, // 是否已签署电子协议
})

function pageRender (recordId) { // 弹层打开事件

  vdata.recordId = recordId
  vdata.detailData = applyRecord

  vdata.applyData = JSON.parse(vdata.detailData.applyDetailInfo)

  // 待签约，发起电子协议签署
  if(vdata.detailData.state == 5) {
    elecContractGenerate()
  } else if (vdata.detailData.state == 2) {
    nextTick(() => {
      nextBizsCommonPage.value.pageRender(vdata.recordId) // 直接调用通用组件
    })
  }
}

function elecContractGenerate() {
  $elecContractGenerate(vdata.recordId).then( (res) => {
    if (res.storeSuccResParameter.includes('协议已审核通过')) {
      vdata.isSign = true
    }else if(res.storeSuccResParameter) {
      vdata.signData = JSON.parse(res.storeSuccResParameter)

      var dateArr = vdata.signData.expireTs.split(' ')
      vdata.signData.expireTs = dateUtil.formatDate(dateArr[0]) + ' ' + dateArr[1]
    }
  })
}

function onSubmit() {
  vdata.btnLoading = true

  if (vdata.detailData.state == 5) {
    $elecContractSign(vdata.recordId).then(() => { 
      $infoBox.message.success('签署成功')
      vdata.detailData.state = 6
      vdata.btnLoading = false
    }).catch(() => {
      vdata.btnLoading = false
    })

  } else if (vdata.detailData.state == 6) {
    $fuiouUpload(vdata.recordId).then(() => { 
      $infoBox.message.success('操作成功')
      vdata.btnLoading = false
    }).catch(() => {
      vdata.btnLoading = false
    })
  }
}

defineExpose({ pageRender })
</script>
<style scoped>

.form-item-content{
  width: 70%
}

</style>
