<template>
    <ele-page flex-table>
        <!-- Search Bar -->
        <div
            class="bg-white p-4 mb-4 rounded shadow-sm flex items-center justify-between"
        >
            <div class="flex items-center space-x-2">
                <el-input
                    v-model="searchForm.name"
                    placeholder="请输入专题名称"
                    style="width: 240px"
                    clearable
                />
                <el-button type="primary" @click="handleSearch">查询</el-button>
                <el-button @click="handleReset">重置</el-button>
            </div>
            <el-button type="primary" @click="handleAdd">添加专题</el-button>
        </div>

        <common-table
            ref="tableRef"
            :pageConfig="pageConfig"
            :columns="columns"
            :tools="false"
        >
            <!-- 封面 -->
            <template #imgUrl="{ row }">
                <el-image
                    :src="row.imgUrl"
                    class="w-10 h-10 object-cover"
                    :preview-src-list="[row.imgUrl]"
                    preview-teleported
                    fit="cover"
                />
            </template>

            <!-- 状态 -->
            <template #showStatus="{ row }">
                <span
                    :class="
                        row.showStatus === 1
                            ? 'text-green-500'
                            : 'text-gray-500'
                    "
                >
                    {{ row.showStatus === 1 ? '已上架' : '已下架' }}
                </span>
            </template>

            <!-- 操作 -->
            <template #action="{ row }">
                <div class="flex items-center space-x-2">
                    <el-button
                        v-if="row.showStatus === 1"
                        link
                        type="danger"
                        @click="handleStatusToggle(row)"
                    >
                        下架
                    </el-button>
                    <el-button
                        v-else
                        link
                        type="danger"
                        @click="handleStatusToggle(row)"
                    >
                        上架
                    </el-button>

                    <el-button link type="primary" @click="handleEdit(row)"
                        >编辑</el-button
                    >
                    <el-button link type="primary" @click="handleBind(row)"
                        >绑定图书</el-button
                    >
                    <!-- <el-button link type="danger" @click="handleDelete(row)">删除</el-button> -->
                </div>
            </template>
        </common-table>

        <topics-edit ref="editDialogRef" @success="handleSuccess" />
        <topics-bind ref="bindDialogRef" @success="handleSuccess" />
    </ele-page>
</template>

<script setup>
    import { ref, reactive } from 'vue';
    import CommonTable from '@/components/CommonPage/CommonTable.vue';
    import TopicsEdit from './components/topics-edit.vue';
    import TopicsBind from './components/topics-bind.vue';
    import { EleMessage } from 'ele-admin-plus/es';

    defineOptions({ name: 'TopicsList' });

    const tableRef = ref(null);
    const editDialogRef = ref(null);
    const bindDialogRef = ref(null);
    const searchForm = reactive({
        name: ''
    });

    const pageConfig = reactive({
        pageUrl: '/book/showIndex/list',
        fileName: '专题列表',
        cacheKey: 'topics-list',
        params: {
            cateType: 1 // 专题
        }
    });

    const columns = ref([
        { type: 'selection', width: 50, align: 'center' },
        { label: '序号', prop: 'id', width: 80, align: 'center' },
        { label: '专题名称', prop: 'showName', align: 'center', minWidth: 150 },
        {
            label: '封面',
            prop: 'imgUrl',
            slot: 'imgUrl',
            align: 'center',
            width: 120
        },
        {
            label: '专题类型',
            prop: 'topicType',
            align: 'center',
            width: 100,
            formatter: (row) => (row.topicType === 2 ? '双排' : '单排')
        },
        {
            label: '相关单品',
            prop: 'bookCount',
            align: 'center',
            width: 100,
            formatter: (row) => row.bookCount || 0
        },
        {
            label: '备注',
            prop: 'remark',
            align: 'center',
            minWidth: 150,
            showOverflowTooltip: true
        },
        {
            label: '状态',
            prop: 'showStatus',
            slot: 'showStatus',
            align: 'center',
            width: 100
        },
        { label: '创建时间', prop: 'createTime', align: 'center', width: 180 },
        {
            label: '操作',
            prop: 'action',
            slot: 'action',
            align: 'center',
            width: 200
        }
    ]);

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

    const handleReset = () => {
        searchForm.name = '';
        handleSearch();
    };

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

    const handleAdd = () => {
        editDialogRef.value?.handleOpen();
    };

    const handleEdit = (row) => {
        editDialogRef.value?.handleOpen(row);
    };

    const handleBind = (row) => {
        bindDialogRef.value?.handleOpen(row);
    };

    const handleDelete = (row) => {
        EleMessage.confirm(`确定要删除 ${row.showName} 吗？`)
            .then(() => {
                // TODO: Delete API if available
                EleMessage.warning('暂无删除接口');
            })
            .catch(() => {});
    };

    const handleStatusToggle = (row) => {
        const newStatus = row.showStatus === 1 ? 2 : 1;
        const actionText = newStatus === 1 ? '上架' : '下架';

        tableRef.value?.operatBatch({
            url: '/book/showIndex/updateShowStatus',
            method: 'post',
            data: {
                id: row.id,
                showStatus: newStatus
            },
            title: `确定要${actionText}吗？`,
            success: () => {
                EleMessage.success(`${actionText}成功`);
                reload();
            }
        });
    };

    const handleSuccess = () => {
        reload();
    };
</script>
