<template>
    <ele-page>
        <div class="task-settings-container">
            <el-row :gutter="20">
                <el-col :span="8" v-for="rule in rules" :key="rule.id">
                    <div class="rule-card">
                        <div class="card-header">
                            <span class="rule-title">{{ rule.title }}</span>
                            <el-icon
                                class="delete-icon"
                                @click="handleDelete(rule)"
                            >
                                <Delete />
                            </el-icon>
                        </div>

                        <div class="card-content">
                            <div class="rule-desc-section">
                                <div class="label">规则描述：</div>
                                <div class="desc-list">
                                    <div
                                        v-for="(
                                            desc, index
                                        ) in rule.description"
                                        :key="index"
                                        class="desc-item"
                                    >
                                        {{ index + 1 }}、{{ desc }}
                                    </div>
                                </div>
                            </div>

                            <div class="stats-text">
                                {{ rule.stats }}
                            </div>

                            <div class="time-info">
                                <div>规则新建时间：{{ rule.createTime }}</div>
                                <div>规则更新时间：{{ rule.updateTime }}</div>
                            </div>

                            <div class="action-area">
                                <el-button
                                    type="success"
                                    v-if="rule.hasTask"
                                    plain
                                    class="action-btn"
                                    >更新任务</el-button
                                >
                                <el-button
                                    v-else
                                    type="success"
                                    plain
                                    class="action-btn"
                                    >一键生成任务</el-button
                                >
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </ele-page>
</template>

<script setup>
    import { ref } from 'vue';
    import { Delete } from '@element-plus/icons-vue';
    import { ElMessageBox, ElMessage } from 'element-plus';

    defineOptions({ name: 'TaskSettings' });

    const rules = ref([
        {
            id: 1,
            title: '规则一',
            description: ['60天没有更新过的售价', '销售价格大于4', '教材'],
            stats: '约564555条 (5条新加入, 10条正在处理)',
            createTime: '2025-06-15 15:00:00',
            updateTime: '2025-06-15 15:00:00',
            hasTask: true
        },
        {
            id: 2,
            title: '规则二',
            description: ['库存周转率0.01', '库存大于10'],
            stats: '约564555条 (5条新加入, 10条正在处理)',
            createTime: '2025-06-15 15:00:00',
            updateTime: '2025-06-15 15:00:00',
            hasTask: false
        },
        {
            id: 3,
            title: '规则三',
            description: ['回收折扣大于等于0.8', '多本回收'],
            stats: '约564555条 (5条新加入, 10条正在处理)',
            createTime: '2025-06-15 15:00:00',
            updateTime: '2025-06-15 15:00:00',
            hasTask: false
        }
    ]);

    const handleDelete = (rule) => {
        ElMessageBox.confirm(
            '规则删除后，该规则下的任务将被释放，确定要删除吗?',
            '温馨提示!',
            {
                confirmButtonText: '删除',
                cancelButtonText: '取消',
                type: 'warning',
                confirmButtonClass: 'el-button--danger'
            }
        )
            .then(() => {
                // TODO: Call API to delete rule
                rules.value = rules.value.filter((item) => item.id !== rule.id);
                ElMessage({
                    type: 'success',
                    message: '删除成功'
                });
            })
            .catch(() => {
                // Cancelled
            });
    };
</script>

<style lang="scss" scoped>
    .task-settings-container {
        padding: 20px;
    }

    .rule-card {
        background-color: #f5f5f5;
        border-radius: 4px;
        padding: 20px;
        position: relative;
        height: 100%;
        min-height: 350px;
        display: flex;
        flex-direction: column;

        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;

            .rule-title {
                font-size: 16px;
                font-weight: bold;
                color: #333;
            }

            .delete-icon {
                cursor: pointer;
                color: #909399;
                font-size: 18px;

                &:hover {
                    color: #f56c6c;
                }
            }
        }

        .card-content {
            flex: 1;
            display: flex;
            flex-direction: column;

            .rule-desc-section {
                margin-bottom: 20px;

                .label {
                    font-weight: bold;
                    margin-bottom: 8px;
                    color: #333;
                }

                .desc-list {
                    .desc-item {
                        color: #606266;
                        line-height: 1.8;
                        font-size: 14px;
                    }
                }
            }

            .stats-text {
                color: #67c23a;
                margin-bottom: 15px;
                font-size: 14px;
            }

            .time-info {
                color: #333;
                font-size: 14px;
                line-height: 1.6;
                margin-bottom: 30px;
            }

            .action-area {
                margin-top: auto;
                text-align: center;

                .action-btn {
                    width: 140px;
                    background-color: #e1f3d8;
                    border-color: #e1f3d8;
                    color: #67c23a;

                    &:hover {
                        background-color: #c2e7b0;
                        border-color: #c2e7b0;
                    }
                }
            }
        }
    }
</style>

<style lang="scss">
    .task-tooltip {
        max-width: 300px;

        .tooltip-content {
            p {
                margin: 5px 0;
                line-height: 1.5;
            }
        }
    }
</style>
