<!--
  盛付通： 【签约开通】 页面内容

  @author terrfly
  @site https://www.jeequan.com
  @date 2022/11/03 08:35
-->
<template>
  <a-tabs v-model:activeKey="vdata.activeKey" @change="changeTabs">
    <a-tab-pane key="sign" tab="合同签约" forceRender>
      <div v-if="vdata.state == 5" class="jeepay-m-center" style="margin-top: 5px; margin-left: 20px;">
        <a-result :title="vdata.idCardPhoneTxt">
          <div style="text-align: center;font-size: 20px">请登陆 <span style="font-size: 25px;font-weight: 600">{{vdata.applyData.contactEmail}}</span> 邮箱，根据一下签约文档流程签约；
            <a href="https://shouyinbei.yuque.com/rv7pt7/ly9al3/vntkby8fknpwusf0?singleDoc" target="downloadFile" download>《快钱入驻签约流程》</a>
          </div>

          <template #icon>
            <smile-twoTone />
          </template>
        </a-result>
      </div>
      <div v-if="vdata.state == 2" class="jeepay-m-center" style="margin-top: 5px; margin-left: 20px;">
        <div class="drawer-btn-center">
          <a-button type="primary" :loading="vdata.btnLoading" @click="onSubmit"><check-outlined />提审</a-button>
        </div>
      </div>
      <div v-if="vdata.state == 1">
        <a-result title="暂无更多操作">
          <template #icon>
            <smile-twoTone />
          </template>
        </a-result>
      </div>
    </a-tab-pane>

    <a-tab-pane key="auth" tab="实名认证" forceRender v-if="vdata.state != 5">
      <NextBizsCommonPage ref="nextBizsCommonPage" :showBizSignInfo="false" />
    </a-tab-pane>
  </a-tabs>
</template>

<script lang="ts" setup>

import { ref, nextTick } from 'vue'
import NextBizsCommonPage from '../../commons/NextBizsCommonPage.vue'
import ruleGenerator from '@/utils/ruleGenerator'
import { API_URL_MCH_APPLYMENT_LIST, req, $ysPayRateConfig, $ysSignApply, $ysSignQuery, $kqSignApply } from '@/api/manage'
import { getCurrentInstance, reactive, inject } from 'vue'
import QrcodeVue from 'qrcode.vue'

const { $infoBox } = getCurrentInstance()!.appContext.config.globalProperties

const jeepayPaywayRatePanelRef = ref()
const nextBizsCommonPage = ref()
let configMode : any = inject('configMode')

const vdata : any = reactive({
  btnLoading: false,
  activeKey: 'sign',
  state: 5,
  idCardPhoneTxt:"",
  recordId: null, // 更新对象ID
  applyData: {} as any, // 进件资料对象
  visible: false, // 是否显示弹层/抽屉
  signResult: null, // 合同签约对象
  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 onSubmit() {
  vdata.btnLoading = true

  $kqSignApply(vdata.recordId, vdata.applyData).then((res) => {
    $infoBox.message.success('操作成功')
    vdata.btnLoading = false
    vdata.visible = false
  }).catch(() => {
    vdata.btnLoading = false
  })

}

function payConfAddFunc(){

// 放置费率配置项
  let paywayFeeList = jeepayPaywayRatePanelRef.value.getReqMchRatePaywayFeeList()
  if (!paywayFeeList) {
    return
  }

  $ysPayRateConfig(vdata.recordId, { paywayFeeList: paywayFeeList }).then((res) => {
    vdata.result = res
    $infoBox.message.success('已发起配置')
  })
}

function changeTabs (key) { // 清空必填提示
  if (key) {
    vdata.groupKey = key
  }
  if(key == 'auth') {
    nextTick(() => {
      nextBizsCommonPage.value.pageRender(vdata.recordId) // 直接调用通用组件
    })
  }
}

// 对外暴露的 页面渲染函数  也用作初始化
function pageRender (applyId){
  vdata.signResult = null

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

    vdata.applyData = JSON.parse(res.applyDetailInfo)
    console.log(vdata.applyData,'resstateresstateresstateresstate')

    // 状态
    vdata.state =  res.state
    // 单号
    vdata.recordId = applyId
    // 类型 
    vdata.ifCode = res.ifCode
    // 用户号
    vdata.mchNo = res.mchNo
    // 渠道信息1
    vdata.result = res.channelVar1

    // 签约信息
    if (res.channelVar2) {
      vdata.signResult = JSON.parse(res.channelVar2)

      signQueryFunc()
    }

    vdata.visible = true
  })
}


// 签约申请
function signApplyFunc(){
  vdata.btnLoading = true

  // 放置费率配置项
  let paywayFeeList = jeepayPaywayRatePanelRef.value.getReqMchRatePaywayFeeList()
  if (!paywayFeeList) {
    return
  }

  $ysSignApply(vdata.recordId, { paywayFeeList: paywayFeeList }).then(res => {
    if (res) {
      vdata.signResult = JSON.parse(res)
    }
  }).finally(() => {
    vdata.btnLoading = false
  })
}

// 签约结果查询
function signQueryFunc(){
  vdata.btnLoading = true
  $ysSignQuery(vdata.recordId).then(res => {
    vdata.signResult = JSON.parse(res)
    console.log(vdata.signResult)
  }).finally(() => {
    vdata.btnLoading = false
  })
}

defineExpose({ pageRender })
</script>
