<template>
    <ele-page flex-table>
        <common-table
            ref="pageRef"
            :pageConfig="pageConfig"
            :columns="columns"
            :tools="false"
        >
            <template #toolbar>
                <div class="flex justify-between items-center">
                    <el-button
                        type="primary"
                        plain
                        v-permission="'customer:blackMobile:add'"
                        @click="handleUpdate()"
                        :icon="PlusOutlined"
                    >
                        新增
                    </el-button>

                    <div class="flex items-center">
                        <el-input
                            v-model="queryParams.mobile"
                            class="mr-6"
                            placeholder="请输入手机号"
                        />
                        <el-button
                            style="width: 80px"
                            type="primary"
                            @click="reload(queryParams)"
                            >查询</el-button
                        >
                        <el-button
                            style="width: 80px"
                            type="info"
                            @click="handleReset"
                            >重置</el-button
                        >
                    </div>
                </div>
            </template>

            <template #action="{ row }">
                <div>
                    <el-button
                        type="primary"
                        link
                        v-permission="'customer:blackMobile:update'"
                        @click="handleUpdate(row)"
                    >
                        [编辑]
                    </el-button>
                    <el-button
                        type="danger"
                        link
                        v-permission="'customer:blackMobile:delete'"
                        @click="handleDelete(row)"
                    >
                        [删除]
                    </el-button>
                </div>
            </template>
        </common-table>
        <page-edit ref="pageEditRef" @success="reload()" />
    </ele-page>
</template>

<script setup>
    import { ref, reactive } from 'vue';
    import { PlusOutlined } from '@/components/icons';
    import CommonTable from '@/components/CommonPage/CommonTable.vue';
    import pageEdit from './components/page-edit.vue';
    import request from '@/utils/request';

    defineOptions({ name: 'BlackMobileList' });

    const queryParams = reactive({ mobile: '' });
    /** 表格列配置 */
    const columns = ref([
        { label: '拉黑号码', prop: 'mobile', align: 'center' },
        { label: '拉黑时间', prop: 'createTime', align: 'center' },
        { label: '操作员', prop: 'createName', align: 'center' },
        { label: '拉黑原因', prop: 'reason', align: 'center', minWidth: 160 },
        { columnKey: 'action', label: '操作', align: 'center', slot: 'action' }
    ]);

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

    const pageConfig = reactive({
        pageUrl: '/user/mobileBlack/pagelist',
        exportUrl: '/user/mobileBlack/export',
        fileName: '黑名单手机号',
        cacheKey: 'blackMobileTable'
    });

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

    //删除
    function handleDelete(row) {
        pageRef.value?.messageBoxConfirm({
            message: '确认删除？',
            fetch: () => request.post('/user/mobileBlack/delete', [row.id])
        });
    }

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

    //重置
    function handleReset() {
        queryParams.mobile = '';
        reload();
    }
</script>
