<template>
  <page-header-wrapper>
    <!-- 列表页 -->
    <a-card v-show=" !vdata.currentApplyPage.component" class="table-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>

<!--        <JeepaySearchInfoInput v-model:value="vdata.searchData['mchUserName']" placeholder="用户号/名称/手机号" :textUpStyle="true" :mchNoAndName="true" showType="MCH" />-->


        <jeepay-text-up   v-model:value="vdata.searchData['mchApplyName']" :placeholder="'商户号/商户名称'" />
        <jeepay-text-up   v-model:value="vdata.searchData['ifName']" :placeholder="'支付通道'" />
        <jeepay-text-up  v-model:value="vdata.searchData['isvNo']" :placeholder="'渠道名称/渠道号'"  />
        <jeepay-text-up  v-model:value="vdata.searchData['mchUserName']"  :placeholder="'用户号/名称/手机号'"  />
        <jeepay-text-up  v-model:value="vdata.searchData['mchServiceName']"  :placeholder="'服务商号/服务商名称'"  />
        <jeepay-text-up  v-model:value="vdata.searchData['autoConfigMchAppId']" :placeholder="'应用名称/应用ID'" />
        <a-form-item label="" class="table-search-item">
          <a-select v-model:value="vdata.searchData.range"  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>
        </a-form-item>
        <a-form-item label="" class="table-search-item">
          <a-select  v-model:value="vdata.searchData.merchantType" 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>
        </a-form-item>
        <a-form-item label="" class="table-search-item">
          <a-select  v-model:value="vdata.searchData.authenticationState"  placeholder="认证状态" >
            <a-select-option value="4">全部已认证</a-select-option>
            <a-select-option value="2">微信未认证</a-select-option>
            <a-select-option value="3">支付宝未认证</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="" class="table-search-item">
          <a-select v-model:value="vdata.searchData.settlementType" placeholder="结算类型"  >
            <a-select-option value="T1">T1</a-select-option>
            <a-select-option value="D1">D1</a-select-option>
            <a-select-option value="D0">D0</a-select-option>
            <a-select-option value="定时结算">定时结算</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="4">待验证</a-select-option> -->
            <!-- <a-select-option value="5">待签约</a-select-option> -->
            <!-- <a-select-option value="7">等待预审</a-select-option> -->
            <!-- <a-select-option value="8">预审拒绝</a-select-option> -->
            <a-select-option value="20">已风控</a-select-option>
            <a-select-option value="21">已冻结</a-select-option>
            <a-select-option value="22">已注销</a-select-option>
          </a-select>
        </a-form-item>
      </JeepaySearchForm>


      <!-- 列表渲染 -->
      <JeepayTable
          ref="infoTable"
          :init-data="false"
          :req-table-data-func="reqTableDataFunc"
          :table-columns="tableColumns"
          :search-data="vdata.searchData"
          row-key="applyId"
      >
        <!-- 表格顶部按钮行插槽 -->
        <template #topBtnSlot>
          <a-button v-if="$access('ENT_MCH_APPLYMENT_ADD')" type="primary" @click="getVisibleAdd()"><plus-outlined />发起进件</a-button>
          <!--          <a-button v-if="$access('ENT_MCH_APPLYMENT_ADD')" type="primary" @click="addFunc('')"><plus-outlined />发起进件</a-button>-->
        </template>

        <template #headerCell="{ column }">
          <template v-if="column.key === 'verify'">
            <Tooltip color="#3b4146">
              <template #title>
                <div style="color: #ffffff">提示内容</div>
              </template>
              <div style="cursor: pointer; width: 100%">
                认证状态
                <a-tooltip
                    title="支付宝微信必须认证后才可以交易，如遇列表认证状态未自动更新，可以点击认证状态展开详情页更新。"
                ><question-circle-outlined style="padding-left: 10px"
                /></a-tooltip>
              </div>
            </Tooltip>
          </template>
          <template v-if="column.key === 'settlementType'">
            <Tooltip color="#3b4146">
              <template #title>
                <div style="color: #ffffff">提示内容</div>
              </template>
              <div style="cursor: pointer; width: 100%">
                结算类型
                <a-tooltip>
                  <template #title>
                    <p>T1：工作日次日到账，交易资金于周末和法定节假日次日的6点-12点自动结算至银行卡</p>
                    <p>D1：自然日次日到账，全年365天（不分节假日）的交易资金于自然日的次日6点-12点自动结算至银行卡</p>
                    <p>D0：实时到账，全年365天24小时（不分节假日）的交易资金笔笔实时秒到至银行卡，更放心更快捷</p>
                    <p>定时结算，在一天24个整点时辰，根据入账需求选择结算范围，可任意指定一个或多个结算时间点</p>
                  </template>
                  <question-circle-outlined style="padding-left: 10px"/>
                </a-tooltip>
              </div>
            </Tooltip>
          </template>
        </template>
        <!-- body 渲染插槽 -->
        <template #bodyCell="{ column, record }">


          <template v-if="column.key === 'contactName'">
            {{ record.contactName }} {{ record.contactPhone }}
          </template>
          <template v-if="column.key === 'notes'"  >
            <span @click="remarkFunc(record)" class="two-lines"   >
              <b>{{ record.remark ?? "--" }}</b>
              <EditOutlined @click="remarkFunc(record)" />
            </span>


          </template>

          <template v-if="column.key === 'mchServiceName'">
            <a-tooltip  class="my-tooltip" overlayClassName="tooltip-box-name">
              <template #title>
                <span>服务商名称：{{record.mchServiceName}}</span><br>
                <span>服务商号：{{record.agentNo}}</span>
              </template>
              <div class="my-tooltip-title-box"> {{record.mchServiceName}}</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 === 'mchNo'">
            <a-tooltip  overlayClassName="tooltip-box-name">
              <template #title>
                <span>用户名称：{{record.mchName}}</span><br>
                <span>用户号：{{record.mchNo}}</span>
              </template>
              <div class="my-tooltip-title-box"> {{record.mchName}}</div>
            </a-tooltip>
          </template>
          <template v-if="column.key === 'mchShortName'">
            <a-tooltip  overlayClassName="tooltip-box-name">
              <template #title>
                <span>商户全称：{{record.mchFullName}}</span><br>
                <span>商户简称：{{record.mchShortName}}</span>
              </template>
              <div class="my-tooltip-title-box"> {{record.mchShortName}}</div>
            </a-tooltip>
          </template>
          <template v-if="column.key === 'settlementType'">
<!--            <a @click="getChangeConfigRef(record)"><b>{{ record.settlementType }}</b>-->
              {{ record.settlementType }}

<!--              <EditOutlined @click="getChangeConfigRef(record)" /></a>-->

          </template>

          <template v-if="column.key == 'range'">
            <a-tag v-if="record.range == 0" color="orange">线下场景</a-tag>
            <a-tag v-if="record.range == 1" color="green">线上场景</a-tag>
          </template>

          <template v-if="column.key === 'autoConfigMchAppId'">
            <a-tooltip  overlayClassName="tooltip-box-name">
              <template #title>
                <span>应用名称：{{record.appName}}</span><br>
                <span>应用ID：{{record.autoConfigMchAppId}}</span>
              </template>
              <div class="my-tooltip-title-box"> {{record.appName}}</div>
            </a-tooltip>
          </template>

          <template v-if="column.key === 'isvNo'">
            <a-tooltip  overlayClassName="tooltip-box-name">
              <template #title>
                <span>渠道名称：{{record.isvName}}</span><br>
                <span>渠道号：{{record.isvNo}}</span>
              </template>
              <div class="my-tooltip-title-box"> {{record.isvName}}</div>
            </a-tooltip>
          </template>

          <template v-if="column.key === 'applyId'">

            <a @click="detailFunc(record.applyId)"    ><b>{{ record.applyId }}</b></a>
          </template>

          <template v-if="column.key === 'merchantType'">
            {{
              record.merchantType === 1
                  ? "小微"
                  : record.merchantType === 2
                      ? "个体"
                      : record.merchantType === 3
                          ? "企业"
                          : "其他组织"
            }}
          </template>


          <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 == 4"
                status="processing"
                text="待验证"
            />
            <a-badge
                v-if="record.state == 5"
                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="processing"
                text="已被风控"
            />
            <a-badge
                v-if="record.state == 21"
                status="processing"
                text="已冻结"
            />
            <a-badge
                v-if="record.state == 12"
                status="warning"
                text="待通道复审"
            />
            <a-tooltip  v-if="record.ifCode == 'kqpay' && record.state == 12" title="快钱通道营业执照商户支持先开通后审核，复审期间的交易会在人工审批完成后结算，复审时间一般为1个工作日。">
              <info-circle-outlined style="font-size: 16px; padding-left: 5px;color: #FF0000"/>
            </a-tooltip>
            <reload-outlined @click="queryChannelState(record.applyId, record.state)" style="color: #1890ff; margin-left: 5px" v-if="(record.state == 12)   && $access('ENT_MCH_APPLYMENT_GET_INFO') " />
          </template>

          <template v-if="column.key === 'storeNumber'">
            <a href="javascript:void(0)" @click="getStore(record.applyId)">{{ record.storeNumber ? record.storeNumber : 0 }}</a>
          </template>
          <template v-if="column.key === 'verify'">
            <div @click="oauthFunc(record.applyId)"  v-if="record.ifCode != 'zftpay'">
              <p class="verify_box">
                微信：
                <a-badge
                    v-if="record.wxAuthenticationState == 1"
                    status="success"
                    text="已认证"
                />
                <a-badge
                    v-if="record.wxAuthenticationState == 0"
                    status="default"
                    text="未认证"
                />
                <a-badge
                    v-if="record.wxAuthenticationState == -1"
                    status="default"
                    text="未知"
                />
              </p>
              <p class="verify_box">
                支付宝：
                <a-badge
                    v-if="record.zfbAuthenticationState == 1"
                    status="success"
                    text="已认证"
                />
                <a-badge
                    v-if="record.zfbAuthenticationState == 0"
                    status="default"
                    text="未认证"
                />
                <a-badge
                    v-if="record.zfbAuthenticationState == -1"
                    status="default"
                    text="未知"
                />
              </p>
            </div>
            <div v-if="record.ifCode == 'zftpay'">--</div>
          </template>
          <template v-if="column.key === 'applyPageType'">
            <span v-if="record.applyPageType == 'PLATFORM_WEB'">运营平台系统</span>
            <span v-else-if="record.applyPageType == 'AGENT_WEB'">服务商系统</span>
            <span v-else-if="record.applyPageType == 'AGENT_APP'">{{ $SYS_NAME_MAP.AGENT_APP }}APP</span>
            <span v-else-if="record.applyPageType == 'AGENT_LITE'">{{ $SYS_NAME_MAP.AGENT_APP }}小程序</span>
            <span v-else-if="record.applyPageType == 'MCH_WEB'">商户系统</span>
            <span v-else-if="record.applyPageType == 'MCH_APP'">{{ $SYS_NAME_MAP.MCH_APP }}APP</span>
            <span v-else-if="record.applyPageType == 'MCH_LITE'">{{ $SYS_NAME_MAP.MCH_APP }}小程序</span>
            <span v-else>{{ record.applyPageType || '' }}</span>
          </template>

          <template v-if="column.key === 'operation'">
            <!-- 以下为： 运营， 服务商通用按钮 -->
            <JeepayTableColumns>
              <a-button type="link" @click="getStore(record.applyId)" >门店管理</a-button>
              <a-button  type="link" @click="deviceFunc(record.applyId)">设备管理</a-button>
              <a-button v-if="$access('ENT_MCH_APPLYMENT_VIEW')" type="link" @click="getChangeConfigRef(record)" >变更修改</a-button>
              <a-button v-if="$access('ENT_MCH_APPLYMENT_VIEW') && record.ifCode != 'zftpay'" type="link" @click="oauthFunc(record.applyId)" >实名认证</a-button>

              <a-button v-if="$access('ENT_MCH_APPLYMENT_VIEW')" type="link" @click="oauthDeployFunc(record.applyId)"  >参数配置</a-button >
              <a-button v-if="$access('ENT_MCH_APPLYMENT_VIEW')"  type="link" @click="getOperator()">添加管理员</a-button>
              <a-button v-if="$access('ENT_MCH_APPLYMENT_VIEW')" type="link" @click="editOrViewFunc(record.applyId, true)">详情</a-button>

<!--              <a-button v-if="$access('ENT_MCH_APPLYMENT_VIEW')" type="link" @click="detailFunc(record.applyId)">详细数据</a-button>-->
<!--              <a-button v-if="$access('ENT_MCH_APPLYMENT_EDIT') && record.state == 0" type="link" @click="editOrViewFunc(record.applyId, false)">继续填写</a-button>-->
<!--              <a-button v-if="$access('ENT_MCH_APPLYMENT_EDIT') && record.state == 3" type="link" @click="editOrViewFunc(record.applyId, false)">修改</a-button>-->
<!--              <a-button v-if="$access('ENT_MCH_APPLYMENT_ADD')" type="link" @click="toCopySelectIfCodePage(record.applyId, record.mchNo)">复用信息</a-button>-->


              <!-- 审核中、 待验证、 签约完成 -->
<!--              <a-button-->
<!--                  v-if="$access('ENT_MCH_APPLYMENT_GET_INFO') && (record.state == 1 || record.state == 4 || record.state == 5)"-->
<!--                  type="link"-->
<!--                  @click="queryChannelState(record.applyId, record.state)"-->
<!--              >-->
<!--                获取最新结果-->
<!--              </a-button>-->

<!--              <a-button v-if="$access('ENT_MCH_APPLYMENT_SIGN')" type="link" @click="oauthFunc(record.applyId)" >实名认证</a-button>-->

<!--              <a-button v-if="$access('ENT_MCH_APPLYMENT_PAY_CONFIG')" type="link" @click="oauthDeployFunc(record.applyId)"  >参数配置</a-button >-->
              <!-- 进件成功后可发起 参数配置 -->
<!--              <a-button v-if="$access('ENT_MCH_APPLYMENT_PAY_CONFIG') && record.state == 2" type="link" @click="appConfigDrawerRef.show(record.applyId)">参数配置</a-button>-->

              <!-- 1审核中、 2进件成功、 4待验证、 5待签约、 6签约完成/审核成功 -->
<!--              <a-button-->
<!--                  v-if="$access('ENT_MCH_APPLYMENT_SIGN') && (record.state == 1 || record.state == 2 || record.state == 4 || record.state == 5 || record.state == 6)"-->
<!--                  type="link"-->
<!--                  @click="nextBizsDrawerRef.show(record.applyId)"-->
<!--              >-->
<!--                签约开通-->
<!--              </a-button>-->
            </JeepayTableColumns>
          </template>
        </template>
      </JeepayTable>

      <a-modal v-model:visible="vdata.qrCodeVisible" title="商户签约二维码" :footer="null" :width="250" @ok="() => vdata.qrCodeVisible = false">
        <QrcodeVue :value="vdata.confirmUrl" :size="200" />
      </a-modal>
      <!-- 微信签约弹窗 -->
      <a-modal v-model:visible="vdata.wxQrCodeVisible" title="二维码" :footer="null" :width="250" @ok="() => vdata.wxQrCodeVisible = false">
        <span>请超级管理员使用微信扫描二维码，根据页面指引完成签约</span>
        <img :src="vdata.confirmUrl" style="width: 200px;height: 200px;">
      </a-modal>
      <!-- 收付通签约弹窗 -->
      <a-modal v-model:visible="vdata.sftQrCodeVisible" title="二维码" :footer="null" :width="250" @ok="() => vdata.sftQrCodeVisible = false">
        <span>请超级管理员使用微信扫描二维码，根据页面指引完成签约</span>
        <QrcodeVue :value="vdata.confirmUrl" style="padding-top: 10px;" :size="200" />
      </a-modal>
    </a-card>

    <!-- 定义组件分为： 第一步和第二步  -->
    <a-card>
      <component :is="vdata.currentApplyPage.component" ref="applyPageComponentRef" :listPageSearchMchNo="vdata.searchData.mchNo" @switchApplyPage="switchApplyPage" />
    </a-card>

    <JeepayModelMchList ref="jeepayModelMchList" showType="MCH" @selectFinishFunc="searchMchFinishFunc" />

    <!-- 参数配置 弹层 -->
    <AppConfigDrawer ref="appConfigDrawerRef" />

    <!-- 后续流程 弹层 -->
    <NextBizsDrawer ref="nextBizsDrawerRef" />
    <ChangeConfig ref="changeConfigRef" v-show="vdata.visibleChangeConfig" />

    <!-- 详情页面组件  -->
    <InfoDetail ref="infoDetail" :callback-func="searchFunc" />


    <a-modal v-model:visible="vdata.visibleAdd" title="" :footer="null" width="50%"  @cancel="handleCancel" class="set-img-box" >
      <div class="state-box-div" >
        <div>
          <img :src="vdata.banerapps" alt="" >
          <div class="left-bottom">
            <a-button type="primary"  @click="addFunc('',1)">发起进件 </a-button>
          </div>
        </div>
      </div>
      <div  class="state-box-div">
        <div  class="state-box">
          <img :src="vdata.xianxiaImg" alt="" >
        </div>
        <div  class="state-box">
          <img :src="vdata.xianshangImg" alt="" >
          <div class="right-bottom">
            <a-button type="primary"  @click="addFunc('',2)">发起进件</a-button>
          </div>
        </div>
      </div>
    </a-modal>

    <a-modal
        v-model:visible="vdata.visibleNotes"
        title="编辑备注"
        :footer="null"
        width="50%"
        @cancel="handleCancel"
    >
      <div style="height: 20vh; overflow: auto">
        <div
            class="code code-layout-item"
            style="display: flex; justify-content: center"
        >
          <a-form-item label="备注" required style="width: 80%">
            <a-textarea
                v-model:value="vdata.notes.value"
                placeholder="请输入备注"
                :auto-size="{ minRows: 3, maxRows: 5 }"
            />
          </a-form-item>
        </div>

        <div style="text-align: center; margin-top: 34px">
          <a-button
              type="primary"
              :disabled="vdata.isDisabled"
              @click="sendNotes()"
          >
            确定
          </a-button>
        </div>
      </div>
    </a-modal>
    <JeepayOauth2DeployConfig  v-show="vdata.visibleOauth2Deploy" configMode="mchApplyment"   ref="jeepayOauth2DeployConfigRef"/>
    <JeepayMchOauth2 v-show="vdata.visibleOauth2" ref="jeepayMchOauth2Ref" />
  </page-header-wrapper>
</template>
<script setup lang="ts">
import { API_URL_MCH_APPLYMENT_LIST,API_MCH_APPLYMENT_REMARK, req, $getMchApplymentChannelState, $getPayConfigIfcodes } from '@/api/manage'
import {ref, reactive, getCurrentInstance, nextTick, provide, computed, onMounted } from 'vue'
import QrcodeVue from 'qrcode.vue'
import ApplySelectMchAndIfcode from '@/components/link/JeepayUIComponents/JeepayMchApplyment/JeepayMchApplymentSelectMchAndIfcode.vue'
import ApplyMchDetailInfoEntry from '@/components/link/JeepayUIComponents/JeepayMchApplyment/JeepayMchApplymentDetailInfoEntry.vue'
import AppConfigDrawer from './AppConfigDrawer.vue'
import NextBizsDrawer from './NextBizsDrawer.vue'
import ChangeConfig from "./ChangeConfig.vue";
import InfoDetail from './NewDetail.vue'
import { useRouter, useRoute } from "vue-router";
const { $infoBox, $access, $SYS_NAME_MAP } = getCurrentInstance()!.appContext.config.globalProperties


const router = useRouter(); //这是全部路由
/** 定义全部组件 **/
const allApplyPage = {
  'list': { name: '列表', component: null },
  'applySelectMchAndIfcode': { name: '选择商户及进件渠道', component: ApplySelectMchAndIfcode },
  'applyMchDetailInfoEntry':  { name: '填写进件资料', component: ApplyMchDetailInfoEntry }
}

// 动态组件
const applyPageComponentRef = ref()

const jeepayModelMchList = ref()

const appConfigDrawerRef = ref()
const nextBizsDrawerRef = ref()
const infoDetail = ref()
const infoTable = ref()
const dateRangePicker = ref()
const changeConfigRef = ref()

const jeepayMchOauth2Ref = ref();
const jeepayOauth2DeployConfigRef = ref();
let tableColumns = reactive([
  // { key: 'applyId', title: '申请单号', dataIndex: 'applyId', },
  // { key: 'ifName', title: '渠道', dataIndex: 'ifName' , },
  // { key: 'merchantType', title: '商户类型', dataIndex: 'merchantType' , },
  // { key: 'mchNo', title: '用户号', dataIndex: 'mchNo' ,  },
  // { key: 'mchFullName', title: '进件商户名', dataIndex: 'mchFullName', },
  // // { key: 'isvNo', title: '服务商号', dataIndex: 'isvNo',  width: 140, minWidth: 140, maxWidth: 170},
  // { key: 'state', title: '进件状态', },
  // // { key: 'applyPageType', title: '来源', width: 150, minWidth: 150, maxWidth: 150},
  // { key: 'createdAt', dataIndex: 'createdAt', title: '创建日期', },
  // { key: 'lastApplyAt', dataIndex: 'lastApplyAt', title: '最后提交', },
  // { key: 'operation', title: '操作',   fixed: 'right', align: 'center'}

  { key: "applyId", dataIndex: "applyId", title: "商户号", width: 100 },
  { key: "mchShortName", title: "商户简称", dataIndex: "mchShortName" },
  { key: "ifName", title: "支付通道", dataIndex: "ifName" },
  { key: "isvNo", title: "所属渠道", dataIndex: "isvNo" },
  { key: "merchantType", title: "商户类型", dataIndex: "merchantType",align: "center" },
  { key: "contactName", title: "商户联系人", dataIndex: "contactName" },
  { key: "verify",title: "认证状态",dataIndex: "verify",align: "center"},
  { key: 'mchUserName', title: '用户名称', dataIndex: 'mchUserName'},
  { key: 'mchServiceName', title: '服务商名称', dataIndex: 'mchServiceName' },
  { key: "autoConfigMchAppId",title: "所属应用", dataIndex: "autoConfigMchAppId",},
  { key: "range", title: "应用类型" },
  { key: "settlementType", title: "结算类型", dataIndex: "settlementType",align: "center" },
  { key: "state", title: "商户状态", dataIndex: "state" },
  { key: "storeNumber", title: "门店总数", dataIndex: "storeNumber",align: "center"  },
  { key: "notes", title: "备注", dataIndex: "notes" ,align: "center" },
  { key: "createdAt", dataIndex: "createdAt", title: "创建日期" },
  {  key: "operation",  title: "操作",   fixed: "right",  dataIndex: "operation", align: "center", width: 200,},
])

let vdata : any = reactive({
  banerapps:"https://syb-manage.oss-cn-hangzhou.aliyuncs.com/shouyinbei/banerapps.png",
  xianxiaImg:"https://syb-manage.oss-cn-hangzhou.aliyuncs.com/shouyinbei/xianxia.png",
  xianshangImg:"https://syb-manage.oss-cn-hangzhou.aliyuncs.com/shouyinbei/xianshang.png",
  visibleAdd:false,
  searchData: { queryDateRange: '' }, // 搜索条件

  notes: {
    appid: "",
    value: "",
  },
  currentApplyPage: allApplyPage.list, // 当前的步骤组件  null表示列表页
  backupApplyPage: null, // 备份： 用作快速恢复

  mchApplymentData: { }, //商户进件资料
  isView: false, // 是否预览模式

  ifCodeList: [],

  copyInfoSourceApplyId: '',  // 副本资料

})


onMounted(() => {
  vdata.searchData['mchNo'] = useRoute().query.mchNo
  if($access('ENT_MCH_APPLYMENT')){
    $getPayConfigIfcodes('CURRENT', 'agentApplyment', '').then((res) => {
      vdata.ifCodeList = res
    })
  }
  searchFunc()
})


// 向所有子组件注入参数 (子组件可直接更改此值)
provide('mchApplymentData', computed( ()=> vdata.mchApplymentData) )
provide('isView', computed( ()=> vdata.isView) )

// 向所有子组件注入参数： 配置模式： mgrApplyment / agentApplyment / mchApplyment
provide('configMode', 'agentApplyment')

// 向所有子组件注入参数 副本资料来源ID
provide('copyInfoSourceApplyId', computed( ()=> vdata.copyInfoSourceApplyId) )

// 请求table接口数据
async function reqTableDataFunc(params: any) {
  if (!vdata.searchData.state) {
    params.state = 99;
  }
  let res = await req.list(API_URL_MCH_APPLYMENT_LIST, params);
  var records = res.records;
  for (let i = 0; i < res.records.length; i++) {
    res.records[i]["contactName"] = maskedName(res.records[i]["contactName"]);
    res.records[i]["contactPhone"] = maskedMobile(
        res.records[i]["contactPhone"]
    );
  }
  return res;
}
function maskedMobile(phoneNumber) {
  if (phoneNumber.length === 11) {
    const prefix = phoneNumber.slice(0, 3);
    const suffix = phoneNumber.slice(-4);
    const maskedPart = "*".repeat(4);
    return prefix + maskedPart + suffix;
  }
  return phoneNumber;
}
function maskedName(fullName) {
  if (fullName.length >= 2) {
    const firstName = fullName.charAt(0);
    const maskedPart = "*".repeat(fullName.length - 1);
    return firstName + maskedPart;
  }
  return fullName;
}
function getStore(applyId) {
  router.push({
    path: "/store",
    query: { applyId: applyId },
  });
}

function deviceFunc(mchApplyId){
  router.push({
    path: "/qrc",
    query:{mchApplyId:mchApplyId}
  });
}
function getOperator() {
  router.push({
    path: "/users",
  });
}
// 点击【查询】按钮点击事件
function searchFunc () {
  infoTable.value.refTable(true)
}

// 切换步骤： 不清空数据
function switchApplyPage(page){
  if (page == "applyAddApps") {
    router.push({
      path: "/apps",
    });
    return false;
  }
  if (page == "applyMch") {
    router.push({
      path: "/mch",
    });
    return false;
  }
  vdata.backupApplyPage = vdata.currentApplyPage
  vdata.currentApplyPage = allApplyPage[page]

  if(vdata.currentApplyPage && vdata.currentApplyPage.component){
    nextTick(() => { applyPageComponentRef.value.pageRender() })
  }else{

    //列表页
    searchFunc() // 刷新

  }
}

function detailFunc (recordId: any) { // 进件详情页

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

  infoDetail.value.show(recordId)
}

// 点击【发起进件】的操作
function addFunc(copyInfoSourceApplyId = '',sceneType=0){


  vdata.visibleAdd  = false
  vdata.sceneType = sceneType
  vdata.copyInfoSourceApplyId = copyInfoSourceApplyId

  vdata.backupApplyPage = null // 再次点击进件将无法再次恢复

  //进件数据重置
  vdata.mchApplymentData = {}


  req.list(API_URL_MCH_APPLYMENT_LIST, {pageNumber:"1",pageSize:1}).then(res => {
    if(res.records.length > 0){
      vdata.mchApplymentData = {mchNo:res.records[0].mchNo,sceneType:sceneType}
    }

    //进件数据重置
    vdata.isView = false
    switchApplyPage('applySelectMchAndIfcode')
  })
  // vdata.isView = false
  // switchApplyPage('applySelectMchAndIfcode')
}

// 修改资料 然后重新发起进件操作
function editOrViewFunc(applyId, isView){
  console.log(applyId, isView);

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

  vdata.backupApplyPage = null // 再次点击进件将无法再次恢复
  vdata.isView = isView
  req.getById(API_URL_MCH_APPLYMENT_LIST, applyId, { originData: vdata.isView?'0':'1' } ).then(res => {
    let { applyId, channelApplyNo, mchNo, ifCode, applyDetailInfo, applyErrorInfo, isvNo, state ,range} = res
    vdata.mchApplymentData = {applyId, channelApplyNo, mchNo, ifCode, applyDetailInfo, applyErrorInfo,isvNo, state,range}
    switchApplyPage('applyMchDetailInfoEntry')
  })

}

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

function sendNotes() {
  req
      .add(API_MCH_APPLYMENT_REMARK, {
        remark: vdata.notes.value,
        applyId: vdata.notes.appid,
      })
      .then((msg) => {
        console.log(msg, "resresres");
        $infoBox.message.success("编辑成功");
        searchFunc(); // 更新列表
        vdata.visibleNotes = false;
      });
}
// 恢复上一次步骤
function recoveryApplyPage(){
  vdata.currentApplyPage = vdata.backupApplyPage
}

// 获取下拉框组件
const ifCodeRef = ref()
const stateRef = ref()
let isReset = ref(0) // 下拉搜索框是否重置

// 清空搜索项
const resetFunc = () => {
  isReset.value++ // 下拉搜索框重置
  dateRangePicker.value.returnSelectModel()
  vdata.searchData= {}
}

// 选择商户 / 应用 完成后的操作
function searchMchFinishFunc(selectVal){

  if(selectVal[0]){
    vdata.searchData.mchNo = selectVal[0]
  }

  jeepayModelMchList.value.close()

}

// 显示二维码图片
function showQrImgFunc(record){
  if (record.ifCode == 'wxpay') {
    vdata.wxQrCodeVisible = true
  }else if (record.ifCode == 'sftpay') {
    vdata.sftQrCodeVisible = true
  }else if (record.ifCode == 'fuioupay') {
    vdata.qrCodeVisible = true
    vdata.confirmUrl = JSON.parse(record.applyErrorInfo).signUrl
    return
  }else {
    vdata.qrCodeVisible = true
  }
  vdata.confirmUrl = record.applyErrorInfo
}


// 副本 copySourceApplyId : 需要copy的资料来源。
function toCopySelectIfCodePage(copySourceApplyId, mchNo){

  vdata.searchData.mchNo = mchNo
  addFunc(copySourceApplyId)

}

function  getVisibleAdd(){
  vdata.visibleAdd = true
}
function  handleCancel (e) {
  vdata.visibleAdd = false
}
function oauthDeployFunc(applyId) {
  vdata.visibleOauth2Deploy = true;
  jeepayOauth2DeployConfigRef.value.show(applyId);
}

function oauthFunc(applyId) {
  vdata.visibleOauth2 = true;
  jeepayMchOauth2Ref.value.show(applyId);
}
function getChangeConfigRef(data) {
  vdata.visibleChangeConfig = true;
  changeConfigRef.value.show(data);
}
function remarkFunc(data) {
  vdata.notes.appid = data.applyId;
  vdata.notes.value = data.remark ?? "";
  vdata.visibleNotes = true;
}
</script>
<style>

.state-box-div{
  width: 100%;
  padding: unset !important;
}
.state-box-div img{
  width: 100%;
  height: 100%;
}
.set-img-box .ant-modal-body{
  padding: unset !important;
}
.state-box{
  padding: unset !important;
}

.state-box{
  width: 50%;
}
.state-box img{
  width: 100%;
  height: 100%;
}
.visibleAdd-img{
//display: flex;
}
.ant-modal-content svg{
  color: #ffffff;
  font-weight: bold;
  font-size: 25px;
}
.left-bottom{
  border-radius: 10px;
  position: absolute;
  left: 5%;
  bottom: 5%;
}
.left-bottom button{
  border-radius: 10px;
}
.right-bottom{
  position: absolute;
  right: 35%;
  bottom: 5%;
}
.right-bottom button{
  border-radius: 10px;
}
</style>

<style lang="less">
.verify_box {
  text-align: center;
}
.two-lines {
  color: #1965ff;
  max-width: 150px;
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>