<template>
  <page-header-wrapper>
    <a-card>
      <JeepaySearchForm :searchFunc="searchFunc" :resetFunc="() => { vdata.searchData= {} }">
        <jeepay-text-up v-model:value="vdata.searchData['isvName']" :placeholder="'渠道名称'" />
        <jeepay-text-up v-model:value="vdata.searchData['isvNo']" :placeholder="'渠道号'" />
        <a-form-item label="" class="table-search-item">
          <a-select v-model:value="vdata.searchData['ownerType']" placeholder="渠道号所属">
            <a-select-option value="">全部</a-select-option>
            <a-select-option value="'AGENT'">服务商</a-select-option>
            <a-select-option value="'MCH'">用户</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>
        </a-form-item>
      </JeepaySearchForm>
      <!-- 列表渲染 -->
      <JeepayTable
        ref="infoTable"
        :initData="true"
        :reqTableDataFunc="reqTableDataFunc"
        :tableColumns="tableColumns"
        :searchData="vdata.searchData"
        rowKey="isvNo"
        @btnLoadClose="vdata.btnLoading=false"
      >
        <template #topBtnSlot>
          <a-button v-if="$access('ENT_ISV_INFO_ADD')" type="primary" @click="addFunc"><PlusOutlined /> 新建</a-button>
        </template>


        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'isvName'">
            <b>{{ record.isvName }}</b>
          </template>
          <template v-if="column.key === 'isvShortName'">
            <b>{{ record.isvShortName }}</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 === 'isvNosushu'">

            <a-popover placement="top">
              <template #content>
                所属ID：{{ record.ownerNo }}
              </template>
              <span v-if="record.ownerType == 'AGENT'">服务商</span>
              <span v-if="record.ownerType == 'MCH'">用户</span>
            </a-popover>
          </template>

          <template v-if="column.key === 'op'">
            <JeepayTableColumns>
              <a-button v-if="$access('ENT_ISV_INFO_EDIT')" type="link" @click="editFunc(record.isvNo)">修改</a-button>
              <a-button v-if="$access('ENT_ISV_PAY_CONFIG')" type="link" @click="showOauth2ConfigList(record.isvNo)">oauth2</a-button>
<!--              <a-button v-if="$access('ENT_ISV_PAY_CONFIG')" type="link" @click="showPayIfConfigList(record.isvNo)">支付配置</a-button>-->
              <a-button v-if="$access('ENT_ISV_PAY_CONFIG')" type="link" @click="showPayIfConfigList(record)">支付配置</a-button>
              <a-button v-if="$access('ENT_ISV_PAY_CONFIG')" type="link" @click="showPayTransferConfigList(record)">代付配置</a-button>
              <a-button v-if="$access('ENT_ISV_INFO_DEL')" type="link" style="color: red" @click="delFunc(record.isvNo)">删除</a-button>
            </JeepayTableColumns>
          </template>
        </template>
      </JeepayTable>
    </a-card>
    <!-- 新增页面组件  -->
    <InfoAddOrEdit ref="infoAddOrEdit" :callbackFunc="searchFunc" />

    <!-- 费率配置页面  -->
    <JeepayPayConfigDrawer ref="jeepayPayConfigDrawerRef" configMode="mgrIsv" />
    <!-- 费率配置页面  -->
    <JeepayPayTransferConfigDrawer ref="jeepayPayTransferConfigRef" configMode="mgrIsv" />

    <JeepayPaymentConfigDrawer ref="JeepayPaymentConfigDrawerRef" configMode="mgrIsv" />

    <!-- oauth2配置  -->
    <JeepayOauth2ConfigDrawer ref="jeepayOauth2ConfigDrawer" configMode="mgrIsv" />
  </page-header-wrapper>
</template>
<script setup lang="ts">

import { API_URL_ISV_LIST, req } from '@/api/manage'
import InfoAddOrEdit from './AddOrEdit.vue'
import { ref, reactive, getCurrentInstance, onMounted } from 'vue'
// 导入全局函数
const { $infoBox, $access } = getCurrentInstance()!.appContext.config.globalProperties

// infoTable组件
const infoTable = ref()

const infoAddOrEdit = ref()

const jeepayPayTransferConfigRef = ref()
const jeepayPayConfigDrawerRef = ref()
const JeepayPaymentConfigDrawerRef = ref()

const jeepayOauth2ConfigDrawer = ref()

// eslint-disable-next-line no-unused-vars
const tableColumns = ref([
  { key: 'isvName', title: '渠道名称' },
  { key: 'isvShortName', title: '渠道简称' },
  { key: 'isvNo', title: '渠道号', dataIndex: 'isvNo' },
  { key: 'isvNosushu', title: '渠道号所属', dataIndex: 'isvNosushu' },
  { key: 'state', title: '渠道状态' },
  { key: 'createdAt', title: '创建日期', dataIndex: 'createdAt' },
  { key: 'op', title: '操作' , fixed: 'right', align: 'center' }
])

const vdata = reactive({
      btnLoading: false,
      searchData: {}
})
    
    // 请求table接口数据
    function reqTableDataFunc(params) {
      return req.list(API_URL_ISV_LIST, params)
    }
    function delFunc (recordId) {
      $infoBox.confirmDanger('确认删除？', '请确认该渠道下未分配商户', () => {
        req.delById(API_URL_ISV_LIST, recordId).then(res => {
          infoTable.value.refTable(false)
          $infoBox.message.success('删除成功')
        })
      })
    }
    function searchFunc () { // 点击【查询】按钮点击事件
      infoTable.value.refTable(true)
    }
    function addFunc () { // 业务通用【新增】 函数
      infoAddOrEdit.value.show()
    }
    function editFunc (recordId) { // 业务通用【修改】 函数
      infoAddOrEdit.value.show(recordId)
    }
    function showPayIfConfigList (record) { // 支付参数配置
      jeepayPayConfigDrawerRef.value.show(record.isvNo,1,record.isvShortName)
      // JeepayPaymentConfigDrawerRef.value.show(record.isvNo,1)
    }

function showPayTransferConfigList (record) { // 支付参数配置
  jeepayPayTransferConfigRef.value.show(record.isvNo,1,record.isvShortName)
  // JeepayPaymentConfigDrawerRef.value.show(record.isvNo,1)
}


    function showOauth2ConfigList (recordId) { // oauth
      jeepayOauth2ConfigDrawer.value.show(recordId)
    }

</script>
