<template>
  <page-header-wrapper>
    <a-card>
      <JeepaySearchForm :searchFunc="searchFunc" :resetFunc="onReset">
        <a-form-item label="" class="table-search-item">
          <JeepayDateRangePicker ref="dateRangePicker" v-model:value="vdata.searchData.queryDateRange" customDateRangeType="dateTime" />
        </a-form-item>
        <jeepay-text-up v-model:value="vdata.searchData.rid" :placeholder="'提现单号'" />
        <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.channelSubMchId" :placeholder="'渠道子商户号'" />
        <JeepaySearchInfoInput v-model:value="vdata.searchData.mchNo" placeholder="用户号" :textUpStyle="true" :mchNoAndName="true" showType="MCH" />
        <JeepaySearchInfoInput v-model:value="vdata.searchData.appId" placeholder="应用AppId" :textUpStyle="true" :mchNoAndName="true" showType="MCH_APP" />
        <JeepaySelect ref="stateRef" placeholder="提现状态" :reset="isReset">
          <a-select v-model:value="vdata.searchData.state" @change="stateRef.textupHandle()">
            <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>
        </JeepaySelect>
      </JeepaySearchForm>
     
      <!-- 列表渲染 -->
      <JeepayTable
        ref="recordTable"
        :initData="true"
        :reqTableDataFunc="reqTableDataFunc"
        :tableColumns="tableColumns"
        :searchData="vdata.searchData"
        rowKey="rid"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'rid'">
            <a @click="detailFunc(record.rid)"><b>{{ record.rid }}</b></a>
          </template>
          
          <template v-if="column.key === 'mch'">
            <p>{{ record.mchName }} ({{ record.mchNo }})</p>
          </template>

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

          <template v-if="column.key === 'state'">
            <a-badge v-if="record.state == 0" status="default" text="提现单创建" />
            <a-badge v-else-if="record.state == 1" status="warning" text="提现中" />
            <a-badge v-else-if="record.state == 2" status="success" text="提现成功" /> 
            <a-badge v-else-if="record.state == 3" status="error" text="提现失败" /> 
            <a-tooltip v-if="record.failInfo && record.state == 3" :title="record.failInfo"><info-circle-outlined /></a-tooltip>
          </template>

          <template v-if="column.key === 'currentBalance'">￥{{ record.currentBalance ? (record.currentBalance/100).toFixed(2) : 0 }}</template>
          <template v-if="column.key === 'cashoutAmount'">￥{{ record.cashoutAmount ? (record.cashoutAmount/100).toFixed(2) : 0 }}</template>
        </template>
      </JeepayTable>
    </a-card>
    <!-- 详情页面组件  -->
    <InfoDetail ref="infoDetail" />
  </page-header-wrapper>
</template>

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

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

const tableColumns = reactive([
  { key: 'rid', title: '提现单号'},
  { key: 'mch', title: '商户'},
  { key: 'ifCode', title: '支付接口'},
  { dataIndex: 'channelSubMchId', title: '渠道子商户号'},
  { key: 'currentBalance', title: '提现前余额', dataIndex: 'currentBalance'},
  { key: 'cashoutAmount', title: '提现金额', dataIndex: 'cashoutAmount'},
  { key: 'state', title: '状态'},
  { dataIndex: 'successTime', title: '成功时间'},
  { dataIndex: 'createdAt', title: '创建时间'},
])

const recordTable = ref()
const stateRef = ref()
const infoDetail = ref()
const ifCodeRef = ref()
const dateRangePicker = ref()

const vdata = reactive({
  btnLoading: false,
  searchData: {queryDateRange: 'today'} as any
}) as any

onMounted(() => {
   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
    })
   }
  searchFunc()
})

// 请求table接口数据
function reqTableDataFunc (params) {
  return req.list(ENT_MCH_CHANNEL_ACCOUNT + '/records', params)
}
function searchFunc() { // 点击【查询】按钮点击事件
  recordTable.value.refTable(true)
}
function detailFunc (recordId: any) { // 详情
    infoDetail.value.show(recordId)
  }

let isReset = ref(0) // 下拉搜索框是否重置

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

