<template>
    <a-card title="供应商">
        <template #extra>
            <span>排序：</span>
            <a-radio-group v-model:value="sortMode" button-style="solid" style="margin-left: 16px;">
                <a-radio-button value="count">交易次数</a-radio-button>
                <a-radio-button value="weight">交易重量</a-radio-button>
                <a-radio-button value="amount">交易金额</a-radio-button>
            </a-radio-group>
        </template>
        <div>
            <a-table :columns="columns" :data-source="tableData" :loading="loading" row-key="fk" :pagination="{
                current: pagination.current,
                pageSize: pagination.pageSize,
                total: pagination.total,
                showSizeChanger: true,
                showQuickJumper: true,
                showTotal: (total) => `共 ${total} 条`,
                onShowSizeChange: handleTableChange,
            }" @change="handleTableChange">
            </a-table>
        </div>
    </a-card>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch } from 'vue';
import { getSupplierReport } from '../customsData.api';


const props = defineProps({
    queryParam: {  // 修改属性名
        type: Object,
        required: true
    }
});
const loading = ref(false);
const pagination = ref({
    current: 1,
    pageSize: 20,
    total: 0
});

const sortMode = ref('count');

const columns = [
    {
        title: '供应商名称',
        dataIndex: 'val',
        key: 'val',
    },
    {
        title: '采购商数量',
        dataIndex: 'num_buyer',
        key: 'num_buyer',
        customRender: ({ text }) => {
            return text ? text.toLocaleString('en-US') : '0';
        },
    },
    {
        title: '金额($)',
        dataIndex: 'sum_amount',
        key: 'sum_amount',
        customRender: ({ text }) => formatNumber(text),
    },
    {
        title: '重量(KG)',
        dataIndex: 'sum_weight',
        key: 'sum_weight',
        customRender: ({ text }) => formatNumber(text),
    },
    {
        title: '交易次数',
        dataIndex: 'count',
        key: 'count',
        customRender: ({ text }) => {
            return text ? text.toLocaleString('en-US') : '0';
        },
    },
];

// Replace registerTransactionTable with this new method
const handleTableChange = async (pag, filters, sorter) => {
  loading.value = true;
  try {
    const params = {
      sort: sortMode.value,
      page: pag.current,
      page_size: pag.pageSize,
      ...props.queryParam,
    };

    const res = await getSupplierReport(params);
    if (res.result.data.result && res.result.data.result.buckets) {
      pagination.value = {
        current: pag.current,
        pageSize: pag.pageSize,
        total: res.result.data.result.numBuckets || 0,
      };
      tableData.value = res.result.data.result.buckets;
    }
  } catch (error) {
    console.error('Failed to fetch data:', error);
  } finally {
    loading.value = false;
  }
};
// 计算表格数据
const tableData = ref([]);

// 格式化函数
const formatNumber = (value: number | string) => {
    if (!value) return '0.00';
    return Number(value).toLocaleString('en-US', {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2,
    });
};

onMounted(async () => {
    await handleTableChange(pagination.value.current, pagination.value.pageSize, sortMode.value);
});
// 监听数据变化
watch(
    () => props.queryParam // 修改属性名
);

// 监听排序方式变化
watch(sortMode, (newSortMode) => {
    handleTableChange(pagination.value, {}, { field: newSortMode });
});
</script>

<style scoped>
/* Add any necessary styles here */
</style>
