<template>
    <div class="home">
        <pro-table
            ref="proTableRef"
            stripe
            :data-source="tableData"
            :columns="columns"
            :fixed-table="true"
            :show-header="true"
            :show-pagination="true"
            :current-page="currentPage"
            :page-size="pageSize"
            :page-sizes="[10, 20, 50, 100]"
            :toolbar-options="{
                reload: true,
                density: true,
                setting: true,
                fullScreen: true,
            }"
            :total="total"
            :draggable="true"
            :loading="loading"
            :search-label-width="'120px'"
            :search-cols="4"
            :row-selection="rowSelection"
            :show-operations="true"
            :empty-text="emptyText"
            :empty-image="emptyImage"
            search-title="产品折扣管理"
            table-title="产品折扣列表"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            @search="handleSearch"
            @reset="handleReset"
            @selection-change="handleSelectionChange"
            @values-change="handleValuesChange"
        >
            <template #tableTitle>
                <div style="display: inline-flex; align-items: center; gap: 8px">
                    <span>产品折扣列表</span>
                    <span style="font-size: 12px; color: #909399">提示：仅展示最近30天内有变动的产品</span>
                </div>
            </template>
            <template #paginationBefore>
                <el-button type="primary" @click="handleCreate">新建</el-button>
            </template>
            <template #operations>
                <el-button type="primary" @click="handleCreate">新建</el-button>
                <el-button @click="handleClearNameField">清空姓名字段</el-button>
                <el-button @click="handleClearPriceRange">清空价格范围</el-button>
                <el-button @click="handleClearCategory">清空分类</el-button>
                <el-button @click="handleClearMultipleFields">清空多个字段</el-button>
                <el-button @click="handleShowEmpty">显示空状态</el-button>
                <el-button @click="handleLoadData">加载数据</el-button>
            </template>
            <template #name="{ row }">
                <a
                    style="
                        display: block;
                        width: 100%;
                        height: 100%;
                        cursor: text;
                        user-select: text;
                        -webkit-user-select: text;
                        -moz-user-select: text;
                        -ms-user-select: text;
                        text-decoration: none;
                        color: inherit;
                        padding: 0;
                        margin: 0;
                    "
                >
                    {{ row.name }}
                </a>
            </template>
            <template #status="{ row }">
                <el-tag :type="row.status === 'active' ? 'success' : 'info'">
                    {{ row.status === 'active' ? '激活' : '未激活' }}
                </el-tag>
            </template>
            <template #action="{ row }">
                <el-button type="primary" size="small" @click="handleEdit(row)">编辑</el-button>
                <el-button type="danger" size="small" @click="handleDelete(row)">删除</el-button>
                <el-button size="small" @click="ElMessage.info(`查看详情: ${row.name}`)">详情</el-button>
            </template>
            <template #batchOperations="{ selectedRows, clearSelection }">
                <el-button type="primary" @click="handleBatchEdit(selectedRows)">批量编辑</el-button>
                <el-button type="danger" @click="handleBatchDelete(selectedRows, clearSelection)">批量删除</el-button>
            </template>
        </pro-table>
    </div>
</template>

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

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

// ProTable 引用
const proTableRef = ref(null);

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

// 空状态配置
const emptyText = ref('暂无数据');
const emptyImage = ref(undefined); // 使用 Element Plus 默认图片

// 基础表格数据
const tableData = ref([]);

// 基础列配置（带自定义插槽和搜索功能）
const columns = ref([
    {
        prop: 'id',
        label: 'ID',
        width: 80,
        hideInSearch: false,
        fixed: 'left',
        sorter: true, // 启用排序
    }, // text 类型
    {
        prop: 'name',
        label: '姓名',
        width: 120,
        hideInSearch: false,
        required: true,
        rules: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        initialValue: '张三', // 搜索表单的初始值
        slots: { default: 'name' }, // 使用自定义插槽
        fieldProps: {
            placeholder: '请选择',
            isClearInitialValue: true, // 重置时不会清空，保持 initialValue
        },
        // 文本排序规则说明：
        // 1. sorter: true - 使用 Element Plus 默认排序（按 Unicode 编码顺序，适合英文和数字）
        // 2. sorter: (a, b) => number - 自定义排序函数（适合中文等需要特殊排序的场景）
        // 默认排序示例：'a' < 'b' < 'z' < 'A' < 'Z' < '0' < '9' < '中' < '文'
        // 中文排序示例：使用 localeCompare 进行中文拼音排序
        sorter: (a, b) => {
            console.log(a, b);
            // 自定义中文排序：按拼音顺序
            return a.name.localeCompare(b.name, 'zh-CN', { numeric: true });
        },
    }, // text 类型
    {
        prop: 'age',
        label: '年龄',
        width: 100,
        align: 'center',
        hideInSearch: false,
        columnBackgroundColor: true, // cellBackgroundColor 优先级高于 columnBackgroundColor
        filters: [
            { text: '20-30岁', value: '20-30' },
            { text: '30-40岁', value: '30-40' },
            { text: '40-50岁', value: '40-50' },
        ],
        filterMethod: (value, row) => {
            if (value === '20-30') {
                return row.age >= 20 && row.age < 30;
            } else if (value === '30-40') {
                return row.age >= 30 && row.age < 40;
            } else if (value === '40-50') {
                return row.age >= 40 && row.age < 50;
            }
            return true;
        },
    }, // text 类型
    {
        prop: 'priceRange',
        label: '价格范围',
        width: 200,
        valueType: 'textRange', // 文本范围类型，会在搜索表单中显示为两个输入框
        hideInSearch: false,
        initialValue: ['10', '15'], // 搜索表单的初始值，数组格式 [最小值, 最大值]
        required: true,
        // 支持数组形式的 rules，分别校验两个输入框
        // rules[0] 用于校验第一个输入框，rules[1] 用于校验第二个输入框
        rules: [
            { required: true, message: '请输入价格范围', trigger: 'change' },
            {
                validator: (rule, value, callback) => {
                    // value 是数组 [start, end]
                    const valueArray = Array.isArray(value) ? value : [];
                    const startValue = valueArray[0];
                    const endValue = valueArray[1];

                    // 校验第一个值不能为空
                    if (!startValue || startValue === '') {
                        callback(new Error('请输入最低价'));
                        return;
                    }

                    // 校验第二个值不能为空
                    if (!endValue || endValue === '') {
                        callback(new Error('请输入最高价'));
                        return;
                    }

                    const startNum = Number(startValue);
                    const endNum = Number(endValue);

                    // 校验是否为有效数字
                    if (isNaN(startNum)) {
                        callback(new Error('最低价必须是数字'));
                        return;
                    }
                    if (isNaN(endNum)) {
                        callback(new Error('最高价必须是数字'));
                        return;
                    }

                    // 校验最低价必须小于最高价
                    if (startNum >= endNum) {
                        callback(new Error('最低价必须小于最高价'));
                        return;
                    }

                    // 校验差值必须小于10
                    const diff = endNum - startNum;
                    if (diff >= 10) {
                        callback(new Error('最高价和最低价的差值必须小于10'));
                        return;
                    }

                    callback();
                },
                trigger: 'change',
            },
        ],
        fieldProps: {
            prefix: ['¥', '$'], // 第一个输入框使用 ¥，第二个输入框使用 $
            suffix: ['%', '元'], // 第一个输入框使用 %，第二个输入框使用 元
            placeholder: ['请输入最低价', '请输入最高价'],
            rangeFormat: 'array',
        },
    },
    {
        prop: 'email',
        cellBackgroundColor: row => {
            // 返回对象，同时设置背景色和文字颜色
            if (row.email == 'user3@example.com') {
                return { backgroundColor: '#fef0f0', color: '#f56c6c' }; // 红色背景，红色文字
            }
            return undefined; // 不设置颜色
        },
        label: '邮箱',
        minWidth: 200,
        hideInSearch: false,
    }, // text 类型
    {
        prop: 'password',
        label: '密码',
        width: 120,
        valueType: 'password', // 密码类型，会在搜索表单中显示为密码输入框
        hideInSearch: false,
    },

    {
        prop: 'description',
        label: '描述',
        minWidth: 200,
        valueType: 'textarea', // 文本域类型，会在搜索表单中显示为文本域
        hideInSearch: false,
        colSpan: 24,
        fieldProps: {
            rows: 4,
            placeholder: '请输入1描述',
        },
    },
    {
        prop: 'category',
        label: '分类',
        width: 120,
        valueType: 'select', // 选择器类型（单选），会在搜索表单中显示为下拉选择器
        fieldProps: {
            options: [
                { label: '男', value: 'male' },
                { label: '女', value: 'female' },
            ],
            placeholder: '请选择性别',
        },
        hideInSearch: false,
        filters: [
            { text: '男', value: 'male' },
            { text: '女', value: 'female' },
        ],
        filterMethod: (value, row) => {
            return row.category === value;
        },
    },
    {
        prop: 'pricingType',
        label: '报价类型',
        width: 150,
        valueType: 'select', // 选择器类型（单选），会在搜索表单中显示为下拉选择器
        hideInSearch: false,
        initialValue: 'ALONE_PRICEING', // 搜索表单的初始值
        fieldProps: {
            placeholder: '请选择',
            disabled: true, // 禁用字段，重置时不会清空，保持 initialValue
            options: [{ label: '单独报价', value: 'ALONE_PRICEING' }],
        },
    },
    {
        prop: 'tags',
        label: '标签',
        width: 150,
        valueType: 'select', // 选择器类型（多选），通过 fieldProps.multiple 配置
        valueEnum: {
            active: { text: '激活', status: 'success' },
            inactive: { text: '未激活', status: 'info' },
            pending: { text: '待审核', status: 'warning' },
        },
        fieldProps: {
            multiple: true, // 多选
            filterable: true, // 可搜索
            options: [
                { label: '激活', value: 'active' },
                { label: '未激活', value: 'inactive' },
                { label: '待审核', value: 'pending' },
            ],
            placeholder: '请选择状态',
        },
        hideInSearch: false,
    },
    {
        prop: 'priority',
        label: '优先级',
        width: 120,
        valueType: 'select', // 选择器类型（可搜索），通过 fieldProps.filterable 配置
        fieldProps: {
            filterable: true, // 可搜索
        },
        valueEnum: {
            low: '低',
            medium: '中',
            high: '高',
            urgent: '紧急',
        },
        hideInSearch: false,
        filters: [
            { text: '低', value: 'low' },
            { text: '中', value: 'medium' },
            { text: '高', value: 'high' },
            { text: '紧急', value: 'urgent' },
        ],
        filterMethod: (value, row) => {
            return row.priority === value;
        },
        sorter: (a, b) => {
            const order = { low: 1, medium: 2, high: 3, urgent: 4 };
            return order[a.priority] - order[b.priority];
        },
    },
    {
        prop: 'birthDate',
        label: '出生日期',
        width: 140,
        valueType: 'date', // 日期类型，会在搜索表单中显示为日期选择器
        hideInSearch: false,
    },
    {
        prop: 'createTime',
        label: '创建时间',
        width: 180,
        valueType: 'dateTime', // 日期时间类型，会在搜索表单中显示为日期时间选择器
        hideInSearch: false,
        sorter: true, // 启用排序
    },
    {
        prop: 'dateRange',
        label: '日期范围',
        width: 240,
        colSpan: 12,
        valueType: 'dateRange', // 日期范围类型，会在搜索表单中显示为日期范围选择器
        fieldProps: {
            format: 'YYYY-MM-DD HH:mm:ss',
            valueFormat: 'YYYY-MM-DD HH:mm:ss',
            placeholder: '请选择日期时间',
        },
        required: true,
        rules: [{ required: true, message: '请选择日期时间', trigger: 'change' }],
        hideInSearch: false,
        hideInTable: true,
    },
    {
        prop: 'workTime',
        label: '工作时间',
        width: 140,
        valueType: 'time', // 时间类型，会在搜索表单中显示为时间选择器
        hideInSearch: false,
    },
    {
        prop: 'timeRange',
        label: '时间范围',
        width: 200,
        valueType: 'timeRange', // 时间范围类型，会在搜索表单中显示为时间范围选择器
        hideInSearch: false,
    },
    {
        prop: 'status',
        label: '状态',
        width: 100,
        slots: { default: 'status' },
        hideInSearch: true, // 不在搜索表单中显示
        filters: [
            { text: '激活', value: 'active' },
            { text: '未激活', value: 'inactive' },
        ],
        filterMethod: (value, row) => {
            return row.status === value;
        },
        // statusField: 'status', // 状态字段名，用于判断行背景色
        // statusValue: 'inactive', // 状态值，当 statusField 的值等于此值时显示错误背景色（红色背景）
    },
    {
        prop: 'action',
        label: '操作',
        width: 250,
        fixed: 'right',
        align: 'center',
        slots: { default: 'action' },
        hideInSearch: true, // 不在搜索表单中显示
        collapsibleActions: false, // 启用操作列按钮收缩（按钮折叠功能）
        maxVisibleActions: 2, // 最多显示2个按钮，超出折叠
        collapsible: true, // 操作列是否可以收缩展开（整个列显示/隐藏）
        defaultCollapsed: false, // 操作列默认是否收缩（隐藏）
    },
]);

// 模拟数据请求
const fetchData = async () => {
    loading.value = true;
    try {
        // 模拟 API 请求延迟
        await new Promise(resolve => setTimeout(resolve, 500));

        // 模拟数据
        const categories = ['tech', 'design', 'product', 'marketing'];
        const priorities = ['low', 'medium', 'high', 'urgent'];
        const allTags = ['frontend', 'backend', 'mobile', 'devops', 'test'];
        const allData = Array.from({ length: 100 }, (_, index) => {
            const startDate = new Date(Date.now() - Math.random() * 365 * 24 * 60 * 60 * 1000);
            const endDate = new Date(startDate.getTime() + Math.random() * 30 * 24 * 60 * 60 * 1000);
            const birthDate = new Date(
                1990 + Math.floor(Math.random() * 30),
                Math.floor(Math.random() * 12),
                Math.floor(Math.random() * 28) + 1,
            );
            const workTime = `${String(Math.floor(Math.random() * 24)).padStart(2, '0')}:${String(
                Math.floor(Math.random() * 60),
            ).padStart(2, '0')}:${String(Math.floor(Math.random() * 60)).padStart(2, '0')}`;
            const startTime = `${String(Math.floor(Math.random() * 12)).padStart(2, '0')}:${String(
                Math.floor(Math.random() * 60),
            ).padStart(2, '0')}`;
            const endTime = `${String(12 + Math.floor(Math.random() * 12)).padStart(2, '0')}:${String(
                Math.floor(Math.random() * 60),
            ).padStart(2, '0')}`;

            // 随机选择1-3个标签
            const selectedTags = allTags.sort(() => Math.random() - 0.5).slice(0, Math.floor(Math.random() * 3) + 1);

            const minPrice = Math.floor(Math.random() * 1000);
            const maxPrice = minPrice + Math.floor(Math.random() * 2000);

            return {
                id: index + 1,
                name: `用户${index + 1}`,
                age: 20 + Math.floor(Math.random() * 30),
                email: `user${index + 1}@example.com`,
                password: '******', // 密码字段，实际应该加密存储
                priceRange: [String(minPrice), String(maxPrice)], // 价格范围
                description: `这是用户${index + 1}的描述信息，可能包含多行文本内容。`,
                category: categories[Math.floor(Math.random() * categories.length)],
                pricingType: 'ALONE_PRICEING', // 报价类型（固定值，用于演示 disabled 字段重置时保持 initialValue）
                tags: selectedTags, // 多选标签
                priority: priorities[Math.floor(Math.random() * priorities.length)],
                birthDate: birthDate.toISOString().split('T')[0],
                createTime: new Date(Date.now() - Math.random() * 365 * 24 * 60 * 60 * 1000).toISOString(),
                dateRange: [startDate.toISOString().split('T')[0], endDate.toISOString().split('T')[0]],
                workTime: workTime,
                timeRange: [startTime, endTime],
                status: Math.random() > 0.5 ? 'active' : 'inactive',
            };
        });

        total.value = allData.length;

        // 模拟分页
        const start = (currentPage.value - 1) * pageSize.value;
        const end = start + pageSize.value;
        tableData.value = allData.slice(start, end);
    } catch (error) {
        ElMessage.error('数据加载失败');
        console.error(error);
    } finally {
        loading.value = false;
    }
};

// 分页大小改变
const handleSizeChange = val => {
    pageSize.value = val;
    currentPage.value = 1; // 重置到第一页
    fetchData();
};

// 当前页改变
const handleCurrentChange = val => {
    currentPage.value = val;
    fetchData();
};

const handleCreate = () => {
    ElMessage.success('新建');
    top.closeTab && top.closeTab(location.href, 'iframe'); // 在uap中关闭当前菜单
};

const handleEdit = row => {
    ElMessage.success(`编辑: ${row.name}`);
};

const handleDelete = row => {
    ElMessage.warning(`删除: ${row.name}`);
};

// 搜索
const handleSearch = searchParams => {
    console.log('搜索参数:', searchParams);
    // 这里可以根据搜索参数重新请求数据
    currentPage.value = 1;
    fetchData();
};

// 重置
const handleReset = () => {
    ElMessage.info('已重置搜索条件');
    currentPage.value = 1;
    fetchData();
};

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

// 搜索表单值实时变化
const handleValuesChange = values => {
    console.log('========== 搜索表单值实时变化 ==========');
    console.log('表单值对象:', values);
    console.log('参数详情:');
    Object.keys(values).forEach(key => {
        const value = values[key];
        const column = columns.value.find(col => col.prop === key);
        const label = column?.label || key;
        const valueType = column?.valueType || 'text';

        if (Array.isArray(value)) {
            console.log(`  ${label} (${key}):`, value, `[${valueType}]`);
        } else {
            console.log(`  ${label} (${key}):`, value, `[${valueType}]`);
        }
    });
    console.log('========================================');
};

// 批量编辑
const handleBatchEdit = selectedRows => {
    ElMessage.success(`批量编辑 ${selectedRows.length} 条数据`);
    console.log('批量编辑的行:', selectedRows);
};

// 批量删除
const handleBatchDelete = (selectedRows, clearSelection) => {
    ElMessage.warning(`批量删除 ${selectedRows.length} 条数据`);
    console.log('批量删除的行:', selectedRows);
    // 删除后清空选择
    clearSelection();
};

// 清空姓名字段
const handleClearNameField = () => {
    if (proTableRef.value && proTableRef.value.clearSearchFields) {
        proTableRef.value.clearSearchFields('name');
        ElMessage.success('已清空姓名字段');
    }
};

// 清空价格范围字段
const handleClearPriceRange = () => {
    if (proTableRef.value && proTableRef.value.clearSearchFields) {
        proTableRef.value.clearSearchFields('priceRange');
        ElMessage.success('已清空价格范围字段');
    }
};

// 清空分类字段
const handleClearCategory = () => {
    if (proTableRef.value && proTableRef.value.clearSearchFields) {
        proTableRef.value.clearSearchFields('category');
        ElMessage.success('已清空分类字段');
    }
};

// 清空多个字段
const handleClearMultipleFields = () => {
    if (proTableRef.value && proTableRef.value.clearSearchFields) {
        proTableRef.value.clearSearchFields(['name', 'priceRange']);
        ElMessage.success('已清空姓名和价格范围字段');
    }
};

// 显示空状态示例
const handleShowEmpty = () => {
    tableData.value = [];
    total.value = 0;
    emptyText.value = '暂无数据，请稍后再试';
    emptyImage.value = undefined; // 使用 Element Plus 默认图片
    ElMessage.info('已清空数据，显示空状态');
};

// 加载数据
const handleLoadData = () => {
    fetchData();
    emptyText.value = '暂无数据';
    ElMessage.success('已加载数据');
};

// 初始化加载数据
onMounted(() => {
    fetchData();
});
</script>

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