<template>
    <div class="home">
        <pro-table
            :data-source="tableData"
            :columns="columns"
            :border="true"
            :fixed-table="true"
            :show-header="true"
            :show-pagination="true"
            :current-page="currentPage"
            :page-size="pageSize"
            :page-sizes="[10, 20, 50, 100]"
            :total="total"
            :loading="loading"
            :search-label-width="'120px'"
            :search-cols="4"
            :row-selection="rowSelection"
            :show-operations="true"
            search-title="多级表头示例"
            table-title="销售数据统计表"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            @search="handleSearch"
            @reset="handleReset"
            @selection-change="handleSelectionChange"
        >
            <template #operations>
                <el-button type="primary" @click="handleCreate">新建</el-button>
            </template>
        </pro-table>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ElButton, ElMessage } from '@deppon/deppon-ui';
import { ProTable } from '@deppon/deppon-template';

const loading = ref(false);
const currentPage = ref(1);
const pageSize = ref(20);
const total = ref(0);

// 多选配置
const rowSelection = ref(true);

// 表格数据
const tableData = ref([
    {
        id: 1,
        name: '产品A',
        q1Sales: 1000,
        q1Profit: 200,
        q2Sales: 1200,
        q2Profit: 250,
        q3Sales: 1500,
        q3Profit: 300,
        q4Sales: 1800,
        q4Profit: 350,
        totalSales: 5500,
        totalProfit: 1100,
    },
    {
        id: 2,
        name: '产品B',
        q1Sales: 800,
        q1Profit: 150,
        q2Sales: 900,
        q2Profit: 180,
        q3Sales: 1100,
        q3Profit: 220,
        q4Sales: 1300,
        q4Profit: 260,
        totalSales: 4100,
        totalProfit: 810,
    },
    {
        id: 3,
        name: '产品C',
        q1Sales: 1500,
        q1Profit: 300,
        q2Sales: 1600,
        q2Profit: 320,
        q3Sales: 1800,
        q3Profit: 360,
        q4Sales: 2000,
        q4Profit: 400,
        totalSales: 6900,
        totalProfit: 1380,
    },
    {
        id: 4,
        name: '产品D',
        q1Sales: 600,
        q1Profit: 120,
        q2Sales: 700,
        q2Profit: 140,
        q3Sales: 800,
        q3Profit: 160,
        q4Sales: 900,
        q4Profit: 180,
        totalSales: 3000,
        totalProfit: 600,
    },
    {
        id: 5,
        name: '产品E',
        q1Sales: 2000,
        q1Profit: 400,
        q2Sales: 2200,
        q2Profit: 440,
        q3Sales: 2400,
        q3Profit: 480,
        q4Sales: 2600,
        q4Profit: 520,
        totalSales: 9200,
        totalProfit: 1840,
    },
]);

// 多级表头列配置
const columns = ref([
    { prop: 'id', label: 'ID', width: 80, fixed: 'left', hideInSearch: true },
    { prop: 'name', label: '产品名称', width: 120, fixed: 'left' },
    {
        label: '第一季度',
        align: 'center',
        children: [
            { prop: 'q1Sales', label: '销售额', width: 120, hideInSearch: false },
            { prop: 'q1Profit', label: '利润', width: 120 },
        ],
    },
    {
        label: '第二季度',
        children: [
            { prop: 'q2Sales', label: '销售额', width: 120 },
            { prop: 'q2Profit', label: '利润', width: 120 },
        ],
    },
    {
        label: '第三季度',
        children: [
            { prop: 'q3Sales', label: '销售额', width: 120 },
            { prop: 'q3Profit', label: '利润', width: 120 },
        ],
    },
    {
        label: '第四季度',
        children: [
            { prop: 'q4Sales', label: '销售额', width: 120 },
            { prop: 'q4Profit', label: '利润', width: 120 },
        ],
    },
    {
        label: '年度汇总',
        children: [
            { prop: 'totalSales', label: '总销售额', columnBackgroundColor: true },
            { prop: 'totalProfit', label: '总利润', width: 120, columnBackgroundColor: true },
        ],
    },
]);

// 分页事件处理
const handleSizeChange = val => {
    pageSize.value = val;
    ElMessage.success(`每页显示条数改为 ${val}`);
};

const handleCurrentChange = val => {
    currentPage.value = val;
    ElMessage.success(`当前页改为 ${val}`);
};

// 搜索事件处理
const handleSearch = values => {
    console.log('搜索参数:', values);
    ElMessage.success('搜索功能已触发');
};

const handleReset = () => {
    ElMessage.success('重置功能已触发');
};

// 选择变化
const handleSelectionChange = selection => {
    console.log('选中的行:', selection);
};

// 操作按钮
const handleCreate = () => {
    ElMessage.success('新建功能已触发');
};

onMounted(() => {
    total.value = tableData.value.length;
});
</script>

<style scoped>
.home {
    width: 100%;
    height: 560px;
    max-height: 70vh;
    padding: 15px 0 0 15px;
    box-sizing: border-box;
    overflow: hidden;
}
</style>
