<template>
  <page-header-wrapper>
    <a-card class="table-card">
      <JeepaySearchForm :searchFunc="searchFunc" :resetFunc="resetFunc">
        <a-form-item label="" class="table-search-item">
          <JeepayDateRangePicker
              v-if="vdata.showDateTimeRage"
              ref="dateRangePicker"
              v-model:value="vdata.searchData['queryDateRange']"
              customDateRangeType="date"
          />
        </a-form-item>
        <jeepay-text-up  v-model:value="vdata.searchData['mchNo']" :placeholder="'用户号/名称/手机号'" />
        <jeepay-text-up  v-model:value="vdata.searchData['agentNo']" :placeholder="'资金账户名称'" />
        <jeepay-text-up  v-model:value="vdata.searchData['agentNo']" :placeholder="'记账本ID'" />
      </JeepaySearchForm>

      <!-- 列表渲染 -->
      <JeepayTable
          ref="infoTable"
          :init-data="false"
          :req-table-data-func="reqTableDataFunc"
          :table-columns="tableColumns"
          :statisticsIsShow="true"
          :search-data="vdata.searchData"
          row-key="mchNo"
          :tableExportFunc="tableExportFunc"
          @btnLoadClose="btnLoading = false"
          @handleTableChange="handleChange"
      >
        <template #headerCell="{ column }">
          <span v-if="column.tooltipTitle">
            {{ column.title }}
            <a-tooltip :title="column.tooltipTitle"><info-circle-outlined /></a-tooltip>
          </span>
        </template>
        <!--        <template #topBtnSlot>-->
        <!--          <a-button type="primary" @click="tableExportFunc">-->
        <!--            <plus-outlined />导出表格-->
        <!--          </a-button>-->
        <!--        </template>-->
        <template #statistics>
          <div class="statistics-list">
            <div v-for="(item, index) in count" :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 class="amount-num">{{ item.content }}</span>
              </div>
            </div>
          </div>
        </template>
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'bankTotalAmount'">
            <b style="color: #15B86C;">￥{{ (record.bankTotalAmount / 100).toFixed(2)}}  / {{ record.bankTotalCount }}</b>
          </template>
          <template v-if="column.key === 'zfbTotalAmount'">
            <b style="color: #FF6848;">￥{{ (record.zfbTotalAmount / 100).toFixed(2) }} / {{ record.zfbTotalCount }}</b>
          </template>
          <template v-if="column.key === 'fee'">
            <b style="color: #FF8800;">{{ record.fee }}%</b>
          </template>
        </template>
      </JeepayTable>
    </a-card>
    <!-- 明细页面组件  -->
  </page-header-wrapper>
</template>
<script setup lang="ts">

import {API_URL_STATISTIC, req, $exportExcel, exportExcelUrl, API_URL_TRANSFERORDERS_STATSDATA} from '@/api/manage'
import { ref, reactive, onMounted, watch, getCurrentInstance } from 'vue'
import { useRoute } from 'vue-router'
import fileDownload from 'js-file-download'
import dateUtil from '@/utils/dateUtil.js'
const { $infoBox, $access, $hasAgentEnt } = getCurrentInstance()!.appContext.config.globalProperties

const accountDetail = ref()
const infoTable = ref()
let tableColumns = reactive([
  { key: 'statsDate', title: '时间',  dataIndex: 'statsDate'},
  { key: 'transChannelMchNo', title: '记账本信息', dataIndex: 'transChannelMchNo' },
  { key: 'zfbTotalAmount', title: '支付宝实发金额/实发笔数', tooltipTitle: '支付成功的实发金额', dataIndex: 'totalSuccAmt', },
  { key: 'bankTotalAmount', title: '银行卡实发金额/实发笔数', dataIndex: 'totalRefundAmt'},
  { key: 'fee', title: '手续费', tooltipTitle: '实发订单所产生的交易手续费', dataIndex: 'totalFeeAmt'},
])

let btnLoading = ref(false)
let count: any = ref([]) // 数据统计数组
const dateRangePicker = ref()
const vdata: any = reactive({
  searchData: { method: 'mch', queryDateRange: 'today', sortField: 'totalSuccAmt', sortOrder: 'descend' },
  showDateTimeRage: false, //是否显示时间搜索组件
  parameterDate: 'today'
})

vdata.searchData['agentNo'] = useRoute().query.agentNo
vdata.searchData['isvNo'] = useRoute().query.isvNo
onMounted(() => {
  if (useRoute().query.queryDate) {
    vdata.searchData['queryDateRange'] = dateUtil.parseQueryStringByRange(useRoute().query.queryDate)
  } else if (useRoute().query.queryDateRange) {
    let date = useRoute().query.queryDateRange as any
    if (date == 7) {
      date = 'near2now_7'
    } else if (date == 30) {
      date = 'near2now_30'
    } else if (date.indexOf('_') > -1) {
      date = dateUtil.parseQueryStringByRange(date)
    }
    vdata.searchData['queryDateRange'] = date
  }
  searchFunc()
  vdata.showDateTimeRage = true
})

function handleChange(sorter) {
  vdata.searchData['sortField'] = sorter.columnKey
  vdata.searchData['sortOrder'] = sorter.order
}

function resetFunc() {
  dateRangePicker.value.returnSelectModel()
  vdata.searchData = { method: 'mch', queryDateRange: 'today', sortField: 'totalSuccAmt', sortOrder: 'descend' }
}

// 请求table接口数据
function reqTableDataFunc(params: any) {
  params.method = 'mch'
  if (!params.sortField) {
    params.sortField = 'totalSuccAmt'
    params.sortOrder = 'descend'
  }
  reqTableCountFunc(params)
  return req.list(API_URL_TRANSFERORDERS_STATSDATA, params)
}

// 请求table接口数据
function reqTableCountFunc(params: any) {
  req.list(API_URL_STATISTIC + '/total', params).then(res => {
    count.value = [
      {title: '总实发金额/笔数', symbol: 'add', textColor: '#1A66FF', content: ((res.totalSuccAmt) / 100).toFixed(2)},
      {type: 'line'},
      {title: '支付宝实发金额/笔数', symbol: 'sub', content: ((res.totalRefundAmt) / 100).toFixed(2)},
      {type: 'line'},
      {title: '银行卡实发金额/笔数', content: (res.totalRefundNum)},
    ]
  })
}

function searchFunc() { // 点击【查询】按钮点击事件
  vdata.parameterDate = vdata.searchData.queryDateRange
  infoTable.value.refTable(true)
}

function detailFunc(recordId, date) {
  accountDetail.value.show(recordId, date)
}

function tableExportFunc() {
  return $exportExcel(exportExcelUrl.statistic, Object.assign({}, vdata.searchData, {})).then(res => {
    fileDownload(res.data, '商户统计.xlsx')
  }).catch((error) => { console.log(error) })
}



</script>
