<template>
  <page-header-wrapper>
    <a-card class="table-card">
      <JeepaySearchForm :searchFunc="searchFunc" :resetFunc="() => { vdata.searchData= {} }">
        <JeepaySearchInfoInput v-model:value="vdata.searchData['mchName']" placeholder="用户号/名称/手机号" :textUpStyle="true" :mchNoAndName="true" showType="MCH" />
        <jeepay-text-up v-model:value="vdata.searchData['mchServiceName']" :placeholder="'服务商号/名称'" />
        <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>
        </a-form-item>
        <a-form-item label="" class="table-search-item">
          <a-select v-model:value="vdata.searchData['type']" 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>
        </a-form-item>
      </JeepaySearchForm>

      <!-- 列表渲染 -->
      <JeepayTable
        ref="infoTable"
        :init-data="true"
        :req-table-data-func="reqTableDataFunc"
        :table-columns="tableColumns"
        :search-data="vdata.searchData"
        row-key="mchNo"
        @btnLoadClose="btnLoading=false"
      >
        <template #topBtnSlot>
          <a-button v-if="$access('ENT_MCH_INFO_ADD')" type="primary" @click="addFunc">
            <plus-outlined />新建
          </a-button>
        </template>

        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'mchName'">
            <a @click="detailFunc(record.mchNo)"><b>{{ record.mchName }}</b></a>
          </template>

          <template v-if="column.key === 'state'">
            <a-badge :status="record.state === 1?'processing':'error'" :text="record.state === 1?'启用':'禁用'" />
          </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 === 'type'">
            <a-tag :color="record.type === 1 ? 'green' : 'orange'">
              {{ record.type === 1 ? '普通商户':'特约商户' }}
            </a-tag>
          </template>

          <template v-if="column.key === 'operation'">
            <!-- 操作列插槽 -->
            <JeepayTableColumns>
              <a-button v-if="$access('ENT_MCH_INFO_EDIT')" type="link" @click="editFunc(record.mchNo)">修改</a-button>
              <a-button v-if="$access('ENT_MCH_APP_CONFIG')" type="link" @click="mchAppConfig(record.mchNo)">应用配置</a-button>
              <a-button v-if="$access('ENT_MCH_APP_CONFIG')" type="link" @click="showPayIfConfigList(record.mchNo)">支付配置</a-button>
              <a-button v-if="vdata.configPageIsShow" type="link" @click="mchConfigFunc(record.mchNo)">高级功能配置</a-button>
              <a-button v-if="$access('ENT_DEVICE_QRC_LIST')" type="link" @click="mchQrCodeConfig(record.mchNo)">码牌管理</a-button>
              <a-button v-if="$access('ENT_DEVICE_SPEAKER_DEVICE')" type="link" @click="speakerConfig(record.mchNo)">云喇叭设备</a-button>
              <a-button v-if="$access('ENT_DEVICE_PRINTER_DEVICE')" type="link" @click="printerConfig(record.mchNo)">云打印设备</a-button>
              <a-button v-if="$access('ENT_MCH_APPLYMENT_LIST') && record.type == 2" type="link" @click="toMchApplymentPage(record.mchNo)">进件管理</a-button>
              <a-button v-if="$access('ENT_MCH_STORE_LIST')" type="link" @click="mchStoreConfig(record.mchNo)">门店管理</a-button>
<!--              <a-button v-if="$access('ENT_MCH_INFO_DEL')" type="link" style="color: red" @click="delFunc(record.mchNo)">删除</a-button>-->
            </JeepayTableColumns>
          </template>
        </template>
      </JeepayTable>
    </a-card>
    <!-- 新增页面组件  -->
    <InfoAddOrEdit ref="infoAddOrEdit" :callback-func="searchFunc" />
    <!-- 详情页面组件  -->
    <InfoDetail ref="infoDetail" :callback-func="searchFunc" />
    <!--商户配置  -->
    <MchConfig ref="mchConfigRef" />

    <JeepayPayConfigUserDrawer ref="jeepayPayConfigUserDrawerRef" configMode="agentMch" />

  </page-header-wrapper>
</template>
<script setup lang="ts">

import { API_URL_MCH_LIST, req, reqLoad, $getAgentConfig } from '@/api/manage'
import InfoAddOrEdit from './AddOrEdit.vue'
import InfoDetail from './Detail.vue'
import MchConfig from './MchConfig.vue'
import { ref, reactive, getCurrentInstance, onMounted } from 'vue'
import router from '@/router'
const { $infoBox,$access } = getCurrentInstance()!.appContext.config.globalProperties

const infoDetail = ref()
const infoAddOrEdit = ref()
const infoTable = ref()
const mchConfigRef = ref()

let tableColumns = reactive([
  { key: 'mchName', title: '用户名称', fixed: 'left',},
  { key: 'mchNo', title: '用户号', dataIndex: 'mchNo' , },
  { key: 'contactTel', title: '手机号', dataIndex: 'contactTel' ,},
  { key: 'mchServiceName', title: '服务商', dataIndex: 'mchServiceName', },
  { key: 'state', title: '状态', },
  { key: 'type', title: '商户类型',},
  { key: 'createdAt', dataIndex: 'createdAt', title: '创建日期',},
  { key: 'operation', title: '操作', fixed: 'right', align: 'center'}
])

  let btnLoading = ref(false)
  const vdata = reactive({
    searchData: {} as any,
    configPageIsShow: false, // 商户高级配置页面是否展示
  })

  onMounted(()=>{
    // 高级配置页权限
    getAgentConfig()
  })

  function queryFunc () {
    btnLoading.value = true
    infoTable.value.refTable(true)
  }
  // 请求table接口数据
  function reqTableDataFunc(params: any) {
    return req.list(API_URL_MCH_LIST, params)
  }
  function searchFunc () { // 点击【查询】按钮点击事件
    infoTable.value.refTable(true)
  }

  function addFunc () { // 业务通用【新增】 函数
    infoAddOrEdit.value.show()
  }
  function editFunc (recordId: any) { // 业务通用【修改】 函数
    infoAddOrEdit.value.show(recordId)
  }
  function detailFunc (recordId: any) { // 商户详情页
    infoDetail.value.show(recordId)
  }
  // 删除商户
  function delFunc (recordId: any) {
    $infoBox.confirmDanger('确认删除？', '该操作将删除商户下所有配置及用户信息', () => {
        reqLoad.delById(API_URL_MCH_LIST, recordId).then((res: any) => {
            infoTable.value.refTable(true)
            $infoBox.message.success('删除成功')
          })
    })
  }
  function mchAppConfig (recordId: any) { // 应用配置
      router.push({
        path: '/apps',
        query: { mchNo: recordId }
      })
  }
  function mchStoreConfig (recordId: any) { // 门店管理
    router.push({
      path: '/store',
      query: { mchNo: recordId }
    })
  }
  function mchReceiverGroupConfig (recordId: any) { // 账号分组管理
    router.push({
      path: '/divisionReceiverGroup',
      query: { mchNo: recordId }
    })
  }
  function mchReceiverConfig (recordId: any) { // 账号管理
    router.push({
      path: '/divisionReceiver',
      query: { mchNo: recordId }
    })
  }
  function mchQrCodeConfig (recordId: any) { // 静态码管理
    router.push({
      path: '/qrc',
      query: { mchNo: recordId }
    })
  }

  function speakerConfig(recordId: any) {// 云喇叭管理
    router.push({
      path: '/speaker/device',
      query: { mchNo: recordId }
    })
  }

  function printerConfig(recordId: any) {// 云打印管理
    router.push({
      path: '/printer/device',
      query: { mchNo: recordId }
    })
  }

  function toMchApplymentPage(recordId){
    router.push({
      path: '/applyments',
      query: { mchNo: recordId }
    })
  }

  function mchConfigFunc (recordId: any) { // 配置 函数
    mchConfigRef.value.show(recordId)
  }

  function getAgentConfig() {
    $getAgentConfig('subMchPayInterfaceConfigIsUsable').then(config => {
      if (config && config.configVal) {
        vdata.configPageIsShow = config.configVal=='true'?true:false
      }
    })
  }
const jeepayPayConfigUserDrawerRef = ref()
const showPayIfConfigList = function (recordId) { // 支付参数配置


  jeepayPayConfigUserDrawerRef.value.show(recordId)
}
</script>
