<template>
    <ele-page flex-table>
        <div class="h-full bg-white p-5 rounded-lg">
            <!-- Page Search -->
            <PageSearch @search="handleSearch" @reset="handleReset" />

            <!-- Table -->
            <common-table
                ref="tableRef"
                :columns="columns"
                :pageConfig="pageConfig"
                :bodyStyle="{ padding: 0 }"
            >
                <template #toolbar>
                    <el-button type="success" plain @click="handleCreate"
                        >新建活动</el-button
                    >
                </template>

                <template #type="{ row }">
                    <el-tag v-if="row.type === '1'" type="primary"
                        >阶梯优惠</el-tag
                    >
                    <el-tag v-else-if="row.type === '2'" type="warning"
                        >上不封顶</el-tag
                    >
                    <el-tag v-else type="info">未知</el-tag>
                </template>

                <template #scope="{ row }">
                    <el-tag v-if="row.scope === '1'" type="success"
                        >所有商品</el-tag
                    >
                    <el-tag v-else-if="row.scope === '2'" type="info"
                        >指定商品</el-tag
                    >
                </template>

                <template #condition="{ row }">
                    <div v-if="row.type === '1'">
                        <div v-for="(step, index) in row.stepList" :key="index">
                            满{{ step.thresholdMoney }}减{{
                                step.discountMoney
                            }}
                        </div>
                    </div>
                    <div v-else-if="row.type === '2'">
                        每满{{ row.thresholdMoney }}减{{ row.discountMoney }}
                    </div>
                </template>

                <template #status="{ row }">
                    <el-tag
                        v-if="getStatus(row) === 'active'"
                        type="success"
                        effect="dark"
                        >进行中</el-tag
                    >
                    <el-tag
                        v-else-if="getStatus(row) === 'pending'"
                        type="warning"
                        >未开始</el-tag
                    >
                    <el-tag v-else type="info">已结束</el-tag>
                </template>

                <template #time="{ row }">
                    <div class="text-xs text-gray-500">
                        <div>开始 {{ row.startTime }}</div>
                        <div>结束 {{ row.endTime }}</div>
                    </div>
                </template>

                <template #action="{ row }">
                    <el-button type="primary" link @click="handleEdit(row)"
                        >修改</el-button
                    >
                    <!-- <el-button type="danger" link @click="handleDelete(row)">删除</el-button> -->
                    <!-- <el-button type="primary" link @click="handleShowData(row)">数据</el-button> -->
                </template>
            </common-table>
        </div>

        <!-- Dialogs -->
        <QuantityDiscountDialog
            v-model="dialogVisible"
            :data="dialogData"
            @success="reload"
        />
        <QuantityDiscountDataDialog v-model="dataDialogVisible" />
    </ele-page>
</template>

<script setup>
    import { ref, reactive } from 'vue';
    import { EleMessage } from 'ele-admin-plus/es';
    import CommonTable from '@/components/CommonPage/CommonTable.vue';
    import PageSearch from './components/PageSearch.vue';
    import QuantityDiscountDialog from './components/QuantityDiscountDialog.vue';
    import QuantityDiscountDataDialog from './components/QuantityDiscountDataDialog.vue';

    defineOptions({ name: 'QuantityDiscount' });

    const tableRef = ref(null);
    const dialogVisible = ref(false);
    const dialogData = ref(null);
    const dataDialogVisible = ref(false);

    const pageConfig = reactive({
        pageUrl: '/shop/shopDiscountInfo/pagelist',
        rowKey: 'id',
        tool: false
    });

    const columns = ref([
        { label: '活动名称', prop: 'activityName', minWidth: 150 },
        { label: '活动类型', prop: 'type', slot: 'type', minWidth: 100 },
        { label: '适用范围', prop: 'scope', slot: 'scope', minWidth: 100 },
        {
            label: '优惠规则',
            prop: 'condition',
            slot: 'condition',
            minWidth: 200
        },
        { label: '活动状态', prop: 'status', slot: 'status', minWidth: 100 },
        { label: '活动时间', prop: 'time', slot: 'time', minWidth: 220 },
        {
            label: '操作',
            prop: 'action',
            slot: 'action',
            width: 150,
            fixed: 'right'
        }
    ]);

    const getStatus = (row) => {
        const now = new Date().getTime();
        const start = new Date(row.startTime).getTime();
        const end = new Date(row.endTime).getTime();
        if (now < start) return 'pending';
        if (now > end) return 'ended';
        return 'active';
    };

    const reload = () => {
        tableRef.value?.reload();
    };

    const handleSearch = (params) => {
        tableRef.value?.reload(params);
    };

    const handleReset = () => {
        tableRef.value?.reload();
    };

    const handleCreate = () => {
        dialogData.value = null;
        dialogVisible.value = true;
    };

    const handleEdit = (row) => {
        dialogData.value = { ...row };
        dialogVisible.value = true;
    };

    const handleDelete = (row) => {
        // Implement delete if API available
    };

    const handleShowData = (row) => {
        dataDialogVisible.value = true;
    };
</script>
