<template>
    <div class="message-push">
        <common-table
            ref="pageRef"
            :pageConfig="pageConfig"
            :columns="columns"
            :bodyStyle="{ padding: 0 }"
        >
            <template #toolbar>
                <div style="display: flex; align-items: center; gap: 10px">
                    <el-button
                        type="primary"
                        plain
                        :icon="PlusOutlined"
                        v-permission="'marketing:messagePush:add'"
                        @click="handleAdd()"
                    >
                        新增推送
                    </el-button>

                    <div style="display: flex; align-items: center; gap: 10px">
                        <el-input
                            v-model="search"
                            placeholder="搜索消息内容"
                            style="width: 300px"
                        />
                        <el-button type="primary" @click="reload()"
                            >查询</el-button
                        >
                        <el-button type="primary" plain @click="reset"
                            >重置</el-button
                        >
                    </div>
                </div>
            </template>
        </common-table>

        <message-push-dialog ref="dialogRef" @success="reload()" />
    </div>
</template>

<script setup>
    import { ref, reactive } from 'vue';
    import { EleMessage } from 'ele-admin-plus/es';
    import { PlusOutlined } from '@/components/icons';
    import CommonTable from '@/components/CommonPage/CommonTable.vue';
    import MessagePushDialog from './message-push-dialog.vue';
    import request from '@/utils/request';

    defineOptions({ name: 'MessagePush' });

    const search = ref('');
    const pageRef = ref(null);
    const dialogRef = ref(null);

    const reset = () => {
        search.value = '';
        reload();
    };

    /** 表格列配置 */
    const columns = ref([
        {
            label: '模板名称',
            prop: 'templateName',
            align: 'center',
            minWidth: 140
        },
        {
            label: '发送类型',
            prop: 'userType',
            align: 'center',
            width: 110,
            formatter: (row) => {
                return row.userType === 0 ? '全平台用户' : '部分用户';
            }
        },
        {
            label: '用户标签',
            prop: 'userSearch',
            align: 'center',
            minWidth: 140,
            formatter: (row) => {
                return row.tagNameList ? row.tagNameList.join(',') : '-';
            }
        },
        {
            label: '发送方式',
            prop: 'sendType',
            align: 'center',
            width: 110,
            formatter: (row) => {
                return row.sendType === 0 ? '立即发送' : '定时发送';
            }
        },
        {
            label: '发送时间',
            prop: 'sendTime',
            align: 'center',
            minWidth: 160
        },
        {
            label: '发送内容',
            prop: 'content',
            align: 'center',
            minWidth: 140
        },
        {
            label: '添加时间',
            prop: 'createTime',
            align: 'center',
            minWidth: 160
        }
    ]);

    const pageConfig = reactive({
        pageUrl: '/message/messagepush/pagelist',
        fileName: '消息推送',
        cacheKey: 'messagePushTable'
    });

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

    // 新增推送
    function handleAdd() {
        dialogRef.value?.handleOpen();
    }
</script>
