<template>
  <a-space direction="vertical" size="large" fill>
    <a-row>
      <a-col :flex="1">
        <a-form
          :model="formModel"
          :label-col-props="{ span: 6 }"
          :wrapper-col-props="{ span: 18 }"
          label-align="left"
        >
          <a-row :gutter="16">
            <a-col :span="8">
              <a-form-item field="dateRange" label="日期">
                <a-range-picker
                  v-model="formModel.dateRange"
                  placeholder="请选择日期范围"
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-col>
      <a-divider style="height: 42px" direction="vertical" />
      <a-col flex="172px" style="text-align: right">
        <a-space direction="horizontal" :size="18">
          <a-button type="primary" @click="search">
            <template #icon>
              <icon-search />
            </template>
            搜索
          </a-button>
          <a-button @click="reset">
            <template #icon>
              <icon-refresh />
            </template>
            重置
          </a-button>
        </a-space>
      </a-col>
    </a-row>
    <a-divider style="margin-top: 0" />
    <a-table
      :loading="loading"
      :pagination="{
        current: pagination.current,
        pageSize: pagination.pageSize,
        total: pagination.total,
        pageSizeOptions: [10, 20, 50, 100],
        showPageSize: true
      }"
      :columns="columns"
      :data="renderData"
      :scroll="{ x: 1080 }"
      @page-change="onPageChange"
      @page-size-change="onPageSizeChange"
    ></a-table>
  </a-space>
</template>

<script lang="ts" setup>
import useLoading from '@/hooks/loading';
import { Pagination } from '@/types/global';

import { onMounted, reactive, ref } from 'vue';
import { TableColumnData } from '@arco-design/web-vue';
import { apiClient } from '@/api';
import {
  KamiApiMerchantV1MerchantHiddenConfigEntity,
  ApiMerchantConfigStealRuleStatsGetPageSizeEnum,
  KamiInternalModelEntityV1MerchantInfo
} from '@/api/generated';

const basePagination: Pagination = {
  current: 1,
  pageSize: 50
};
const pagination = reactive({
  ...basePagination
});
const columns: TableColumnData[] = [
  {
    title: '序号',
    dataIndex: 'index',
    render: (data: { rowIndex: number }) => {
      return data.rowIndex + 1;
    }
  },
  {
    title: '商户',
    dataIndex: 'merchantUid',
    render: ({ record }) => {
      const merchantInfo = state.merchantInfos.find(
        item => item.merchantUid === record.merchantUid
      );
      return merchantInfo?.merchantName || '未知';
    }
  },
  {
    title: '总额',
    dataIndex: 'totalAmount'
  },
  {
    title: '总次数',
    dataIndex: 'totalCount'
  },
  {
    title: '成功总额',
    dataIndex: 'actualAmount'
  },
  {
    title: '成功总次数',
    dataIndex: 'actualCount'
  },
  {
    title: '日期',
    dataIndex: 'date',
    slotName: 'date'
  }
];
const generateFormModel = () => {
  return {
    dateRange: []
  };
};
const state = reactive<{
  merchantInfos: KamiInternalModelEntityV1MerchantInfo[];
}>({
  merchantInfos: []
});
const { loading, setLoading } = useLoading(true);
const renderData = ref<KamiApiMerchantV1MerchantHiddenConfigEntity[]>([]);
const formModel = ref(generateFormModel());
const fetchData = async () => {
  setLoading(true);
  try {
    const {
      data: { list, total }
    } = await apiClient.apiMerchantConfigStealRuleStatsGet({
      current: pagination.current,
      pageSize:
        pagination.pageSize as ApiMerchantConfigStealRuleStatsGetPageSizeEnum
    });
    renderData.value = list;
    pagination.total = total;
  } catch (err) {
  } finally {
    setLoading(false);
  }
};
const onPageChange = (current: number) => {
  pagination.current = current;
  fetchData();
};
const onPageSizeChange = (pageSize: number) => {
  pagination.pageSize = pageSize;
  fetchData();
};
const search = () => {
  fetchData();
};

onMounted(() => {
  fetchData();
  apiClient
    .apiMerchantListAllGet()
    .then(res => (state.merchantInfos = res.data.list));
});

const reset = () => {
  formModel.value = generateFormModel();
  search();
};
</script>

<style lang="less" scoped></style>
