<template>
	<el-card shadow="never" class="list-card">
		<template #header>
			<div class="search">
                <el-form :model="queryParams" ref="queryFormRef" :inline="true">
                    <el-form-item prop="title">
                        <el-input
                            v-model="queryParams.title"
                            placeholder="搜索公告标题"
                            clearable
                            @keyup.enter="handleQuery"
                            prefix-icon="Search"
                        />
                    </el-form-item>
                    <el-form-item prop="startDate">
                        <el-date-picker
                            v-model="rangeTime"
                            type="daterange"
                            value-format="YYYY-MM-DD"
                            start-placeholder="发布时间"
                            end-placeholder="发布时间"
                            @change="changeTime"
                        />
                    </el-form-item>
                    <el-form-item prop="columnValue">
                        <SelectDict v-model="queryParams.columnValue" placeholder="选择栏目" dictCode="bulletin_column"></SelectDict>
                    </el-form-item>
                    <el-form-item prop="createUserId">
                        <SelectUser multiple v-model="queryParams.createByIds" placeholder="发布人员"></SelectUser>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
		</template>

		<Table
			ref="taskTableRef"
			:tableParams="tableParams"
			:btnRole="btnRole"
			@handleAdd="handleAdd('add')"
			@handleEdit="handleAdd('edit', $event)"
			:right-btn="[]"
			:is-checkbox="false"
		>
            <template #left>
                <el-button type="primary" v-hasPermi="['system:bulletin:add']" @click="handleAdd('add')">
                    发布
                </el-button>
            </template>
		</Table>
	</el-card>

	<AddBulletin ref="addBulletinRef" @refresh="handleQuery" />
</template>

<script setup name="Task" lang="ts">
    import { listBulletin, delBulletin } from '@/api/system/bulletin';
    import { BulletinVO, BulletinQuery } from '@/api/system/bulletin/types';
    import Table from '@/components/Table/index.vue'
    import { tableTypes } from '@/components/Table/types'
    import { useDictCache } from '@/hooks/web/useDict'
    import AddBulletin from './add.vue'

    const { queryDictDetailByCodes } = useDictCache(['bulletin_column'])
    queryDictDetailByCodes()

    const router = useRouter()
    const btnRole = ref([
        { type: 'edit', hasPermi: `system:bulletin:edit` },
        { type: 'remove', hasPermi: `system:bulletin:remove` },
    ])

    const rangeTime = ref()
    const changeTime = (value: string[] | null) => {
        queryParams.value.startDate = value ? value[0] : undefined
        queryParams.value.endDate = value ? value[1] : undefined
    }

    const tableParams = reactive<tableTypes<BulletinQuery, BulletinVO>>({
        menuId: router.currentRoute.value?.meta?.menuId,
        tableColumn: [
            { show: true, label: '公告标题', prop: 'title' },
            { show: true, label: '发布人员', prop: 'staffName' },
		    { show: true, label: '发布时间', prop: 'createTime' },
            { show: true, label: '所属栏目', prop: 'columnName' },
            { show: true, label: '接收人员', prop: 'noticeUserNames', render: ({ column }: { column: BulletinVO }) => {
                return column.bulletinType == 1 ? '全体员工' : (column.noticeUserNames || '全体员工')
            } },
            {
                show: true, label: '操作', width: 150, prop: 'operation', disabledMove: true, render: () => {
                    return []
                }
            },
        ],
        queryParams: {
            title: undefined,
            startDate: undefined,
            columnValue: undefined,
            createByIds: undefined,
        },
        listFn: listBulletin,
        delFn: delBulletin,
        keyId: 'id',
        exportCode: 'EXPORT_TASK_EXCEL',
    })

    const { queryParams } = toRefs(tableParams);

    const taskTableRef = ref()
    /** 搜索按钮操作 */
    const handleQuery = () => {
        taskTableRef.value.getData()
    }

    const queryFormRef = ref()
    const resetQuery = () => {
        rangeTime.value = []
        queryParams.value.startDate = undefined
        queryParams.value.endDate = undefined
        queryFormRef.value?.resetFields();
        handleQuery()
    }

    /** 新增按钮操作 */
    const addBulletinRef = ref()
    const handleAdd = (type: string, data?: BulletinVO) => {
        addBulletinRef.value.open(type, data?.id)
    }
</script>
