<template>
  <a-drawer
    v-model:visible="vdata.visible"
    title="自主签约"
    width="50%"
    @close="onClose"
  >
    <a-form>
      <template
        v-if="
          vdata.bizSignInfo &&
          (vdata.bizSignInfo.state || vdata.bizSignInfo.signUrl)
        "
      >
        <a-divider orientation="left" style="color: #1a66ff"
          >电子合同签约</a-divider
        >

        <a-form-item label="签约状态">
          {{
            vdata.bizSignInfo.state || "异常[" + vdata.bizSignInfo.errInfo + "]"
          }}
          <a-button
            :loading="vdata.bizSignInfoBtnLoading"
            size="small"
            style="margin-left: 20px"
            type="primary"
            @click="getMchApplymentChannelSignInfoFunc"
            ><reload-outlined />刷新</a-button
          >
        </a-form-item>

        <a-form-item v-if="vdata.bizSignInfo.signUrl" label="合同地址">
          <p style="margin-top: 5px">
            <a :href="vdata.bizSignInfo.signUrl" target="_blank">{{
              vdata.bizSignInfo.signUrl
            }}</a>
          </p>

          <p style="margin-top: 20px">合同地址快捷访问二维码：</p>
          <QrcodeVue
            :value="vdata.bizSignInfo.signUrl"
            :size="150"
            class="qrcode"
          />
        </a-form-item>
      </template>

      <template
        v-if="
          vdata.wxOpenInfo &&
          (vdata.wxOpenInfo.state || vdata.wxOpenInfo.signUrl)
        "
      >
        <a-divider orientation="left" style="color: #1a66ff"
          >微信开户意愿确认</a-divider
        >

        <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.signUrl" label="">
          <p>商户联系人使用已绑定银行卡的微信扫下面的二维码:</p>
          <QrcodeVue
            v-if="vdata.wxOpenInfo.imgType == 'qrContent'"
            :value="vdata.wxOpenInfo.signUrl"
            :size="150"
            class="qrcode"
          />
          <img
            v-else
            :src="'data:image/jpg;base64,' + vdata.wxOpenInfo.signUrl"
            class="qrcode"
            style="width: 200px"
          />
          <br />
          <p class="jeepay-tip-text">
            (温馨提示:自助认证不限制谁来操作认证,但建议是商户联系人进行认证,以免后期需要扫码找不到微信认证管理员)
          </p>
        </a-form-item>
      </template>

      <template
        v-if="vdata.alipayOpenInfo.state || vdata.alipayOpenInfo.signUrl"
      >
        <a-divider orientation="left" style="color: #1a66ff"
          >支付宝实名审核</a-divider
        >

        <a-form-item label="商户确认状态">
          {{ vdata.alipayOpenInfo.state }}
          <a-button
            :loading="vdata.alipayOpenInfoBtnLoading"
            size="small"
            style="margin-left: 20px"
            type="primary"
            @click="getMchApplymentAlipayOpenInfoFunc"
            ><reload-outlined />刷新</a-button
          >
        </a-form-item>
        <br />
        <span v-if="vdata.alipayOpenInfo.errInfo">{{
          "异常[" + vdata.alipayOpenInfo.errInfo + "]"
        }}</span>

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

<script lang="ts" setup>
import {
  $getMchApplymentChannelSignInfo,
  $getMchApplymentWxOpenInfo,
  $getMchApplymentAlipayOpenInfo,
} from "@/api/manage";
import { reactive, getCurrentInstance } from "vue";
import QrcodeVue from "qrcode.vue";
const { $infoBox } = getCurrentInstance()!.appContext.config.globalProperties;

const vdata: any = reactive({
  recordId: null, // 更新对象ID
  visible: false, // 是否显示弹层/抽屉

  bizSignInfo: {}, // 电子合同信息

  wxOpenInfo: {}, // 微信开户意愿信息
  alipayOpenInfo: {}, // 支付宝开户意愿信息

  bizSignInfoBtnLoading: false,
  wxOpenInfoBtnLoading: false,
  alipayOpenInfoBtnLoading: false,
});

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

  // 数据的清空
  vdata.bizSignInfo = {};
  vdata.wxOpenInfo = {};
  vdata.alipayOpenInfo = {};

  vdata.recordId = recordId;
  getMchApplymentChannelSignInfoFunc();
  getMchApplymentWxOpenInfoFunc();
  getMchApplymentAlipayOpenInfoFunc();
  vdata.visible = true;
}

// 电子合同状态查询
function getMchApplymentChannelSignInfoFunc() {
  vdata.bizSignInfoBtnLoading = true;
  $getMchApplymentChannelSignInfo(vdata.recordId)
    .then((res) => {
      vdata.bizSignInfo = res;
    })
    .finally(() => {
      vdata.bizSignInfoBtnLoading = false;
    });
}

// 电子合同状态查询
function getMchApplymentWxOpenInfoFunc() {
  vdata.wxOpenInfoBtnLoading = true;
  $getMchApplymentWxOpenInfo(vdata.recordId)
    .then((res) => {
      vdata.wxOpenInfo = res;
    })
    .finally(() => {
      vdata.wxOpenInfoBtnLoading = false;
    });
}

// 电子合同状态查询
function getMchApplymentAlipayOpenInfoFunc() {
  vdata.alipayOpenInfoBtnLoading = true;
  $getMchApplymentAlipayOpenInfo(vdata.recordId)
    .then((res) => {
      vdata.alipayOpenInfo = res || {};
    })
    .finally(() => {
      vdata.alipayOpenInfoBtnLoading = false;
    });
}

function onClose() {
  vdata.visible = false;
}

defineExpose({ show });
</script>
<style scoped>
.form-item-content {
  width: 70%;
}
</style>