<!--
  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
        >
        <div class="page_box">
          <div class="top_box">
            <span class="left_box"
            >微信子商户号:{{ vdata.wxSubMchNo ?? "暂无" }}</span
            >
            <a-button
                class="jeepay-m-btn right_box"
                data-type="text"
                size="small"
                style="margin-left: 20px"
                @click="wxOauth('01')"
                type="primary"
            ><plus-outlined />新增授权目录
            </a-button>
            <a-button
                class="jeepay-m-btn right_box"
                data-type="text"
                size="small"
                style="margin-left: 20px"
                @click="wxOauth('00')"
                type="primary"
            ><plus-outlined />新增AppID
            </a-button>
          </div>
          <div class="coen_box">
            <div
                class="com_appid"
                v-for="(item, index) in vdata.wxAppidList"
                :key="index"
            >
              <span style="margin-left: 5px">支付APPID：{{ item.appid }}</span>
              <span style="margin-left: 5px"> 支付类型：{{ item.desc }}</span>
            </div>
            <div class="coen_divder"></div>
            <div class="com_jsapi">
              <div class="com_jsapi">
                <a-form-item has-feedback label="jsapi授权目录" name="name">
                  <p v-for="(item, index) in vdata.wxPathList">{{ item }}</p><br>
                </a-form-item>
              </div>
            </div>
          </div>
        </div>
      </template>
      <template v-if="vdata.wxOpenInfo">
        <a-divider
            class="jeepay-m-divider"
            orientation="left"
            style="color: #1a66ff"
        >支付宝支付参数配置</a-divider
        >
        <div class="page_box">
          <div class="top_box">
            <span class="left_box"  >支付宝子商户号:{{ vdata.zfbSubMchNo ?? "暂无" }}</span >
          </div>
        </div>
      </template>


      <template v-if="props.configMode == 'mgrApplyment'">
        <a-divider class="jeepay-m-divider" orientation="left" style="color: #1a66ff" >配置列表</a-divider>

        <a-form-item label="电子围栏开关" name="mchLevel">
          <!-- 用户级别 气泡弹窗 -->
          <a-radio-group v-model:value="vdata.saveObject['configKey']" @change="getConfig">
            <a-radio value="0">关闭</a-radio>
            <a-radio value="1">开启</a-radio>
          </a-radio-group>
        </a-form-item>

        <a-form-item label="反扫开关" name="scanPayPermFlag">
          <!-- 用户级别 气泡弹窗 -->
          <a-radio-group v-model:value="vdata.saveObject['scanPayPermFlag']" @change="getConfigScanPayPermFlag">
            <a-radio :value="0">关闭</a-radio>
            <a-radio :value="1">开启</a-radio>
            <a-radio :value="2">默认</a-radio>
          </a-radio-group>
        </a-form-item>
      </template>

    </div>
  </a-drawer>

  <!-- <a-modal v-model:visible="vdata.visibleOauth" :confirm-loading="confirmLoading" title="新增微信配置" :footer="null" width="50%"   -->
  <!-- @cancel="handleCancel"> -->
  <a-modal
      v-model:visible="vdata.visibleOauth"
      title="微信支付配置"
      @ok="handleCancel"
  >
    <div style="height: 20vh; overflow: auto">
      <div
          class="code code-layout-item"
          style="justify-content: center"
          v-if="vdata.info.type == '00'"
      >
        <div class="ix_bos">
          小程序、公众号注册主体必须与营业执照名称主体一致
        </div>
        <a-form-item label="Appid类型" required style="width: 80%">
          <a-select
              class="select_div"
              v-model:value="vdata.info.appidType"
              ref="select"
              @change="selectTypes"
              placeholder="请选择类型"
          >
            <a-select-option value="00">公众号</a-select-option>
            <a-select-option value="01">小程序</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="支付Appid" required style="width: 80%">
          <a-input
              placeholder="请输入appid"
              v-model:value="vdata.info.subAppid"
          ></a-input>
        </a-form-item>
      </div>

      <div
          class="code code-layout-item"
          style="display: flex; justify-content: center"
          v-if="vdata.info.type == '01'"
      >
        <a-form-item label="jsapi授权目录" required style="width: 100%">
          <a-textarea
              v-model:value="vdata.info.jsapiPath"
              placeholder="请输入完整格式的地址，以/结尾 例如：https://www.weixin.com/"
              :auto-size="{ minRows: 3, maxRows: 5 }"
          />
        </a-form-item>
      </div>
    </div>
  </a-modal>
</template>

<script lang="ts" setup >
import { ref, reactive, defineExpose, nextTick, getCurrentInstance } from "vue";
import {
  $getMchOauth2Config,
  $addMchOauth2Config,
  $getMchConfigConfig,
  $getMchApplymentsScanPayFlag
} from "@/api/manage";

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

const oauth2ConfigPageRef = ref();

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

const vdata: any = reactive({
  wxSubMchNo: "", //微信子商户号
  zfbSubMchNo: "", //支付宝子商户号
  wxAppidList: [] as any, //支付APPID
  wxPathList: [] as any, //jsapi授权目录
  info: {
    type: "",
    subAppid: "",
    jsapiPath: "",
    appidType: "",
  },
  visibleOauth: false,
  wxOpenInfo: true,
  visible: false, // 一级抽屉开关
  mchNo: null, // infoId (默认的infoId)

  saveObject: {configKey:1} as any, // 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(mchNo = null) {
  console.log(props,'propspropspropsprops')
  vdata.mchNo = mchNo;
  vdata.visible = true;
  // 清空数据
  vdata.wxSubMchNo = "暂无";
  vdata.zfbSubMchNo = "暂无";
  vdata.wxAppidList = [];
  vdata.wxPathList = [];

  $getMchOauth2Config(vdata.mchNo).then((res) => {
    vdata.wxSubMchNo = res.wxSubMchNo ?? "";
    vdata.zfbSubMchNo = res.zfbSubMchNo ?? "";
    vdata.wxAppidList = res.wxAppidList ?? [];
    vdata.wxPathList = res.wxPathList ?? [];
    vdata.saveObject['configKey'] = res.regionLock ?? "0";
    vdata.saveObject['scanPayPermFlag'] = res.scanPayPermFlag ?? 0;
  });
  if(props.configMode == 'mgrApplyment'){


  }
}


function getConfig(e){
  $getMchConfigConfig({applyId:vdata.mchNo,configKey:"regionLock",configVal:e.target.value}).then((res) => {
    $infoBox.message.success("状态已更新");
  });
}
function getConfigScanPayPermFlag(e){
  $getMchApplymentsScanPayFlag({applyId:vdata.mchNo,scanPayFlag:e.target.value}).then((res) => {
    $infoBox.message.success("状态已更新");
  });
}
// 刷新 diy列表
function refDiyList() {
  vdata.wxSubMchNo = "";
  vdata.zfbSubMchNo = "";
  vdata.wxAppidList = [];
  vdata.wxPathList = [];

  $getMchOauth2Config(vdata.mchNo).then((res) => {
    vdata.wxSubMchNo = res.wxSubMchNo ?? "";
    vdata.zfbSubMchNo = res.zfbSubMchNo ?? "";
    vdata.wxAppidList = res.wxAppidList ?? [];
    vdata.wxPathList = res.wxPathList ?? [];
  });
}

// 取值配置的infoId, 选择的id or 默认
function getDiyInfoIdOrDefInfoId() {
  return vdata.diyListSelectedInfoId || vdata.mchNo;
}
function selectTypes(e) {}
function handleCancel(e) {
  vdata.info.mchNo = vdata.mchNo;
  $addMchOauth2Config(vdata.info).then((params) => {
    // 清空名称 & 恢复
    vdata.info.type = "";
    vdata.info.subAppid = "";
    vdata.info.jsapiPath = "";
    vdata.info.appidType = "";
    refDiyList(); // 刷新diy列表
  });
  vdata.visibleOauth = false;
}
function wxOauth(type) {
  vdata.visibleOauth = true;
  vdata.info.type = type;
}
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;
}
</style>
