<template>
    <ele-page>
        <!-- 搜索表单 -->
        <post-search @search="reload" />
        <ele-card :body-style="{ paddingTop: '8px' }">
            <!-- 表格 -->
            <ele-pro-table
                ref="tableRef"
                row-key="postId"
                :columns="columns"
                :datasource="datasource"
                :show-overflow-tooltip="true"
                v-model:selections="selections"
                highlight-current-row
                :export-config="{ fileName: '岗位数据' }"
                cache-key="systemPostTable"
            >
                <template #toolbar>
                    <el-button
                        type="primary"
                        class="ele-btn-icon"
                        :icon="PlusOutlined"
                        v-permission="'system:post:add'"
                        @click="openEdit()"
                    >
                        新建
                    </el-button>
                    <el-button
                        type="danger"
                        class="ele-btn-icon"
                        :icon="DeleteOutlined"
                        v-permission="'system:post:remove'"
                        @click="removeBatch()"
                    >
                        删除
                    </el-button>
                    <el-button
                        class="ele-btn-icon"
                        :icon="DownloadOutlined"
                        v-permission="'system:post:export'"
                        @click="exportData"
                    >
                        导出
                    </el-button>
                </template>
                <template #status="{ row }">
                    <dict-data
                        code="sys_normal_disable"
                        type="tag"
                        :model-value="row.status"
                    />
                </template>
                <template #action="{ row }">
                    <el-link
                        v-permission="'system:post:edit'"
                        type="primary"
                        :underline="false"
                        @click="openEdit(row)"
                    >
                        修改
                    </el-link>
                    <el-divider
                        v-permission="[
                            'system:post:edit',
                            'system:post:remove'
                        ]"
                        direction="vertical"
                    />
                    <el-link
                        v-permission="'system:post:remove'"
                        type="danger"
                        :underline="false"
                        @click="removeBatch(row)"
                    >
                        删除
                    </el-link>
                </template>
            </ele-pro-table>
        </ele-card>
        <!-- 编辑弹窗 -->
        <post-edit v-model="showEdit" :data="current" @done="reload" />
    </ele-page>
</template>

<script setup>
    import { ref } from 'vue';
    import { ElMessageBox } from 'element-plus/es';
    import { EleMessage } from 'ele-admin-plus/es';
    import {
        PlusOutlined,
        DeleteOutlined,
        DownloadOutlined
    } from '@/components/icons';
    import { useDictData } from '@/utils/use-dict-data';
    import PostSearch from './components/post-search.vue';
    import PostEdit from './components/post-edit.vue';
    import { pagePosts, removePosts, exportPosts } from '@/api/system/post';

    defineOptions({ name: 'SystemPost' });

    /** 字典数据 */
    const [statusDicts] = useDictData(['sys_normal_disable']);

    /** 表格实例 */
    const tableRef = ref(null);

    /** 表格列配置 */
    const columns = ref([
        {
            type: 'selection',
            columnKey: 'selection',
            width: 50,
            align: 'center',
            fixed: 'left'
        },
        {
            type: 'index',
            columnKey: 'index',
            width: 50,
            align: 'center',
            fixed: 'left'
        },
        {
            prop: 'postCode',
            label: '岗位编码',
            align: 'center',
            minWidth: 110
        },
        {
            prop: 'postName',
            label: '岗位名称',
            align: 'center',
            minWidth: 110
        },
        {
            prop: 'postSort',
            label: '岗位排序',
            align: 'center',
            minWidth: 110
        },
        {
            prop: 'status',
            label: '状态',
            width: 90,
            align: 'center',
            minWidth: 110,
            slot: 'status',
            formatter: (row) =>
                statusDicts.value.find((d) => d.dictValue == row.status)
                    ?.dictLabel
        },
        {
            prop: 'createTime',
            label: '创建时间',
            align: 'center',
            width: 180
        },
        {
            columnKey: 'action',
            label: '操作',
            width: 140,
            align: 'center',
            slot: 'action',
            hideInPrint: true,
            hideInExport: true
        }
    ]);

    /** 表格选中数据 */
    const selections = ref([]);

    /** 当前编辑数据 */
    const current = ref(null);

    /** 是否显示编辑弹窗 */
    const showEdit = ref(false);

    /** 表格数据源 */
    const datasource = ({ pages, where, orders }) => {
        return pagePosts({ ...where, ...orders, ...pages });
    };

    /** 搜索 */
    const reload = (where) => {
        tableRef.value?.reload?.({ page: 1, where });
    };

    /** 打开编辑弹窗 */
    const openEdit = (row) => {
        current.value = row ?? null;
        showEdit.value = true;
    };

    /** 批量删除 */
    const removeBatch = (row) => {
        const rows = row == null ? selections.value : [row];
        if (!rows.length) {
            EleMessage.error('请至少选择一条数据');
            return;
        }
        ElMessageBox.confirm(
            `是否确认删除岗位编码为"${rows.map((d) => d.postCode).join()}"的数据项?`,
            '系统提示',
            { type: 'warning', draggable: true }
        )
            .then(() => {
                const loading = EleMessage.loading({
                    message: '请求中..',
                    plain: true
                });
                removePosts(rows.map((d) => d.postId))
                    .then(() => {
                        loading.close();
                        EleMessage.success('删除成功');
                        reload();
                    })
                    .catch((e) => {
                        loading.close();
                        EleMessage.error(e.message);
                    });
            })
            .catch(() => {});
    };

    /** 导出数据 */
    const exportData = () => {
        const loading = EleMessage.loading({
            message: '请求中..',
            plain: true
        });
        tableRef.value?.fetch?.(({ where, orders }) => {
            exportPosts({ ...where, ...orders })
                .then(() => {
                    loading.close();
                })
                .catch((e) => {
                    loading.close();
                    EleMessage.error(e.message);
                });
        });
    };
</script>
