<template>
  <a-drawer
    v-model:visible="vdata.visible"
    title="上传图片&提交审核"
    width="50%"
    @close="onClose"
  >
    <a-form 
      v-if="vdata.currentStep == 1" 
      :model="vdata.applyData" 
      style="padding-bottom: 30px;" 
      :label-col="{ span: 6 }" 
      :wrapper-col="{ span: 12 }"
      :rules="vdata.rules"
    >
      <div v-if="vdata.applyData.merchantType != '1'">
        <a-col :offset="1"><a-divider orientation="left" style="color: #1A66FF;">执照信息</a-divider></a-col>
        <a-form-item label="营业执照照片" name="licenseImg">
          <JeepayUpload v-model:src="vdata.applyData.licenseImg" bizType="applyment" />
          
          <div v-for="(item, config) in vdata.imgUploadArr" :key="config" :span="8" :offset="1">
            <span v-if="item.picType=='A001'" class="jeepay-tip-text">{{ item.note }}</span>
          </div>
        </a-form-item>
      </div>

      <a-col :offset="1"><a-divider orientation="left" style="color: #1A66FF;">法人信息</a-divider></a-col>
      <a-form-item label="法人身份证人像面照片" name="idcard1Img">
        <JeepayUpload v-model:src="vdata.applyData.idcard1Img" bizType="applyment" />
        <div v-for="(item, config) in vdata.imgUploadArr" :key="config" :span="8" :offset="1">
          <span v-if="item.picType=='A002'" class="jeepay-tip-text">{{ item.note }}</span>
        </div>
      </a-form-item>

      <a-form-item label="法人身份证国徽面照片" name="idcard2Img">
        <JeepayUpload v-model:src="vdata.applyData.idcard2Img" bizType="applyment" />
        <div v-for="(item, config) in vdata.imgUploadArr" :key="config" :span="8" :offset="1">
          <span v-if="item.picType=='A003'" class="jeepay-tip-text">{{ item.note }}</span>
        </div>
      </a-form-item>

      <a-form-item label="手持证件照片" name="idcardInHandImg">
        <JeepayUpload v-model:src="vdata.applyData.idcardInHandImg" bizType="applyment" />
        <div v-for="(item, config) in vdata.imgUploadArr" :key="config" :span="8" :offset="1">
          <span v-if="item.picType=='A009'" class="jeepay-tip-text">{{ item.note }}</span>
        </div>
      </a-form-item>

      <a-col :offset="1"><a-divider orientation="left" style="color: #1A66FF;">商户信息</a-divider></a-col>
      <a-form-item label="门头照" name="storeOuterImg">
        <JeepayUpload v-model:src="vdata.applyData.storeOuterImg" bizType="applyment" />
        <div v-for="(item, config) in vdata.imgUploadArr" :key="config" :span="8" :offset="1">
          <span v-if="item.picType=='A006'" class="jeepay-tip-text">{{ item.note }}</span>
        </div>
      </a-form-item>

      <a-form-item label="店内环境照" name="storeInnerImg">
        <JeepayUpload v-model:src="vdata.applyData.storeInnerImg" bizType="applyment" />
        <div v-for="(item, config) in vdata.imgUploadArr" :key="config" :span="8" :offset="1">
          <span v-if="item.picType=='A007'" class="jeepay-tip-text">{{ item.note }}</span>
        </div>
      </a-form-item>

      <a-form-item label="收银台照" name="storeCashierImg">
        <JeepayUpload v-model:src="vdata.applyData.storeCashierImg" bizType="applyment" />
        <div v-for="(item, config) in vdata.imgUploadArr" :key="config" :span="8" :offset="1">
          <span v-if="item.picType=='A008'" class="jeepay-tip-text">{{ item.note }}</span>
        </div>
      </a-form-item>

      <a-col :offset="1"><a-divider orientation="left" style="color: #1A66FF;">结算信息</a-divider></a-col>
      
      <a-form-item label="结算银行卡正面照片" name="settAccountLicenseImg">
        <JeepayUpload v-model:src="vdata.applyData.settAccountLicenseImg" bizType="applyment" />
        <div v-for="(item, config) in vdata.imgUploadArr" :key="config" :span="8" :offset="1">
          <span v-if="item.picType=='A004'" class="jeepay-tip-text">{{ item.note }}</span>
        </div>
      </a-form-item>

      <a-form-item label="结算银行卡反面照片" name="settAccountBankImg2">
        <JeepayUpload v-model:src="vdata.applyData.settAccountBankImg2" bizType="applyment" />
        <div v-for="(item, config) in vdata.imgUploadArr" :key="config" :span="8" :offset="1">
          <span v-if="item.picType=='A005'" class="jeepay-tip-text">{{ item.note }}</span>
        </div>
      </a-form-item>

      <div v-if="vdata.applyData.merchantType == '3'">
        <a-form-item label="开户许可证照片" name="companyAccountLicenseImg">
          <JeepayUpload v-model:src="vdata.applyData.companyAccountLicenseImg" bizType="applyment" />
          <div v-for="(item, config) in vdata.imgUploadArr" :key="config" :span="8" :offset="1">
            <span v-if="item.picType=='A011'" class="jeepay-tip-text">{{ item.note }}</span>
          </div>
        </a-form-item>
      </div>

      <div v-if="vdata.applyData.codeLegalPersonAcc =='0'">
        <a-form-item label="入账账户身份证人像面照片" name="settAccountIdcard1Img">
          <JeepayUpload v-model:src="vdata.applyData.settAccountIdcard1Img" bizType="applyment" />
          <div v-for="(item, config) in vdata.imgUploadArr" :key="config" :span="8" :offset="1">
            <span v-if="item.picType=='A013'" class="jeepay-tip-text">{{ item.note }}</span>
          </div>
        </a-form-item>

        <a-form-item label="入账账户身份证国徽面照片" name="settAccountIdcard2Img">
          <JeepayUpload v-model:src="vdata.applyData.settAccountIdcard2Img" bizType="applyment" />
          <div v-for="(item, config) in vdata.imgUploadArr" :key="config" :span="8" :offset="1">
            <span v-if="item.picType=='A014'" class="jeepay-tip-text">{{ item.note }}</span>
          </div>
        </a-form-item>

        <a-form-item label="结算授权证书照片" name="settleAuthLetterPhoto">
          <JeepayUpload v-model:src="vdata.applyData.settleAuthLetterPhoto" bizType="applyment" />
          <div v-for="(item, config) in vdata.imgUploadArr" :key="config" :span="8" :offset="1">
            <span v-if="item.picType=='B005'" class="jeepay-tip-text">{{ item.note }}</span>
          </div>
        </a-form-item>
      </div>

      <a-col :offset="1"><a-divider orientation="left" style="color: #1A66FF;">其他信息</a-divider></a-col>
      <a-form-item label="收单协议盖章页照片" name="acquiringAgreementPhoto">
        <JeepayUpload v-model:src="vdata.applyData.acquiringAgreementPhoto" bizType="applyment" />
        <div v-for="(item, config) in vdata.imgUploadArr" :key="config" :span="8" :offset="1">
          <span v-if="item.picType=='A010'" class="jeepay-tip-text">{{ item.note }}</span>
        </div>
      </a-form-item>
      <a-form-item label="其他材料照片" name="other1">
        <JeepayUpload v-model:src="vdata.applyData.other1" bizType="applyment" />
        <div v-for="(item, config) in vdata.imgUploadArr" :key="config" :span="8" :offset="1">
          <span v-if="item.picType=='B008'" class="jeepay-tip-text">{{ item.note }}</span>
        </div>
      </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>
    </div>
  </a-drawer>
</template>

<script lang="ts" setup>
import { API_URL_MCH_APPLYMENT_LIST, req, $elecContractGenerate, $elecContractSign, $yspayUpload } from '@/api/manage'
import moment from 'moment'
import { getCurrentInstance, reactive } from 'vue'
import ruleGenerator from '@/utils/ruleGenerator'
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, // 是否已签署电子协议
  rules: {
      licenseImg: [ ruleGenerator.requiredUpload('营业执照照片') ],
      idcard1Img: [ ruleGenerator.requiredUpload('法人身份证人像面照片') ],
      idcard2Img: [ ruleGenerator.requiredUpload('法人身份证国徽面照片') ],
      idcardInHandImg: [ ruleGenerator.requiredUpload('手持身份证照片') ],
      storeOuterImg: [ ruleGenerator.requiredUpload('门头照') ],
      storeInnerImg: [ ruleGenerator.requiredUpload('内景照') ],
      storeCashierImg: [ ruleGenerator.requiredUpload('收银台照') ],
      settAccountLicenseImg: [ ruleGenerator.requiredUpload('结算银行卡正面照片') ],
      settAccountBankImg2: [ ruleGenerator.requiredUpload('结算银行卡反面照片') ],
      companyAccountLicenseImg: [ ruleGenerator.requiredUpload('开户许可证照片') ],
      settAccountIdcard1Img: [ ruleGenerator.requiredUpload('入账账户身份证人像面照片') ],
      settAccountIdcard2Img: [ ruleGenerator.requiredUpload('入账账户身份证国徽面照片') ],
      settleAuthLetterPhoto: [ ruleGenerator.requiredUpload('结算授权证书照片') ],
  },
  imgUploadArr: [], // 图片上传结果
})

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

  vdata.recordId = recordId

  req.getById(API_URL_MCH_APPLYMENT_LIST, recordId, { originData: '1' }).then( (res) => {
    // 图片上传结果置空
    vdata.imgUploadArr = []

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

    // 签约完成，上传图片
    vdata.currentStep = 1

    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) {
    $yspayUpload(vdata.recordId, vdata.applyData).then((res) => {
      if(res) {
        vdata.imgUploadArr = JSON.parse(res)
      }

      $infoBox.message.success('操作成功')
      vdata.currentStep = 1
      props.callbackFunc() // 刷新列表
      vdata.btnLoading = false
      vdata.visible = false
    }).catch(() => {
      vdata.btnLoading = false
    })

  }
  
}


function onClose () {
  vdata.visible = false
}


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

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

</style>