<!--
  oauth2配置弹层、 服务商 or 普通商户。 

  @author terrfly
  @site https://www.jeequan.com
  @date 2022/11/09 15:06
-->
<template>
  <a-drawer
      v-model:visible="vdata.visible"
      title="实名认证"
      :closable="true"
      :body-style="{ paddingBottom: '80px' }"
      width="60%"
      @close="vdata.visible = false"
  >
    <div>
      <template v-if="vdata.wxOpenInfo">
        <a-divider
            class="jeepay-m-divider"
            orientation="left"
            style="color: #1a66ff"
        >微信开户意愿确认</a-divider
        >

        <a-form-item label="商户确认状态" class="form-item-tip-errInfo">
          {{  vdata.wxOpenInfo.state }}
          <a-tooltip  v-if="vdata.wxOpenInfo.errInfo  && vdata.wxOpenInfo.errInfo != '[进件成功。]'" :title="vdata.wxOpenInfo.errInfo">
            <info-circle-outlined style="font-size: 16px; padding-left: 5px;color: #FF0000"/>
          </a-tooltip>
          <a-button
              class="jeepay-m-btn"
              data-type="text"
              :loading="vdata.wxOpenInfoBtnLoading"
              size="small"
              style="margin-left: 20px"
              type="primary"
              @click="getMchApplymentWxOpenInfoFunc"
          >
            <reload-outlined />刷新
          </a-button>
          <a
              href="https://www.yuque.com/shouyinbei/open/ff4ngyegik4t3whu"
              class="bsu_a"
              target="_blank"
              title="微信认证教程"
          >微信认证教程</a
          >
        </a-form-item>

        <div class="jeepay-tip-text tip-errInfo"  v-if="vdata.wxOpenInfo.errInfo  && vdata.wxOpenInfo.errInfo != '[进件成功。]'">
          {{ vdata.wxOpenInfo.errInfo }}
        </div>
        <a-form-item label="微信子商户号">
          {{ vdata.wxOpenInfo.channelSubMchId }}
          <a-button
              class="jeepay-m-btn"
              data-type="text"
              :loading="vdata.wxOpenInfoBtnLoading"
              size="small"
              style="margin-left: 20px"
              type="primary"
              @click="getMchApplymentWxOpenInfoFunc"
          >
            <reload-outlined />刷新
          </a-button>
          <!-- <a href="javascript:void(0)" class="bsu_a">历史商户号</a> -->
        </a-form-item>

        <a-form-item v-if="vdata.wxOpenInfo.signUrl" label="">
          <p>
            商户联系人使用已绑定银行卡的个人微信扫下面的服务商拓展二维码认证:
          </p>
          <!-- <p class="qudao">
            渠道名称/渠道号: 武汉融商创银科技有限公司 / 999999
          </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
            class="jeepay-m-divider"
            orientation="left"
            style="color: #1a66ff"
        >支付宝开户意愿确认</a-divider
        >

        <a-form-item label="商户确认状态">
          {{
            vdata.alipayOpenInfo.state
          }}
          <a-tooltip  v-if="vdata.alipayOpenInfo.errInfo && vdata.alipayOpenInfo.errInfo != '[进件成功。]'" :title="vdata.alipayOpenInfo.errInfo">
            <info-circle-outlined style="font-size: 16px; padding-left: 5px;color: #FF0000"/>
          </a-tooltip>
          <a-button
              class="jeepay-m-btn"
              data-type="text"
              :loading="vdata.alipayOpenInfoBtnLoading"
              size="small"
              style="margin-left: 20px"
              type="primary"
              @click="getMchApplymentAlipayOpenInfoFunc"
          >
            <reload-outlined />刷新
          </a-button>
          <a
              href="https://www.yuque.com/shouyinbei/open/cca43actgm1awnn9"
              class="bsu_a"
              target="_blank"
              title="支付宝认证教程"
          >支付宝认证教程</a
          >
        </a-form-item>
        <a-form-item label="支付宝子商户号">
          {{ vdata.alipayOpenInfo.channelSubMchId }}
          <a-button
              class="jeepay-m-btn"
              data-type="text"
              :loading="vdata.alipayOpenInfoBtnLoading"
              size="small"
              style="margin-left: 20px"
              type="primary"
              @click="getMchApplymentAlipayOpenInfoFunc"
          >
            <reload-outlined />刷新
          </a-button>
          <!-- <a href="javascript:void(0)" class="bsu_a">历史商户号</a> -->
        </a-form-item>

        <a-form-item label="">
          <p>
            商户联系人使用已绑定银行卡的个人支付宝扫下面的服务商拓展二维码认证:
          </p>
          <!-- <p class="qudao">
            渠道名称/渠道号: 武汉融商创银科技有限公司 / 999999
          </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>
    </div>
  </a-drawer>
</template>

<script lang="ts" setup >
import { ref, reactive, defineExpose, nextTick, getCurrentInstance } from "vue";
import {
  $getOauth2SavedConfigs,
  $saveOauth2ConfigParams,
  $getOauth2DiyList,
  $addOauth2DiyList,
  $getMchApplymentWxOpenInfo,
  $getMchApplymentAlipayOpenInfo,
} from "@/api/manage";
import QrcodeVue from "qrcode.vue";

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

const oauth2ConfigPageRef = ref();

// 定义父组件的传值
const props = defineProps({
  configMode: { type: String, default: "mgrIsv" }, // 支付接口
});

const vdata: any = reactive({
  alipayOpenInfoBtnLoading: false,
  wxOpenInfoBtnLoading: false,
  wxOpenInfo: {} as any, // 微信开户意愿信息
  alipayOpenInfo: {} as any, // 支付宝开户意愿信息
  wxtype: 0,
  visibleOauth: false,
  visible: false, // 一级抽屉开关
  infoId: null, // infoId (默认的infoId)

  saveObject: null, // PayInterfaceConfig 信息
  btnLoading: false,
  currentIfCode: "wxpay", // 默认 微信
  currentComponent: null,
  isIsvSubmchType: false,

  diyListSelectedInfoId: "", // 选择的配置条目 也是调起接口的infoId, 若是null, 那么请取 上面的infoId
  diyList: [], // 配置条目diyList
  diyAddMode: "init", // init - 初始态仅显示新建按钮，   adding - 创建中， 显示名称和确认按钮。
  addDiyListName: "", // 新增的名称
  addDiyListIsCopyCurrentFlag: true, // 新增条目参数是否来自当前
});

// 提交
// 弹层打开事件  mchType 默认
function show(infoId) {
  vdata.recordId = infoId;
  vdata.alipayOpenInfoBtnLoading = false;
  vdata.wxOpenInfoBtnLoading = false;
  vdata.wxOpenInfo = {} as any;
  vdata.alipayOpenInfo = {} as any;

  getMchApplymentWxOpenInfoFunc();
  getMchApplymentAlipayOpenInfoFunc();
  // vdata.infoId = infoId
  vdata.visible = true;

  // vdata.currentIfCode = 'wxpay' // 默认wxpay
  // vdata.isIsvSubmchType = isIsvSubmchType

  // // 清空数据
  // vdata.diyListSelectedInfoId = ''
  // vdata.diyList = []
  // vdata.diyAddMode = 'init'
  // vdata.addDiyListName = ''
  // vdata.addDiyListIsCopyCurrentFlag = true
}

// 刷新 diy列表
function refDiyList() {
  // 其他平台， 不需要查询（接口也会报错）
  if (props.configMode == "mgrIsv") {
    // 查询出所有的diy列表
    $getOauth2DiyList(vdata.infoId, props.configMode).then((res) => {
      vdata.diyList = res;
    });
  }
}

function selectTypes(e) {}
function handleCancel(e) {
  vdata.visibleOauth = false;
}
function wxOauth(type) {
  vdata.visibleOauth = true;
  vdata.wxtype = type;
}

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;
      });
}

defineExpose({ show });
</script>

<style lang="less" scoped>
.type_box {
  display: flex !important ;
}
.type_box_item {
  margin-right: 10px;
}
.page_box {
  border-radius: 4px;
  border: 1px solid #e6ebf5;
  background-color: #fff;
  overflow: hidden;
  color: #c3c3c3;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.top_box {
  //  display: flex;
  border-radius: 4px;
  border: 1px solid #e6ebf5;
  background-color: #fafafa;
  overflow: hidden;
  color: #303133;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  padding: 10px;
}
.left_box {
}
.right_box {
  float: right;
  padding: 0px 10px;
}
.coen_box {
  padding: 10px;
  color: #000 !important;
}
.com_appid span,
.com_jsapi span {
  padding: 0;
}
.com_jsapi {
  // margin-top:10px;
}
.coen_divder {
  margin: 20px 0;
  background: #dcdfe6;
  height: 1px;
  width: 100%;
}
.ix_bos {
  background-color: #fef0f0;
  color: #f56c6c;
  padding: 10px;
  margin-bottom: 20px;
}
.bsu_a {
  padding-left: 20px;
}
.qudao {
  padding-bottom: 10px;
}
.tip-errInfo{
  background: #fff !important;
  margin-top:0 !important;
  margin-bottom:20px !important;
  color: #ff4949 !important;
  font-weight: 600;
}
.tip-errInfo:before{
  background: #f0f2f5 !important;
  display: none !important;
  margin-top:0 !important;
}
.form-item-tip-errInfo{
  margin: 0 !important;
}
</style>
