<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="billTypeRef" placeholder="账单类型" :reset="isReset">
          <a-select v-model:value="vdata.searchData.billType" @change="billTypeRef.textupHandle()">
            <a-select-option value="">全部</a-select-option>
            <a-select-option value="pay">支付</a-select-option>
            <a-select-option value="refund">退款</a-select-option>
          </a-select>
        </JeepaySelect>
      </JeepaySearchForm>

      <!-- 列表渲染 -->
      <JeepayTable
        ref="infoTable"
        :initData="true"
        :reqTableDataFunc="reqTableDataFunc"
        :tableColumns="tableColumns"
        :searchData="vdata.searchData"
        :statisticsIsShow="$access('ENT_CHECK_CHANNEL_BILL_COUNT')"
        rowKey="id"
        @btnLoadClose="vdata.btnLoading=false"
      >
        <template #statistics>
          <div class="statistics-list">
            <div v-for="(item, index) in vdata.orderCountList" :key="index" class="item">
              <div v-if="item.type == 'line'" class="line" />
              <div class="title">{{ item.title }}</div>
              <div v-if="item.title" class="amount" :style="{color: item.textColor}">
                <!-- <span v-if="item.symbol" class="symbol">{{ item.symbol == 'add' ? '+' : '-' }}</span> -->
                <span class="amount-num">{{ item.content }}</span>元
              </div>
              <div v-if="item.count >= 0" class="detail">
                <span>{{ item.count }}笔</span>
                <!-- <span v-if="item.detail" class="detail-text" @click="payDetail.showModal()">明细</span> -->
              </div>
            </div>
          </div>
        </template>
        <template #bodyCell="{column,record}">
          <template v-if="column.key == 'ifCode'">
            <span>{{ record.ifName + " (" + record.ifCode + ")" }}</span>
          </template>
         
          <template v-if="column.key == 'orderId'">
            <p>平台: {{ record.orderId }}</p>
            <p>渠道: {{ record.channelOrderNo }}</p>
          </template>

          <template v-if="column.key == 'billType'">
            <a-badge :color="record.billType == 'pay'?'green':'geekblue'" :text="record.billType == 'pay'?'支付':'退款'" />
          </template>

          <template v-if="column.key === 'channelAmount'">￥{{ (record.channelAmount/100).toFixed(2) }}</template>
          <template v-if="column.key === 'channelFeeAmount'">￥{{ (record.channelFeeAmount/100).toFixed(2) }}</template>

          <template v-if="column.key == 'channelState'">
            <a-tag
              :key="record.channelState"
              :color="record.channelState === 2?'green':record.channelState === 5?'geekblue':'volcano'"
            >
              {{ record.channelState === 2?'支付成功':record.channelState === 5?'退款成功':'未知' }}
            </a-tag>
          </template>

          <template v-if="column.key == 'op'">
            <!-- 操作列插槽 -->
            <a-button v-if="$access('ENT_CHECK_BATCH_VIEW')" type="link" @click="detailFunc(record.id)">详情</a-button>
          </template>
        </template>
      </JeepayTable>
    </a-card>

    <!-- 详情页面组件  -->
    <InfoDetail ref="infoDetail" />
  </page-header-wrapper>
</template>
<script setup lang="ts">
import { API_URL_CHANNEL_BILL_LIST, API_URL_IFDEFINES_LIST, req, $channelBillCount } from '@/api/manage'
import { reactive, ref, getCurrentInstance, onMounted } from 'vue'
import dateUtil from '@/utils/dateUtil.js'
import InfoDetail from './Detail.vue'

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

const tableColumns = reactive([
  { key: 'batchNo', title: '对账批次号', dataIndex: 'batchNo', width: 210, minWidth: 200, maxWidth: 240},
  { key: 'ifCode', title: '支付接口', dataIndex: 'ifCode', width: 160, minWidth: 160, maxWidth: 180 },
  { key: 'billType', title: '账单类型', dataIndex: 'billType', width: 100, minWidth: 100, maxWidth: 250 },
  { key: 'orderId', title: '订单号', dataIndex: 'orderId', width: 300 },
  { key: 'channelAmount', title: '交易金额', ellipsis: true, width: 108, minWidth: 108 },
  { key: 'channelFeeAmount', title: '手续费', ellipsis: true, width: 100, minWidth: 100 },
  { key: 'channelState', title: '交易状态', dataIndex: 'channelState', width: 120, minWidth: 120, maxWidth: 160 },
  { title: '交易成功时间', dataIndex: 'channelSuccessAt', width: 120, minWidth: 180, maxWidth: 200 },
  // { key: 'createdAt', title: '创建时间', dataIndex: 'createdAt', width: 180, minWidth: 180, maxWidth: 230 },
  { key: 'op', title: '操作', width: '120px', fixed: 'right', align: 'center' }
])

const infoTable = ref()
const billTypeRef = ref()
const infoDetail = ref()
const dateRangePicker = ref()

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

// 数据统计
function getBillCount() {
  if($access('ENT_CHECK_CHANNEL_BILL_COUNT')){
    $channelBillCount(vdata.searchData).then( res => {
      vdata.orderCountList = [ 
        {title: '交易总金额', symbol: 'add', textColor: '#1A66FF', content: ((res.payAmount) / 100).toFixed(2)},
        {type: 'line'},
        {title: '订单总数', content: (res.payAmount / 100).toFixed(2), count: res.payCount, detail: true},
        {type: 'line'},
        {title: '手续费总金额', content: (res.feeAmount / 100).toFixed(2)},
        {type: 'line'},
        {title: '退款订单总数', content: (res.refundAmount / 100).toFixed(2), count: res.refundCount, textColor: '#faad14'},
      ]
    })
  }
}

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

  getBillCount()
})

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

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

  getBillCount() // 点击查询按钮，调用数据统计方法
}

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

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

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

</script>
