<template>
    <ele-page flex-table>
        <page-search @search="reload" />

        <common-table ref="pageRef" :pageConfig="pageConfig" :columns="columns">
            <template #toolbar>
                <el-button
                    type="primary"
                    plain
                    :icon="PlusOutlined"
                    v-permission="'recycle:remindArea:add'"
                    @click="handleUpdate()"
                >
                    新增
                </el-button>
                <el-button
                    type="danger"
                    plain
                    :icon="DeleteOutlined"
                    v-permission="'recycle:remindArea:batchDelete'"
                    @click="handleBatchDelete()"
                >
                    批量删除
                </el-button>
            </template>

            <template #useStatus="{ row }">
                <dict-data
                    code="remind_area_status"
                    type="tag"
                    :model-value="row.useStatus"
                />
            </template>

            <template #action="{ row }">
                <div>
                    <!-- <el-button type="primary" link v-permission="'recycle:remindArea:update'"
                        @click="handleUpdate(row)">
                        编辑
                    </el-button> -->
                    <el-button
                        type="primary"
                        link
                        v-permission="'recycle:remindArea:delete'"
                        @click="handleDelete(row)"
                    >
                        删除
                    </el-button>
                    <el-button
                        :type="row.useStatus == 2 ? 'success' : 'danger'"
                        link
                        v-permission="'recycle:remindArea:changeStatus'"
                        @click="handleChangeStatus(row)"
                    >
                        {{ row.useStatus == 2 ? '启用' : '停用' }}
                    </el-button>
                </div>
            </template>
        </common-table>

        <page-edit ref="editRef" @success="reload()" />
    </ele-page>
</template>

<script setup>
    import { ref, reactive, getCurrentInstance } from 'vue';
    import { PlusOutlined, DeleteOutlined } from '@/components/icons';
    import CommonTable from '@/components/CommonPage/CommonTable.vue';
    import pageSearch from './components/page-search.vue';
    import pageEdit from './components/page-edit.vue';
    import { useDictData } from '@/utils/use-dict-data';
    import request from '@/utils/request';
    const { proxy } = getCurrentInstance();
    defineOptions({ name: 'RemindArea' });

    /** 表格列配置 */
    const columns = ref([
        {
            type: 'selection',
            columnKey: 'selection',
            width: 50,
            align: 'center',
            fixed: 'left'
        },
        {
            label: '提醒地区',
            prop: 'areaInfo',
            align: 'center'
        },
        { label: '推送人', prop: 'createName', align: 'center' },
        {
            label: '状态',
            prop: 'useStatus',
            align: 'center',
            slot: 'useStatus'
        },
        { label: '添加时间', prop: 'createTime', align: 'center' },
        {
            columnKey: 'action',
            label: '操作',
            width: 240,
            align: 'center',
            slot: 'action'
        }
    ]);

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

    const pageConfig = reactive({
        pageUrl: '/book/checkWarn/getAreaPageList',
        exportUrl: '',
        fileName: '审核提醒地区',
        cacheKey: 'remindAreaTable'
    });

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

    //批量删除
    function handleBatchDelete(row) {
        let selections = row ? [row] : pageRef.value?.getSelections();
        let ids = selections.map((item) => item.id);
        let url = `/book/checkWarn/deleteCheckWarnArea`;
        pageRef.value?.operatBatch({
            title: '确认删除？',
            method: 'post',
            url,
            row,
            data: {
                idList: ids
            }
        });
    }
    //启用停用
    function handleChangeStatus(row) {
        let message = row.useStatus == 1 ? '确认停用？' : '确认启用？';
        let data = {
            id: row.id,
            useStatus: row.useStatus == 1 ? 2 : 1
        };
        pageRef.value?.messageBoxConfirm({
            message,
            fetch: () => request.post('/book/checkWarn/setAreaStatus', data)
        });
    }

    //删除
    function handleDelete(row) {
        pageRef.value?.messageBoxConfirm({
            message: '确认删除？',
            fetch: () =>
                proxy.$http.post(`/book/checkWarn/deleteCheckWarnArea`, {
                    idList: [row.id]
                })
        });
    }

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