<template>
  <page-header-wrapper>
    <a-card v-show="vdata.tableType == 'table'">
      <JeepaySearchForm :searchFunc="searchFunc" :resetFunc="() => { vdata.searchData= {} }">
        <JeepaySearchInfoInput v-model:value="vdata.searchData.mchNo" placeholder="用户号" :textUpStyle="true" :mchNoAndName="true" showType="MCH" />
        <jeepay-text-up v-model:value="vdata.searchData.appId" :placeholder="'应用AppId'" />
        <jeepay-text-up v-model:value="vdata.searchData.appName" :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.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>
      </JeepaySearchForm>

      <!-- 列表渲染 -->
      <JeepayTable
        ref="infoTable"
        :initData="false"
        :reqTableDataFunc="reqTableDataFunc"
        :tableColumns="tableColumns"
        :searchData="vdata.searchData"
        rowKey="appId"
        @btnLoadClose="vdata.btnLoading=false"
      >
        <template #topBtnSlot>
          <div>
<!--            <a-button v-if="$access('ENT_MCH_APP_ADD')" type="primary" class="mg-b-30" @click="addFunc"><plus-outlined />新建</a-button>-->
            <a-button v-if="$access('ENT_MCH_APP_ADD')" type="primary" class="mg-b-30" @click="getAddFunc('appSaveEdit')"><plus-outlined />新建</a-button>

          </div>
        </template>
        <template #bodyCell="{column,record}">
          <template v-if="column.key == 'appId'">
            <b>{{ record.appId }}</b>
          </template> <!-- 自定义插槽 -->
          <template v-if="column.key == 'state'">
            <a-badge :status="record.state === 0?'error':'processing'" :text="record.state === 0?'禁用':'启用'" />
          </template>

          <template v-if="column.key === 'defaultFlag'">
            <a-badge :status="record.defaultFlag === 0?'error':'processing'" :text="record.defaultFlag === 0?'否':'是'" />
          </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 === '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 == 'op'">
            <!-- 操作列插槽 -->
            <JeepayTableColumns>
              <a-button v-if="$access('ENT_MCH_APP_EDIT')" type="link" @click="editFunc(record.appId)">修改</a-button>
<!--              <a-button v-if="$access('ENT_MCH_APP_PAY_CONFIG')" type="link" @click="showFeeConfigList(record.appId)">支付配置</a-button>-->
              <a-button v-if="$access('ENT_MCH_PAY_TEST')" type="link">
                <router-link :to="{name:'ENT_MCH_PAY_TEST', params:{appId:record.appId}}">
                  支付测试
                </router-link>
              </a-button>
              <a-button v-if="$access('ENT_MCH_TRANSFER')" type="link">
                <router-link :to="{name:'ENT_MCH_TRANSFER', params:{appId:record.appId}}">
                  发起转账
                </router-link>
              </a-button>
<!--              <a-button v-if="$access('ENT_MCH_APP_DEL')" type="link" style="color: red" @click="delFunc(record.appId)">删除</a-button>-->
            </JeepayTableColumns>
          </template>
        </template>
      </JeepayTable>
    </a-card>
    <!-- 新增应用  -->
    <MchAppAddOrEdit ref="mchAppAddOrEdit" :callbackFunc="searchFunc" />

    <!-- 费率配置页面  -->
    <JeepayPayConfigDrawer ref="jeepayPayWayFeeConfigDrawer" configMode="agentMch" />

    <a-card v-show="vdata.tableType == 'appSaveEdit'" style="background: #f0f2f5; ">
      <JeepayApplicationSave  ref="jeepayApplicationSave" :configMode="'agent'"  @itemRender="getMchAppSave" style="background: #f0f2f5; "/>
    </a-card>
  </page-header-wrapper>
</template>

<script lang="ts" setup>
import { API_URL_MCH_APP, req } from '@/api/manage'
import MchAppAddOrEdit from './AddOrEdit.vue'
import {ref, reactive, onMounted, getCurrentInstance } from 'vue'
import { useRoute } from 'vue-router'
const { $infoBox, $access } = getCurrentInstance()!.appContext.config.globalProperties


// eslint-disable-next-line no-unused-vars
const tableColumns = reactive([
  { key: 'appName',fixed: 'left',  title: '应用名称', dataIndex: 'appName' },
  { key: 'appId', title: '应用ID', },
  { key: 'range', title: '应用类型',},
  { key: 'mchUserName', title: '用户名称', dataIndex: 'mchUserName'},
  { key: 'mchServiceName', title: '服务商名称', dataIndex: 'mchServiceName' },
  { key: 'state', title: '应用状态',},
  // { key: 'defaultFlag', title: '默认',},
  { key: 'createdAt', title: '创建日期', dataIndex: 'createdAt',},
  { key: 'op', title: '操作', fixed: 'right', align: 'center' }
])

  onMounted(() => {
    vdata.searchData.mchNo = useRoute().query.mchNo
    searchFunc()
  })

  const mchAppAddOrEdit =ref()
  const infoTable = ref()

const jeepayApplicationSave = ref()
  const jeepayPayWayFeeConfigDrawer = ref()

  const vdata = reactive({
    tableType:'table',
    btnLoading: false,
    tableColumns: tableColumns,
    searchData: {} as any
  })
function getMchAppSave(e){
  if(e.type == 1){
    vdata.tableType  = e.tableType
    queryFunc()
  }

}
  function  queryFunc () {
    vdata.btnLoading = true
    infoTable.value.refTable(true)
  }

  // 请求table接口数据
  function  reqTableDataFunc(params){
    return req.list(API_URL_MCH_APP, params)
  }

  function  searchFunc () { // 点击【查询】按钮点击事件
    infoTable.value.refTable(true)
  }

  function addFunc() { // 业务通用【新增】 函数
    mchAppAddOrEdit.value.show(vdata.searchData['mchNo'])
  }

  function editFunc (recordId) { // 业务通用【修改】 函数
    mchAppAddOrEdit.value.show(vdata.searchData['mchNo'], recordId)
  }

  function  delFunc (appId) { 
    $infoBox.confirmDanger('确认删除？', '', () => {
      req.delById(API_URL_MCH_APP, appId).then(res => {
        $infoBox.message.success('删除成功！')
        searchFunc()
      })
    })
  }

  const showFeeConfigList = function (recordId) { // 支付费率配置
    jeepayPayWayFeeConfigDrawer.value.show(recordId)
  }

function  getAddFunc(type){
  vdata.tableType  = type
  jeepayApplicationSave.value.show()
}
 
</script>

<style lang="less" scoped>
</style>
