<template>
  <a-drawer
    v-model:visible="vdata.visible"
    title="自主签约"
    width="55%"
    @close="onClose"
  >
    <a-tabs v-model:activeKey="vdata.currentStep">
      <a-tab-pane key="1" tab="微信实名认证" force-render>
        <a-form
          ref="stepForm1Ref"
          :model="vdata.applyData"
          :label-col="{ span: 4 }"
          :wrapper-col="{ span: 8 }"
          :rules="vdata.step1Rules"
        >
          <a-form-item label="商户实名认证">
            {{ vdata.wxOpenInfo.state || '异常[' + vdata.wxOpenInfo.errInfo + ']' }}
            <a-button :loading="vdata.wxOpenInfoBtnLoading" size="small" style="margin-left: 20px;" type="primary" @click="getMchApplymentWxOpenInfoFunc"><reload-outlined />刷新</a-button>
          </a-form-item>

          <a-form-item v-if="vdata.wxOpenInfo.errInfo" label="驳回原因">
            <a-alert :message="vdata.wxOpenInfo.errInfo" type="error" />
          </a-form-item>
          <a-form-item v-if="vdata.wxOpenInfo.signUrl" style="margin-left: 10%;" label="">
            <p>商户联系人使用已绑定银行卡的微信扫下面的二维码:</p>
            <!-- <img :src="'data:image/jpg;base64,' + vdata.wxOpenInfo.signUrl" class="qrcode" style="width: 200px"> -->
            <QrcodeVue :value="vdata.wxOpenInfo.signUrl" :size="200" />
            <br>
            <p class="jeepay-tip-text">(温馨提示:自助认证不限制谁来操作认证,但建议是商户联系人进行认证,以免后期需要扫码找不到微信认证管理员)</p>
          </a-form-item>
        </a-form>
      </a-tab-pane>
      <a-tab-pane v-if="vdata.alipayOpenInfo.signUrl" key="2" tab="支付宝实名认证" force-render>
        <a-form
          ref="stepForm3Ref"
          :model="vdata.applyData"
          :label-col="{ span: 4 }"
          :wrapper-col="{ span: 8 }"
        >
          <a-form-item label="商户实名状态">
            {{ vdata.alipayOpenInfo.state || '异常[' + vdata.alipayOpenInfo.errInfo + ']' }}
            <!-- <a-button :loading="vdata.alipayOpenInfoBtnLoading" size="small" style="margin-left: 20px;" type="primary" @click="getMchApplymentAlipayOpenInfoFunc"><reload-outlined />刷新</a-button> -->
          </a-form-item>

          <a-form-item v-if="vdata.alipayOpenInfo.signUrl" style="margin-left: 10%;" label="">
            <p>商户联系人使用已绑定银行卡的支付宝扫下面的二维码:</p>
            <QrcodeVue v-if="vdata.alipayOpenInfo.imgType == 'qrContent'" :value="vdata.alipayOpenInfo.signUrl" :size="200" class="qrcode" />
            <br>
            <!-- <p class="jeepay-tip-text">(温馨提示:自助认证不限制谁来操作认证,但建议是商户联系人进行认证,以免后期需要扫码找不到微信认证管理员)</p> -->
          </a-form-item>
        </a-form>
      </a-tab-pane>
    </a-tabs>
  </a-drawer>
</template>

<script lang="ts" setup>
import { API_URL_MCH_APPLYMENT_LIST, req, $dgpayWxRealName, $getMchApplymentWxOpenInfo, $getMchApplymentAlipayOpenInfo } from '@/api/manage'
import { getCurrentInstance, reactive, ref } from 'vue'
import ruleGenerator from '@/utils/ruleGenerator'
import QrcodeVue from 'qrcode.vue'
const { $infoBox } = getCurrentInstance()!.appContext.config.globalProperties
// 获取当前实例的代理对象
const { proxy } : any = getCurrentInstance()

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

const vdata : any = reactive({
  currentStep: ref('1'),
  recordId: null, // 更新对象ID
  applyData: {} as any, // 进件资料对象
  visible: false, // 是否显示弹层/抽屉
  wxConfList: [] as any,
  aliConfList: [] as any,
  wxOpenInfo: {}, // 微信开户意愿信息
  alipayOpenInfo: {}, // 支付宝认证信息
  step1Rules: {
      idcard1Img: [ ruleGenerator.requiredUpload('法人身份证人像面照片') ],
      idcard2Img: [ ruleGenerator.requiredUpload('法人身份证国徽面照片') ],
      idcardName: [ ruleGenerator.requiredInput('法人姓名') ],
      idcardNo: [ ruleGenerator.requiredInput('法人身份证号') ],
      contactPhone: [ ruleGenerator.requiredInput('联系人手机号') ],
      areaCode: [ ruleGenerator.requiredSelect('位置编码', 'array') ],
      address: [ ruleGenerator.requiredInput('经营地址') ],
      mchShortName: [ ruleGenerator.requiredInput('门店名称') ],
      storeOuterImg: [ ruleGenerator.requiredUpload('门头照') ],
      storeInnerImg: [ ruleGenerator.requiredUpload('店内环境照片') ],
  }
})

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

  vdata.currentStep = ref('1')

  vdata.recordId = recordId

  req.getById(API_URL_MCH_APPLYMENT_LIST, recordId, { originData: '1' }).then( (res) => {

    vdata.applyData = JSON.parse(res.applyDetailInfo)
    if(vdata.applyData.wxConfList) {
        vdata.wxConfList = vdata.applyData.wxConfList
    }
    if(vdata.applyData.aliConfList) {
        vdata.aliConfList = vdata.applyData.aliConfList
    }

    vdata.visible = true

    getMchApplymentWxOpenInfoFunc()

    getMchApplymentAlipayOpenInfoFunc()
  })
}

// 微信实名认证查询
function getMchApplymentWxOpenInfoFunc(){
  vdata.wxOpenInfoBtnLoading = true
  $getMchApplymentWxOpenInfo(vdata.recordId).then(res => {
     vdata.wxOpenInfo = res
  }).finally(() => {
    vdata.wxOpenInfoBtnLoading = false
  })
}

// 微信实名认证
function onSubmitWxRealName() {
  proxy.$refs['stepForm1Ref'].validate().then(() => {
    vdata.btnLoading = true
    $dgpayWxRealName(vdata.recordId, vdata.applyData).then(() => { 
      $infoBox.message.success('审核中')
      props.callbackFunc() // 刷新列表
      vdata.btnLoading = false
    }).catch(() => {
      vdata.btnLoading = false
    })
  })
}

// 支付宝认证状态查询
function getMchApplymentAlipayOpenInfoFunc(){
  vdata.alipayOpenInfoBtnLoading = true
  $getMchApplymentAlipayOpenInfo(vdata.recordId).then(res => {
     vdata.alipayOpenInfo = res || {}
  }).finally(() => {
    vdata.alipayOpenInfoBtnLoading = false
  })
  console.log(vdata.alipayOpenInfo)
}

function onClose () {
  vdata.visible = false
}

// 图片识别的回调函数
function ocrScanFunc(orcObject: any){
  if(orcObject){
    Object.assign(vdata.applyData, orcObject)
  }
}


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

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

</style>