<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="date" />
        </a-form-item>
        <jeepay-text-up v-model:value="vdata.searchData.batchNo" :placeholder="'对账批次号'" />
        <a-form-item label="" class="table-search-item">
          <a-select v-model:value="vdata.searchData.ifCode" placeholder="支付接口">
            <a-select-option value="">全部</a-select-option>
            <a-select-option v-for="item in vdata.ifCodeList" :key="item.ifCode" :value="item.ifCode">{{ item.ifName }}</a-select-option>
          </a-select>
        </a-form-item>
        <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>
        </JeepaySelect>
        <JeepaySelect ref="releaseStateRef" placeholder="解析结果" :reset="isReset">
          <a-select v-model:value="vdata.searchData.releaseState" @change="releaseStateRef.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>
        </JeepaySelect>
      </JeepaySearchForm>

      <!-- 列表渲染 -->
      <JeepayTable
        ref="infoTable"
        :initData="true"
        :reqTableDataFunc="reqTableDataFunc"
        :tableColumns="tableColumns"
        :searchData="vdata.searchData"
        rowKey="batchNo"
        @btnLoadClose="vdata.btnLoading=false"
      >
        <template #bodyCell="{column,record}">
          <template v-if="column.key == 'ifCode'">
            <span>{{ record.ifName }} ({{ record.ifCode }})</span>
          </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 == 'releaseState'">
            <a-badge :status="record.releaseState === 0?'error':'processing'" :text="record.releaseState === 0?'解析失败':'解析成功'" />
          </template>

          <template v-if="column.key == 'billDate'">
            {{ dateUtil.formatDate(record.billDate) }}
          </template>
          <template v-if="column.key == 'op'">
            <JeepayTableColumns>
              <!-- 操作列插槽 -->
              <a-button v-if="$access('ENT_CHECK_BATCH_VIEW')" type="link" @click="detailFunc(record.batchNo)">详情</a-button>
              <a-button v-if="$access('ENT_CHECK_BATCH_RELOAD') && !record.releaseState && !record.state" type="link" @click="reloadFunc(record.batchNo, 'release')">重新「下载&对账」</a-button>
              <a-button v-if="$access('ENT_CHECK_BATCH_RELOAD') && record.releaseState && !record.state" type="link" @click="reloadFunc(record.batchNo, 'check')">重新「对账」</a-button>
              <a-button v-if="$access('ENT_CHECK_BATCH_RELOAD') && record.releaseState && !record.state" type="link" @click="toDiffBillFunc(record.batchNo)">差异账单</a-button>
            </JeepayTableColumns>
          </template>
        </template>
      </JeepayTable>
    </a-card>

    <!-- 详情页面组件  -->
    <InfoDetail ref="infoDetail" />
  </page-header-wrapper>
</template>
<script setup lang="ts">
import { API_URL_CHECK_BATCH_LIST, API_URL_IFDEFINES_LIST, req } from '@/api/manage'
import { reactive, ref, getCurrentInstance, onMounted } from 'vue'
import dateUtil from '@/utils/dateUtil.js'
import InfoDetail from './Detail.vue'
import router from '@/router'
const { $access, $infoBox, } = getCurrentInstance()!.appContext.config.globalProperties

const tableColumns = reactive([
  { key: 'batchNo', title: '对账批次号', dataIndex: 'batchNo' },
  { key: 'ifCode', title: '支付接口', dataIndex: 'ifCode' },
  { key: 'billDate', title: '对账日期', dataIndex: 'billDate' },
  { key: 'state', title: '批次处理状态', dataIndex: 'state' },
  { key: 'releaseState', title: '账单解析结果', dataIndex: 'releaseState' },
  { key: 'createdAt', title: '创建时间', dataIndex: 'createdAt' },
  { key: 'op', title: '操作', width: '230px', fixed: 'right', align: 'center' }
])

const infoTable = ref()
const infoDetail = ref()
const stateRef = ref()
const releaseStateRef = ref()
const dateRangePicker = ref()

const vdata = reactive ({
  ifCodeList: [] as any,
  tableColumns: tableColumns,
  searchData: {queryDateRange: 'yesterday'} as any,
  btnLoading: false
})

onMounted(() => {
  req.list(API_URL_IFDEFINES_LIST, { 'state': 1, 'isSupportCheckBill': 1 }).then(res => { // 通道下拉选择列表
    vdata.ifCodeList = res
  })
})


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

function searchFunc () { // 点击【查询】按钮点击事件
  vdata.btnLoading = true // 打开查询按钮上的loading
  infoTable.value.refTable(true)
}

function detailFunc(recordId) { // 业务通用【修改】 函数
  infoDetail.value.show(recordId)
}

function toDiffBillFunc(recordId) { // 跳转到差异账单
  router.push({
    path: '/diff',
    query: { batchNo: recordId }
  })
}

function reloadFunc(recordId, reloadType) { // 重新发起对账
  $infoBox.confirmDanger('确定对当前批次重新对账？', '', () => {
    req.add(API_URL_CHECK_BATCH_LIST + '/reload/' + recordId, { reloadType: reloadType }).then(res => {
      infoTable.value.refTable(true)
      $infoBox.message.success('重新对账完成！')
    })
  })
}

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

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

</script>
