<template>
    <ele-page flex-table>
        <common-table
            ref="pageRef"
            :pageConfig="pageConfig"
            :columns="columns"
            :tools="false"
        >
            <template #useStatus="{ row }">
                <el-switch
                    v-model="row.useStatus"
                    style="--el-switch-on-color: #13ce66"
                    :active-value="1"
                    :inactive-value="0"
                    @change="statusSwitchChange($event, row, 'useStatus')"
                />
                <el-text style="margin-left: 5px">{{
                    row.useStatus == 0 ? '已关闭' : '已开启'
                }}</el-text>
            </template>
            <template #action="{ row }">
                <div>
                    <el-button
                        type="primary"
                        link
                        v-permission="'optimization:service:detail'"
                        @click="handleUpdate(row)"
                    >
                        [编辑]
                    </el-button>
                    <el-button
                        :type="row.useStatus == 1 ? 'warning' : 'primary'"
                        link
                        v-permission="'optimization:service:changeStatus'"
                        @click="handleChangeStatus(row)"
                    >
                        {{ row.useStatus == 1 ? '[停用]' : '[启用]' }}
                    </el-button>
                    <el-button
                        type="danger"
                        link
                        v-permission="'optimization:service:delete'"
                        @click="handleDelete(row)"
                    >
                        [删除]
                    </el-button>
                </div>
            </template>
        </common-table>
        <page-edit ref="pageEditRef" @refresh="reload()" />
    </ele-page>
</template>

<script setup>
    import { ref, reactive } from 'vue';
    import CommonTable from '@/components/CommonPage/CommonTable.vue';
    import pageEdit from './components/page-edit.vue';
    import { useDictData } from '@/utils/use-dict-data';

    defineOptions({ name: 'OptimizationList' });
    const [useStatusDicts] = useDictData(['use_status']);

    /** 表格列配置 */
    const columns = ref([
        { label: '服务名称', prop: 'uid', align: 'center' },
        {
            label: '服务介绍',
            prop: 'paymentCode',
            align: 'center',
            minWidth: 160
        },
        {
            label: '前台页面展示',
            prop: 'useStatus',
            align: 'center',
            slot: 'useStatus',
            minWidth: 120
        },
        {
            label: '状态',
            prop: 'useStatus',
            align: 'center',
            formatter: (row) =>
                useStatusDicts.value.find((d) => d.dictValue == row.useStatus)
                    ?.dictLabel
        },
        {
            columnKey: 'action',
            label: '操作',
            width: 220,
            align: 'center',
            slot: 'action'
        }
    ]);

    /** 页面组件实例 */
    const pageRef = ref(null);

    const pageConfig = reactive({
        pageUrl: '/baseinfo/godown/pagelist',
        exportUrl: '/baseinfo/godown/export',
        fileName: '客户优化管理',
        cacheKey: 'optimizationTable'
    });

    //刷新表格
    function reload(where) {
        pageRef.value?.reload(where);
    }

    //停用/启用
    function handleChangeStatus(row) {
        let message =
            row.useStatus == 1 ? '是否停用此服务？' : '是否启用此服务？';
        let data = JSON.parse(JSON.stringify(row));
        data.useStatus = row.useStatus == 1 ? 0 : 1;
        pageRef.value?.messageBoxConfirm({
            message,
            fetch: () => request.post('/baseinfo/godown/update', data)
        });
    }
    //删除
    function handleDelete(row) {
        pageRef.value?.messageBoxConfirm({
            message: '是否删除此服务？',
            fetch: () => request.post('/baseinfo/godown/delete', { id: row.id })
        });
    }

    //修改状态
    const statusSwitchChange = (value, row, key) => {
        let data = JSON.parse(JSON.stringify(row));
        let message =
            row.useStatus == 1 ? '是否开启前台展示？' : '是否关闭前台展示？';
        ElMessageBox.confirm(message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '关闭',
            type: 'warning'
        })
            .then(() => {
                data[key] = value;
                request.post('/baseinfo/godown/update', data).then((res) => {
                    if (res.data.code === 200) {
                        EleMessage.success('操作成功');
                        reload();
                    } else {
                        EleMessage.error(res.data.msg);
                    }
                });
            })
            .catch(() => {
                row[key] = value == 1 ? 0 : 1;
            });
    };

    //编辑
    const pageEditRef = ref(null);
    function handleUpdate(row) {
        pageEditRef.value?.handleOpen(row);
    }
</script>
