<template>
    <ele-page flex-table>
        <common-table
            ref="tableRef"
            :pageConfig="pageConfig"
            :columns="columns"
            :tools="false"
        >
            <template #toolbar>
                <el-button type="primary" @click="handleAdd">添加</el-button>
            </template>

            <template #index="{ $index }">
                {{ $index + 1 }}
            </template>

            <template #source="{ row }">
                {{ row.source === 1 ? '人工干预' : '系统测算' }}
            </template>

            <template #type="{ row }">
                {{ row.type === 1 ? '热搜词' : '搜索框默认词' }}
            </template>

            <template #enableStatus="{ row }">
                <el-switch
                    v-model="row.enableStatus"
                    :active-value="1"
                    :inactive-value="0"
                    @change="handleStatusChange(row)"
                />
            </template>

            <template #action="{ row }">
                <el-button link type="primary" @click="handleEdit(row)"
                    >编辑</el-button
                >
                <el-button link type="danger" @click="handleDelete(row)"
                    >删除</el-button
                >
            </template>
        </common-table>

        <trends-search-edit ref="editDialogRef" @success="handleSuccess" />
    </ele-page>
</template>

<script setup>
    import { ref, reactive, getCurrentInstance } from 'vue';
    import CommonTable from '@/components/CommonPage/CommonTable.vue';
    import TrendsSearchEdit from './components/trends-search-edit.vue';
    import { EleMessage } from 'ele-admin-plus/es';

    defineOptions({ name: 'TrendsSearch' });

    const { proxy } = getCurrentInstance();
    const tableRef = ref(null);
    const editDialogRef = ref(null);

    const pageConfig = reactive({
        pageUrl: '/shop/searchHot/pagelist',
        fileName: '热搜管理',
        cacheKey: 'trends-search-list',
        params: {}
    });

    const columns = ref([
        { label: '热搜词', prop: 'world', align: 'center', minWidth: 150 },
        {
            label: '管理类型',
            prop: 'type',
            align: 'center',
            minWidth: 120,
            slot: 'type'
        },
        {
            label: '来源',
            prop: 'source',
            slot: 'source',
            align: 'center',
            minWidth: 120
        },
        {
            label: '搜索次数',
            prop: 'searchTimes',
            align: 'center',
            minWidth: 120
        },
        { label: '权重', prop: 'priority', align: 'center', minWidth: 100 },
        {
            label: '是否启用',
            prop: 'enableStatus',
            slot: 'enableStatus',
            align: 'center',
            minWidth: 100
        },
        {
            label: '更新时间',
            prop: 'updateTime',
            align: 'center',
            minWidth: 180
        },
        {
            label: '操作',
            prop: 'action',
            slot: 'action',
            align: 'center',
            width: 150
        }
    ]);

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

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

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

    const handleDelete = (row) => {
        EleMessage.confirm(`确定要删除 ${row.world} 吗？`)
            .then(() => {
                proxy.$http
                    .post('/shop/searchHot/delete', { id: row.id })
                    .then((res) => {
                        if (res.data.code === 200) {
                            EleMessage.success('删除成功');
                            reload();
                        } else {
                            EleMessage.error(res.data.msg);
                        }
                    })
                    .catch((e) => {
                        EleMessage.error(e.message);
                    });
            })
            .catch(() => {});
    };

    const handleSuccess = () => {
        reload();
    };

    const handleStatusChange = (row) => {
        proxy.$http
            .post('/shop/searchHot/setStatus', {
                id: row.id,
                enableStatus: row.enableStatus
            })
            .then((res) => {
                if (res.data.code === 200) {
                    EleMessage.success(
                        `${row.world} ${row.enableStatus === 1 ? '已启用' : '已禁用'}`
                    );
                } else {
                    row.enableStatus = row.enableStatus === 1 ? 0 : 1;
                    EleMessage.error(res.data.msg);
                }
            })
            .catch((e) => {
                row.enableStatus = row.enableStatus === 1 ? 0 : 1;
                EleMessage.error(e.message);
            });
    };
</script>
