<template>
  <page-header-wrapper>
    <a-card>

      <JeepaySearchForm :searchFunc="searchFunc" :resetFunc="resetFunc">
        <!-- 时间搜索控件 -->
        <a-form-item label="" class="table-search-item">
          <JeepayDateRangePicker ref="dateRangePicker" v-model:value="vdata.searchData['queryDateRange']"
                                 customDateRangeType="date" />
        </a-form-item>
        <jeepay-text-up v-model:value="vdata.searchData['modifyApplyId']" :placeholder="'申请单号'" />
        <jeepay-text-up v-model:value="vdata.searchData['mchShortName']" :placeholder="'商户号/商户名称'" />
        <a-form-item label="" class="table-search-item">
          <a-select v-model:value="vdata.searchData.modifyApplyType" placeholder="申请单类型">
            <a-select-option value="">全部</a-select-option>
            <a-select-option value="1">基本资料变更</a-select-option>
            <a-select-option value="2">结算信息变更</a-select-option>
            <!--						<a-select-option value="3">费率信息变更</a-select-option>-->
            <a-select-option value="6">结算类型变更</a-select-option>
            <a-select-option value="7">退款账户绑定</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="" class="table-search-item">
          <a-select v-model:value="vdata.searchData.state" placeholder="申请单状态">
            <a-select-option value="">全部</a-select-option>
            <a-select-option value="0">草稿</a-select-option>
            <a-select-option value="1">审核中</a-select-option>
            <a-select-option value="2">审核成功</a-select-option>
            <a-select-option value="3">驳回</a-select-option>
            <a-select-option value="5">待签约</a-select-option>
          </a-select>
        </a-form-item>
      </JeepaySearchForm>
      <!-- 列表渲染 -->
      <JeepayTable
          ref="infoTable"
          :initData="true"
          :reqTableDataFunc="reqTableDataFunc"
          :tableColumns="tableColumns"
          :searchData="vdata.searchData"
          @btnLoadClose="vdata.btnLoading = false"
          rowKey="storeId"
      >

        <!-- body 渲染插槽 -->
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'state'">
            <a-badge v-if="record.state == 0" status="default" text="草稿" />
            <a-badge v-if="record.state == 1" status="warning" text="审核中" />
            <a-badge v-if="record.state == 2" status="success" text="审核成功" />
            <a-badge v-if="record.state == 3" status="error" text="驳回" />
            <a-badge v-if="record.state == 9" status="warning" text="已通过未生效" />
            <a-badge v-if="record.state == 5" status="processing" text="待签约" />
            <a-badge v-if="record.state == 30" status="processing" text="待商户授权" />
            <!--						<a-badge v-if="record.state == 7" status="processing" text="等待预审" />-->
            <!--						<a-badge v-if="record.state == 8" status="processing" text="预审拒绝" />-->
            <!--						<a-badge v-if="record.state == 20" status="error" text="已风控" /> -->
            <!--						<a-badge v-if="record.state == 21" status="error" text="已冻结" /> -->
            <link-outlined v-if="record.state == 5"  @click="oauthFuncButton(record.applyId)"  style="font-size: 16px; padding-left: 5px;color: #1965FF" />
            <reload-outlined  @click="queryChannelState(record.modifyApplyId, record.state)"   style="color: #1890ff; margin-left: 10px"  v-if="record.state == 5" />

            <a-tooltip v-if="record.state == 3" :title="record.applyErrorInfo">
              <info-circle-outlined style="color:#F00;margin-left: 5px"/>
            </a-tooltip>
            <a-tooltip v-if="record.state == 9" title="次日生效">
              <info-circle-outlined style="color:#F00;margin-left: 5px"/>
            </a-tooltip>

          </template>

          <template v-if="column.key === 'agentName'">
            <a-tooltip  class="my-tooltip" overlayClassName="tooltip-box-name">
              <template #title>
                <span>服务商名称：{{record.agentName}}</span><br>
                <span>服务商号：{{record.agentNo}}</span>
              </template>
              <div class="my-tooltip-title-box"> {{record.agentName}}</div>
            </a-tooltip>
          </template>
          <template v-if="column.key === 'mchUserName'">
            <a-tooltip  class="my-tooltip" overlayClassName="tooltip-box-name">
              <template #title>
                <span>用户名称：{{record.mchUserName}}</span><br>
                <span>用户手机号：{{record.mchUserPhone}}</span>
              </template>
              <div class="my-tooltip-title-box"> {{record.mchUserName}}</div>
            </a-tooltip>
          </template>
          <template v-if="column.key === 'modifyApplyType'">

            <a-tag
                :key="record.modifyApplyType"
                :color="record.modifyApplyType === 1?'blue':record.modifyApplyType === 2?'orange':record.modifyApplyType === 3?'green':record.modifyApplyType === 6?'green':record.modifyApplyType === 7?'cyan':'volcano'"
            >
              {{ record.modifyApplyType === 1?'基本资料变更':record.modifyApplyType === 2?'结算信息变更':record.modifyApplyType === 3?'费率信息变更':record.modifyApplyType === 6?'结算类型变更':record.modifyApplyType === 7?'退款账户绑定':'其他' }}
            </a-tag>
          </template>

          <template v-if="column.key === 'operation'">
            <JeepayTableColumns>
              <a-button  type="link" @click="getChanageConfigFunc(record.modifyApplyId)"  v-if="record.state == 3 || record.state == 0">变更修改</a-button>
              <a-button  type="link" @click="getChanageDetailFunc(record.modifyApplyId)"  >详情</a-button>
            </jeepaytablecolumns>
          </template>
        </template>
      </JeepayTable>
    </a-card>

  </page-header-wrapper>

  <!-- 签约开通 弹层 -->
  <NextBizsDrawer ref="nextBizsDrawerRef" />

  <!-- 详情页面组件  -->
  <JeepMchApplyChangeDetail ref="infoDetail" :callback-func="searchFunc" />
  <JeepayMchChangeConfig ref="jeepayMchChangeConfigRef"  v-if="vdata.visibleMchChange" />

  <SigningConfig ref="signingConfigRef" v-show="vdata.visibleSigningConfig" />
</template>
<script lang="ts" setup>
import {
  API_URL_MCH_STORE_LIST,
  req,
  reqLoad,
   API_URL_MCH_MODIFY_APPLYMENT_LIST,$getMchApplymentsModifyApplyId,$getMerchantChangeModifyApply
} from "@/api/manage";
import { useUserStore } from "@/store/modules/user";
import {
  onMounted,
  ref,
  reactive,
  getCurrentInstance,
  nextTick,
  provide,
  computed,
} from "vue";
import { useRouter, useRoute } from "vue-router";
import NextBizsDrawer from './NextBizsDrawer.vue'
import InfoDetail from './ChangeDetail.vue'
import SigningConfig from "./SigningConfig.vue";
// 获取全局函数
const { $infoBox, $access } =
    getCurrentInstance()!.appContext.config.globalProperties;

const userStore = useUserStore();
const router = useRouter(); //这是全部路由



// tableColumns 顺序不可随意修改 （关联下方列显示）
const tableColumns = reactive([
  { key: 'modifyApplyType', dataIndex: 'modifyApplyType', title: '申请单类型' },
  { key: 'modifyApplyId', title: '申请单号', dataIndex: 'modifyApplyId', },
  { key: 'applyId', title: '商户号', dataIndex: 'applyId', },
  { key: 'mchShortName', title: '商户简称', dataIndex: 'mchShortName', },
  { key: 'mchUserName', title: '用户名称', dataIndex: 'mchUserName'},
  { key: 'agentName', title: '服务商名称', dataIndex: 'agentName' },
  { key: 'ifName', title: '支付通道', dataIndex: 'ifName', },
  { key: 'state', title: '申请单状态', fixed: 'right',},
  { key: 'createdAt', dataIndex: 'createdAt', title: '申请时间', },
  { key: 'operation', title: '操作', fixed: 'right', align: 'center' }
]);

// 如果用户类型为店长、店员时
if (
    userStore.userInfo["userType"] == 11 ||
    userStore.userInfo["userType"] == 12
) {
  // 删除是否默认的列展示
  tableColumns.splice(2, 1);
}

const infoDetail = ref();
const infoTable = ref();
const jeepayMchChangeConfigRef = ref()
const nextBizsDrawerRef = ref()
const signingConfigRef = ref();


const vdata: any = reactive({
  visibleMchChange:false,
  visibleSigningConfig:false,
  visibleNotes: false,
  tableColumns: tableColumns,
  searchData: {
    mchApplyId: "",
  },
  btnLoading: false,
  notes: {
    appid: "",
    value: "",
  },
});

// 请求table接口数据
function reqTableDataFunc(params) {
  return req.list(API_URL_MCH_MODIFY_APPLYMENT_LIST, params);
}
function searchFunc() {
  // 点击【查询】按钮点击事件
  vdata.btnLoading = true; // 打开查询按钮的loading
  infoTable.value.refTable(true);
}
const resetFunc = () => {
  vdata.searchData = {};
};
//变更详情
function getChanageConfigFunc(applyId){
  vdata.visibleMchChange = true
  jeepayMchChangeConfigRef.value.show(applyId)
}
//详情
function getChanageDetailFunc(recordId : any) { // 进件详情页

  vdata.copyInfoSourceApplyId = '' // 副本清空。

  infoDetail.value.show(recordId)
}
//签约
function oauthFuncButton(applyId){
  vdata.visibleChangeConfig = true;
  signingConfigRef.value.show({applyId:applyId});
}

// 查询最新状态

// 查询最新状态
function queryChannelState(applyId, currState) {
  $getMchApplymentsModifyApplyId(applyId).then((res) => {
    $getMerchantChangeModifyApply(applyId).then((resData) => {
      if (currState != resData.state) {
        $infoBox.message.success("状态已更新");
        searchFunc(); // 更新列表
      } else {
        $infoBox.message.info("状态无变化");
      }
    })
  });
}
</script>

<style>
.two-lines {
  color: #1965ff;
  max-width: 150px;
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.my-tooltip .ant-btn {
  width: 600px !important;
  background-color: #f0f0f0;
  color: #333;
  border: 1px solid #ddd;
  padding: 5px;
  border-radius: 4px;
}
.ant-dropdown-menu-item-only-child{
  text-align: center;
}
</style>