<template>
  <div class="container">
    <Breadcrumb :items="['订单', '订单汇总']" />
    <a-card class="general-card" title="订单汇总">
      <a-table
        :columns="columns"
        :loading="loading"
        :data="renderData"
        :pagination="{
          current: pagination.current,
          pageSize: pagination.pageSize,
          total: pagination.total,
          pageSizeOptions: [10, 20, 50, 100],
          showPageSize: true
        }"
        :bordered="false"
        column-resizable:bordered="{cell:true}"
        @page-change="onPageChange"
        @page-size-change="onPageSizeChange"
      >
        <template #index="{ rowIndex }">
          {{ rowIndex + 1 + (pagination.current - 1) * pagination.pageSize }}
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
import { Pagination } from '@/types/global';
import { onMounted, reactive, ref } from 'vue';
import { OrderSummaryRecord, queryOrderSummaryList } from '@/api/order-summary';
import useLoading from '@/hooks/loading';
import { TableColumnData } from '@arco-design/web-vue/es/table';
import { useRoute } from 'vue-router';

const route = useRoute();
const basePagination: Pagination = {
  current: 1,
  pageSize: 50
};
const columns: TableColumnData[] = [
  {
    title: '序号',
    dataIndex: 'index',
    slotName: 'index'
  },
  {
    title: '商户ID',
    dataIndex: 'merchantUid'
  },
  {
    title: '商户名称',
    dataIndex: 'merchantName'
  },
  {
    title: '成交金额(面额)',
    dataIndex: 'succeedShowAmount'
  },
  {
    title: '成交金额(实际)',
    dataIndex: 'succeedFactAmount'
  },
  {
    title: '成交数量',
    dataIndex: 'succeedCount'
  },
  {
    title: '总额(面额)',
    dataIndex: 'totalShowAmount'
  },
  {
    title: '总额(实际)',
    dataIndex: 'totalFactAmount'
  },
  {
    title: '订单总数',
    dataIndex: 'totalCount'
  },
  {
    title: '失败数量',
    dataIndex: 'failedCount'
  },
  {
    title: '失败(未填写)订单数量',
    dataIndex: 'waitedCount'
  },
  {
    title: '成功率',
    dataIndex: 'rate'
  },
  {
    title: '日期',
    dataIndex: 'date'
  }
];
const { loading, setLoading } = useLoading(true);
const pagination = reactive({
  ...basePagination
});
const renderData = ref<OrderSummaryRecord[]>([]);

const fetchData = async (
  params: { current: number; pageSize: number } = basePagination
) => {
  setLoading(true);
  const {
    data: { list, total }
  } = await queryOrderSummaryList({
    ...params,
    roadUid: route.params.roadUid as string
  });
  console.log(params);
  renderData.value = list;
  pagination.current = params.current;
  pagination.pageSize = params.pageSize;
  pagination.total = total;
  setLoading(false);
};
const onPageChange = (current: number) => {
  fetchData({ ...pagination, current });
};
const onPageSizeChange = (pageSize: number) => {
  fetchData({ ...pagination, pageSize });
};
onMounted(() => {
  fetchData();
});
</script>
