<template>
    <ele-page flex-table>
        <common-table
            ref="pageRef"
            :pageConfig="pageConfig"
            :columns="columns"
            :tools="false"
        >
            <template #action="{ row }">
                <div>
                    <el-button
                        type="primary"
                        link
                        v-permission="'optimization:list:detail'"
                        @click="handleUpdate(row)"
                    >
                        [编辑]
                    </el-button>
                    <el-button
                        :type="row.useStatus == 1 ? 'warning' : 'primary'"
                        link
                        v-permission="'optimization:list:changeStatus'"
                        @click="handleChangeStatus(row)"
                    >
                        {{ row.useStatus == 1 ? '[停用]' : '[启用]' }}
                    </el-button>
                    <el-button
                        type="danger"
                        link
                        v-permission="'optimization:list: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 '@/views/optimization/list/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',
            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 pageEditRef = ref(null);
    function handleUpdate(row) {
        pageEditRef.value?.handleOpen(row);
    }
</script>
