<template>
  <a-drawer
    v-model:visible="vdata.visible"
    title="进件后续流程"
    width="50%"
    @close="onClose"
  >
    <a-steps :current="vdata.currentStep - 1" type="navigation">
      <a-step title="电子协议签署" />
      <a-step title="上传图片&提交审核" />
    </a-steps>
    <a-divider />

    <a-span v-if="vdata.currentStep == 1">
      <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>
    </a-span>

    <a-form v-if="vdata.currentStep == 2" :model="vdata.applyData" style="padding-bottom: 30px;" :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
      <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 class="drawer-btn-center">
      <a-button :style="{ marginRight: '8px' }" @click="onClose"><close-outlined />关闭</a-button>
      <a-button v-if="vdata.currentStep == 1" type="primary" :loading="vdata.btnLoading" @click="onSubmit"><check-outlined />确认签署</a-button>
      <a-button v-if="vdata.currentStep == 2" type="primary" :loading="vdata.btnLoading" @click="onSubmit"><check-outlined />上传&提审</a-button>
    </div>
  </a-drawer>
</template>

<script lang="ts" setup>
import { API_URL_MCH_APPLYMENT_LIST, req, $elecContractGenerate, $elecContractSign, $fuiouUpload } from '@/api/manage'
import moment from 'moment'
import QrcodeVue from 'qrcode.vue'
import { getCurrentInstance, reactive } from 'vue'
const { $infoBox } = getCurrentInstance()!.appContext.config.globalProperties

const props = defineProps({
  callbackFunc: { type: Function, default:null }
})

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

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

  vdata.recordId = recordId

  req.getById(API_URL_MCH_APPLYMENT_LIST, recordId).then( (res) => {

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

    // 待签约，发起电子协议签署
    if(res.state == 5) {
      vdata.currentStep = 1
      elecContractGenerate()
    
    // 签约完成，上传图片
    }else if(res.state == 6) {
      vdata.currentStep = 2
    }

    vdata.visible = true
  })
}

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

      var dateArr = vdata.signData.expireTs.split(' ')
      vdata.signData.expireTs = moment(dateArr[0]).format('yyyy-MM-DD') + ' ' + dateArr[1]
    }
  })
}

function onSubmit() {
  vdata.btnLoading = true

  if (vdata.currentStep == 1) {
    $elecContractSign(vdata.recordId).then(() => { 
      $infoBox.message.success('签署成功')
      vdata.currentStep = 2
      props.callbackFunc() // 刷新列表
      vdata.btnLoading = false
    }).catch(() => {
      vdata.btnLoading = false
    })

  } else if (vdata.currentStep == 2) {
    $fuiouUpload(vdata.recordId).then(() => { 
      $infoBox.message.success('操作成功')
      vdata.currentStep = 3
      props.callbackFunc() // 刷新列表
      vdata.btnLoading = false
    }).catch(() => {
      vdata.btnLoading = false
    })

  }
  
}


function onClose () {
  vdata.visible = false
}


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

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

</style>