<template>
  <a-drawer 
    v-model:visible="vdata.visible" 
    :destroyOnClose="true" 
    :title="'统计明细'" 
    :body-style="{ paddingBottom: '80px' }" 
    width="80%"
    @close="onClose"
  >
    <a-tabs v-model:activeKey="vdata.activeKey" :size="'large'">
      <a-tab-pane key="1" tab="门店统计">
        <accountDetailPane :method="'store'" :tableColumns="tableStoreColumns" :mchNo="vdata.mchNo" :date="vdata.date" />
      </a-tab-pane>
      <a-tab-pane key="2" tab="支付方式统计">
        <accountDetailPane :method="'wayCode'" :tableColumns="tableWayCodeColumns" :mchNo="vdata.mchNo" :date="vdata.date" />
      </a-tab-pane>
      <a-tab-pane key="3" tab="通道统计">
        <accountDetailPane :method="'wayCodeType'" :tableColumns="tableChannelColumns" :mchNo="vdata.mchNo" :date="vdata.date" />
      </a-tab-pane>
    </a-tabs>
  </a-drawer>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import accountDetailPane from './accountDetailPane.vue'
const vdata: any = reactive({
  visible: false,
  mchNo: '',
  activeKey: '1',
  date: ''
})
// 门店表头
let tableStoreColumns = reactive([
  { key: 'storeName', title: '门店名称', dataIndex: 'storeName', },
  { key: 'storeId', title: '门店编号', dataIndex: 'storeId', },
  { key: 'totalSuccAmt', title: '成交金额', tooltipTitle: '支付成功的订单金额，包含部分退款及全额退款的订单', dataIndex: 'totalSuccAmt', },
  { key: 'totalRefundAmt', title: '退款金额', dataIndex: 'totalRefundAmt'},
  { key: 'totalRefundNum', title: '退款笔数', tooltipTitle: '实际退款订单笔数，若一笔已成交订单退款多次，则计多次', dataIndex: 'totalRefundNum'},
  { key: 'totalFeeAmt', title: '手续费', tooltipTitle: '成交订单所产生的交易手续费和垫资手续费', dataIndex: 'totalFeeAmt'},
  { key: 'totalEntryAmt', title: '入账金额', tooltipTitle: '扣除已退款金额及手续费，入账金额为商户实际到账金额', dataIndex: 'totalEntryAmt'},
  // { key: 'totalFeeAmt', title: '手续费', tooltipTitle: '成交订单产生的手续费金额' , dataIndex: 'totalFeeAmt', },
  // { key: 'totalRefundAmt', title: '退款金额', dataIndex: 'totalRefundAmt', },
  // { key: 'totalRefundFeeAmt', title: '手续费回退', tooltipTitle: '退款订单产生的手续费退费金额' , dataIndex: 'totalRefundFeeAmt', },
  // { key: 'totalRefundNum', title: '退款笔数', tooltipTitle: '实际退款订单笔数，若一笔已成交订单退款多次，则计多次', dataIndex: 'totalRefundNum', },
  { key: 'totalSuccNum', title: '成交笔数/总交易笔数', dataIndex: 'totalSuccNum', },
  { key: 'succRate', title: '成功率', tooltipTitle: '成交笔数与总订单笔数除得的百分比', dataIndex: 'succRate', },
])
// 支付方式表头
let tableWayCodeColumns = reactive([
  { key: 'name', title: '支付类型',},
  { key: 'totalSuccAmt', title: '成交金额', tooltipTitle: '支付成功的订单金额，包含部分退款及全额退款的订单', dataIndex: 'totalSuccAmt', },
  { key: 'totalRefundAmt', title: '退款金额', dataIndex: 'totalRefundAmt'},
  { key: 'totalRefundNum', title: '退款笔数', tooltipTitle: '实际退款订单笔数，若一笔已成交订单退款多次，则计多次', dataIndex: 'totalRefundNum'},
  { key: 'totalEntryAmt', title: '入账金额', tooltipTitle: '扣除已退款金额及手续费，入账金额为商户实际到账金额', dataIndex: 'totalEntryAmt'},
  { key: 'totalSuccNum', title: '成交笔数/总交易笔数', dataIndex: 'totalSuccNum', },
  { key: 'succRate', title: '成功率', tooltipTitle: '成交笔数与总订单笔数除得的百分比', dataIndex: 'succRate', },
])
// 支付类型（渠道）表头
let tableChannelColumns = reactive([
  // { key: 'wayType', title: '支付渠道', dataIndex: 'wayType', },
  { key: 'name', title: '渠道名称',},
  { key: 'totalSuccAmt', title: '成交金额', tooltipTitle: '支付成功的订单金额，包含部分退款及全额退款的订单', dataIndex: 'totalSuccAmt', },
  { key: 'totalRefundAmt', title: '退款金额', dataIndex: 'totalRefundAmt'},
  { key: 'totalRefundNum', title: '退款笔数', tooltipTitle: '实际退款订单笔数，若一笔已成交订单退款多次，则计多次', dataIndex: 'totalRefundNum'},
  { key: 'totalEntryAmt', title: '入账金额', tooltipTitle: '扣除已退款金额及手续费，入账金额为商户实际到账金额', dataIndex: 'totalFinalAmt'},
  { key: 'totalSuccNum', title: '成交笔数/总交易笔数', dataIndex: 'totalSuccNum', },
  { key: 'succRate', title: '成功率', tooltipTitle: '成交笔数与总订单笔数除得的百分比', dataIndex: 'succRate', },
])

function show(recordId, date) { // 弹层打开事件
  vdata.activeKey = '1'
  vdata.visible = true
  vdata.mchNo = recordId
  vdata.date = date
}

function onClose() {
  vdata.visible = false
}

defineExpose({
  show //抛出show函数给父组件
})
</script>
