<template>
  <page-header-wrapper>
    <a-card>
      <JeepaySearchForm :searchFunc="searchFunc" :resetFunc="onReset">
        <JeepaySelect ref="appIdRef" placeholder="应用AppId" :reset="isReset" style="width:330px">
          <a-select v-model:value="vdata.searchData.appId" @change="appIdRef.textupHandle()">
            <template v-for="(item) in vdata.mchAppList" :key="item.appId">
              <a-select-option :value="item.appId">{{ item.appName }}[{{ item.appId }}]</a-select-option>
            </template>
          </a-select>
        </JeepaySelect>
        <JeepaySelect ref="ifCodeRef" placeholder="支付接口" :reset="isReset">
          <a-select v-model:value="vdata.searchData.ifCode" @change="ifCodeRef.textupHandle()">
            <a-select-option value="">全部</a-select-option>
            <template v-for="(item) in vdata.ifCodeList" :key="item.ifCode">
              <a-select-option :value="item.ifCode">{{ item.ifName }}[{{ item.ifCode }}]</a-select-option>
            </template>
          </a-select>
        </JeepaySelect>
        <jeepay-text-up v-model:value="vdata.searchData.channelMchId" :placeholder="'渠道子商户号'" />
      </JeepaySearchForm>
     
      <!-- 列表渲染 -->
      <JeepayTable
        ref="infoTable"
        :initData="false"
        :reqTableDataFunc="reqTableDataFunc"
        :tableColumns="tableColumns"
        :searchData="vdata.searchData"
        rowKey="ifCode"
      >
        <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 === 'currentBalance'">￥{{ (record.currentBalance/100).toFixed(2) }}</template>

          <template v-if="column.key === 'ifCode'">
            <span>{{ record.ifName }} ({{ record.ifCode }})</span>
          </template>

          <template v-if="column.key === 'op'">
            <!-- 操作列插槽 -->
            <JeepayTableColumns>
              <a-button v-if="$access('ENT_MCH_CHANNEL_CASHOUT')" type="link" @click="cashoutFunc(record)">提现</a-button>
            </JeepayTableColumns>
          </template>
        </template>
      </JeepayTable>
    </a-card>

    <!-- 提现弹出框 -->
    <CashoutModal ref="cashoutModalInfoRef" :callbackFunc="searchFunc" />
  </page-header-wrapper>
</template>

<script setup lang="ts">
import {ENT_MCH_CHANNEL_ACCOUNT, API_URL_MCH_APP, req, API_URL_IFDEFINES_LIST} from '@/api/manage'
import CashoutModal from './CashoutModal.vue'
import {ref, reactive, onMounted, getCurrentInstance } from 'vue'

import { useRoute } from 'vue-router'

const tableColumns = reactive([
  { key: 'ifCode', title: '支付接口代码'},
  { dataIndex: 'channelMchId', title: '渠道子商户号'},
  { key: 'currentBalance', title: '当前余额', dataIndex: 'currentBalance'},
  { key: 'op', title: '操作', fixed: 'right', align: 'center' }
])

const { $access } = getCurrentInstance()!.appContext.config.globalProperties

const infoTable = ref()
const cashoutModalInfoRef = ref()
const appIdRef = ref()
const ifCodeRef = ref()
let isReset = ref(0) // 下拉搜索框是否重置

const vdata = reactive({
  mchNo: '',
  searchData: {} as any
}) as any

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

  req.list(API_URL_MCH_APP, { pageSize: -1, mchNo: vdata.searchData.mchNo }).then(res => {
    vdata.mchAppList = res.records
    if(vdata.mchAppList.length > 0){
      vdata.searchData.appId = vdata.mchAppList[0].appId
      appIdRef.value.textupHandle()
      searchFunc()
    }
  })

  if($access('ENT_PC_IF_DEFINE_LIST')){
    req.list(API_URL_IFDEFINES_LIST, { 'state': 1, 'is_support_cashout': 1, 'is_open_cashout': 1 }).then(res => { // 通道下拉选择列表
      vdata.ifCodeList = res
    })
   }
})

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

function cashoutFunc (record) { // 发起提现
  cashoutModalInfoRef.value.show(record.ifCode, record.currentBalance, vdata.searchData.appId)
}

function onReset(){
  isReset.value++ // 下拉搜索框重置
  //重置搜索内容
  vdata.searchData = {}
}
</script>
