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

  @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 == '6'" class="jeepay-m-center" style="margin-top: 5px; margin-left: 20px;">
        <a-form
            :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>

          <div v-if="vdata.applyData.settAccountType != 'C' && vdata.applyData.merchantType != 1">
            <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-else>
            <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>

          <div v-if="vdata.applyData.isUncrpSett == 'Y'">
            <a-form-item label="结算人身份证人像面照片" name="settAccountIdcard1Img">
              <JeepayUpload v-model:src="vdata.applyData.settAccountIdcard1Img" bizType="applyment" />
            </a-form-item>

            <a-form-item label="结算人身份证国徽面照片" name="settAccountIdcard2Img">
              <JeepayUpload v-model:src="vdata.applyData.settAccountIdcard2Img" bizType="applyment" />
            </a-form-item>

            <a-form-item label="结算授权书" name="settleAuthLetterPhoto">
              <JeepayUpload v-model:src="vdata.applyData.settleAuthLetterPhoto" bizType="applyment" />
              <span class="jeepay-tip-text">(上传图片自动识别 有效期)</span>
            </a-form-item>

            <a-form-item label="法人手持结算授权书" name="settleAuthLetterHandlePhoto">
              <JeepayUpload v-model:src="vdata.applyData.settleAuthLetterHandlePhoto" bizType="applyment" />
            </a-form-item>
          </div>

          <div v-if="vdata.applyData.isOtherAccountInfo == '1'">
            <a-form-item label="备用结算账户正面照" name="standByStlAccCardImg">
              <JeepayUpload v-model:src="vdata.applyData.standByStlAccCardImg" bizType="applyment" :imgSize="2" ocrType="bankCard" />
              <span class="jeepay-tip-text">(上传图片自动识别 银行卡号)</span>
            </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 type="primary" :loading="vdata.btnLoading" @click="onSubmit">①上传资料<upload-outlined /></a-button>
          &nbsp;&nbsp;
          <a-button type="primary" :loading="vdata.btnLoading" @click="onConfirm">②资料确认<check-outlined /></a-button>
        </div>
      </div>
      <div v-if="vdata.state == '2' || vdata.state == '5'">
        <!-- <a-tabs @change="selectTabs">
      <a-tab-pane v-if="configMode != 'mchApplyment'" key="payWayRateConfig" tab="费率配置">
        <a-form ref="infoFormModel" layout="vertical">
          <JeepayPaywayRatePanel
            ref="jeepayPaywayRatePanelRef"
            :configMode="configMode"
            :infoId="vdata.recordId + '_' + vdata.mchNo"
            :selectIfCode="vdata.ifCode"
            onlyRate="true"
          />
        </a-form>
        <div class="drawer-btn-center jeepay-m-drawer">
          <a-button class="jeepay-m-btn" data-type="block" type="primary" :loading="vdata.btnLoading" @click="payConfAddFunc"><check-outlined />费率配置</a-button>
        </div>
      </a-tab-pane>
      <a-tab-pane v-else key="payWayRateConfigOther" tab="费率配置">
        <a-alert
          message="请联系运营人员进行配置后再进行签约操作"
          description=""
          type="warning"
          show-icon
        />
      </a-tab-pane>
      <a-tab-pane key="signConfig" tab="电子合同签约">
        <NextBizsCommonPage ref="nextBizsCommonPage" />
      </a-tab-pane>
    </a-tabs> -->

        <!--        <a-row>-->
        <!--          <a-col :offset="1">-->
        <!--            <a-form ref="infoFormModel" layout="vertical">-->
        <!--              <JeepayPaywayRatePanel -->
        <!--                ref="jeepayPaywayRatePanelRef" -->
        <!--                :configMode="configMode"-->
        <!--                :infoId="vdata.recordId + '_' + vdata.mchNo" -->
        <!--                :selectIfCode="vdata.ifCode"-->
        <!--                :channelNo="vdata.isvNo"-->
        <!--                :channelRange="vdata.range"-->
        <!--                onlyRate="true"-->
        <!--              />-->
        <!--            </a-form>-->
        <!--          </a-col>-->
        <!--        </a-row>-->
        <a-row v-if="vdata.signResult" style="padding-top: 20px;">
          <a-col :offset="1">
            <a-descriptions bordered :column="3" size="middle">
              <a-descriptions-item label="签约码" :span="3">
                <QrcodeVue :value="vdata.signResult.signUrl" :size="250" class="qrcode" />
                <span class="jeepay-tip-text">(请手机扫码识别上方签约二维码，完成商户电子合同签约)</span>
              </a-descriptions-item>
              <a-descriptions-item label="签约地址" :span="3">
                {{ vdata.signResult.signUrl }}
                <a-button v-clipboard:copy="vdata.signResult.signUrl" v-clipboard:success="() => $infoBox.message.success('复制成功')" type="link">复制</a-button>

              </a-descriptions-item>
              <!--              <a-descriptions-item label="签约状态" :span="3">{{ vdata.signResult.state }}</a-descriptions-item>-->
              <a-descriptions-item v-if="vdata.signResult.state=='签约失败'" label="异常信息" :span="3">{{ vdata.signResult.errInfo }}</a-descriptions-item>
            </a-descriptions>
          </a-col>
        </a-row>

        <a-row style="padding-top: 20px;padding-left: 10px;">
          <a-col v-if="!vdata.signResult || vdata.signResult.state=='签约失败'" :offset="1">
            <a-button
                class="jeepay-m-btn"
                data-type="text"
                :loading="vdata.btnLoading"
                style="margin-left: 20px;"
                type="primary"
                @click="signApplyFunc"
            >
              <upload-outlined />发起签约
            </a-button>
          </a-col>
          <a-col v-if="vdata.signResult">
            <a-button
                v-if="vdata.signResult.state=='待审核' || vdata.signResult.state=='签约中'"
                class="jeepay-m-btn"
                data-type="text"
                :loading="vdata.btnLoading"
                style="margin-left: 20px;"
                type="primary"
                @click="signQueryFunc"
            >
              <reload-outlined />签约结果查询
            </a-button>
          </a-col>
          <a-col v-if="vdata.signResult">
            <a-button
                v-if="vdata.signResult.state=='待审核' || vdata.signResult.state=='签约中'"
                class="jeepay-m-btn"
                data-type="text"
                :loading="vdata.btnLoading"
                style="margin-left: 20px;"
                type="primary"
                @click="signSendAgainFunc"
            >
              <message-outlined />重发签约通知
            </a-button>
          </a-col>
        </a-row>
        <a-row />
      </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,
  $yspayUpload,
  $ysSignApply,
  $ysSignQuery,
  $yspayConfirm,
  $ysSignSendAgain,
  $getMchApplymentChannelState
} 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({
  isvNo:"",
  range:0,
  btnLoading: false,
  activeKey: 'sign',
  applyDataInfo:{} as any,
  state: '',
  recordId: null, // 更新对象ID
  applyData: {} as any, // 进件资料对象
  visible: false, // 是否显示弹层/抽屉
  signResult: null, // 合同签约对象
  isSign: false, // 是否已签署电子协议
  rules: {
    licenseImg: [ ruleGenerator.requiredUpload('营业执照照片') ],
    idcard1Img: [ ruleGenerator.requiredUpload('法人身份证人像面照片') ],
    idcard2Img: [ 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

  $yspayUpload(vdata.recordId, vdata.applyData).then((res) => {
    if(res) {
      vdata.imgUploadArr = JSON.parse(res)
    }

    $infoBox.message.success('操作成功')
    vdata.btnLoading = false
    vdata.visible = false
  }).catch(() => {
    vdata.btnLoading = false
  })

}
function onConfirm() {
  vdata.btnLoading = true

  $yspayConfirm(vdata.recordId, vdata.applyData).then((res) => {
    if (res) {
      $infoBox.message.err(res)
    }else {
      $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) => {
    console.log(res,'resresres')
    // 图片上传结果置空
    vdata.imgUploadArr = []
    vdata.applyDataInfo  = res
    vdata.applyData = JSON.parse(res.applyDetailInfo)
    // 状态
    vdata.state = res.state
    // 单号
    vdata.recordId = applyId
    // 渠道号
    vdata.isvNo = res.isvNo
    //场景
    vdata.range = res.range
    // 类型
    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)
  // }).finally(() => {
  //   vdata.btnLoading = false
  // })


  $getMchApplymentChannelState(vdata.recordId).then((res) => {
    if (vdata.applyDataInfo.state != res.state) {
      $infoBox.message.success("状态已更新");
    } else {
      $infoBox.message.info("状态无变化");
    }
  }).finally(() => {
    vdata.btnLoading = false
  })

}

// 签约重发
function signSendAgainFunc(){
  vdata.btnLoading = true
  $ysSignSendAgain(vdata.recordId).then(res => {
    vdata.signResult = JSON.parse(res)
  }).finally(() => {
    vdata.btnLoading = false
  })
}

defineExpose({ pageRender })
</script>
