<template>
    <el-card shadow="never" class="list-card">
        <template #header>
            <div class="search" v-show="showSearch">
                <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
                    <el-form-item  prop="noticeUserIds">
                        <el-input v-model="queryParams.noticeUserIds" placeholder="关键词" clearable style="width: 240px" @keyup.enter="handleQuery" />
                    </el-form-item>
<!--                    <el-form-item  prop="deadlineDate">-->
<!--                        <el-date-picker clearable-->
<!--                                        v-model="queryParams.deadlineDate"-->
<!--                                        type="date"-->
<!--                                        value-format="YYYY-MM-DD"-->
<!--                                        placeholder="请选择截止时间"-->
<!--                        />-->
<!--                    </el-form-item>-->
                    <el-form-item  prop="title">
                        <el-input v-model="queryParams.title" placeholder="请输入标题" clearable style="width: 240px" @keyup.enter="handleQuery" />
                    </el-form-item>
                    <el-form-item  prop="noticeTime">
                        <el-date-picker clearable
                                        v-model="queryParams.noticeTime"
                                        type="date"
                                        value-format="YYYY-MM-DD"
                                        placeholder="请选择通知时间"
                        />
                    </el-form-item>
                    <el-form-item  prop="noticeUserIds">
                        <el-input v-model="queryParams.noticeUserIds" placeholder="请选择发布人员" clearable style="width: 240px" @keyup.enter="handleQuery" />
                    </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="bulletinTable"
               :tableParams="tableParams"
               :btnRole="leftBtn"
               @handleAdd="handleAdd"
               @handleEdit="handleUpdate"
               @selectionChange="handleSelectionChange"
        >
<!--            <template #left>-->
<!--                <el-button>demoBotton</el-button>-->
<!--            </template>-->
<!--            <template #right>-->
<!--                <el-button link @click="openRule"><i-ep-QuestionFilled /> 右侧demoBotton</el-button>-->
<!--            </template>-->
        </Table>
    </el-card>
    <!-- 添加或修改公告主对话框 -->
    <el-dialog :title="dialog.title" v-model="dialog.visible" width="900px" append-to-body>
        <el-form ref="bulletinFormRef" :model="form" :rules="rules" label-width="120px">
            <el-form-item  label="选择栏目" prop="columnValue">
                <SelectDict v-model="form.columnValue" placeholder="请选择商机类型"
                            dictCode="column_value"></SelectDict>
            </el-form-item>

            <el-form-item label="标题" prop="title">
                <el-input v-model="form.title" placeholder="请输入标题" />
            </el-form-item>
            <el-form-item label="接收人员" prop="title">
                <el-radio-group v-model="form.bulletinType"  >
                    <el-radio value="1">全体员工</el-radio>
                    <el-radio value="2">指定人员</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item v-if="form.bulletinType == 2" label="通知人员" prop="noticeUserIdList">
                <SelectUser v-model.lazy="form.noticeUserIdList" multiple placeholder="请选择归属人"></SelectUser>
            </el-form-item>
            <el-form-item label="内容">
                <editor v-model="form.content" :min-height="192"/>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button :loading="buttonLoading" type="primary" @click="submitForm">提交</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </template>
    </el-dialog>

    <!-- 添加或修改发票对话框 -->
    <el-dialog title="" v-model="detailDialog" width="900px" append-to-body>
        <template #header>
            <div class="bulletin-detail-content">
                <p class="title">{{detailDataForm.title}}</p>
            </div>
        </template>
        <div class="bulletin-detail-content">

            <div class="desc-content">
                <span>发布人员：{{ detailDataForm.staffName }}</span><span>发布时间：{{ detailDataForm.createTime }}</span><span>   接收人员：{{ detailDataForm.bulletinType == 1?'全体人员' : '指定人员' }}   </span><span> 浏览次数：999 </span> <span>   查看浏览记录</span>
            </div>
            <div class="content" v-html="detailDataForm.content">

            </div>
        </div>

        <template #footer>
            <div class="dialog-footer">
                <el-button @click="detailCancel">关 闭</el-button>
            </div>
        </template>
    </el-dialog>

</template>

<script setup name="Bulletin" lang="ts">
    import { listBulletin, getBulletin, delBulletin, addBulletin, updateBulletin } from '@/api/system/bulletin';
    import { BulletinVO, BulletinQuery, BulletinForm } from '@/api/system/bulletin/types';
    import auth from '@/plugins/auth'
    import Table from '@/components/Table/index.vue'
    import { tableTypes } from '@/components/Table/types'
    import {useDictCache} from '@/hooks/web/useDict'
    const { proxy } = getCurrentInstance() as ComponentInternalInstance;



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

    const bulletinList = ref<BulletinVO[]>([]);
    const buttonLoading = ref(false);
    const loading = ref(true);
    const detailDialog = ref(false);//详情
    const showSearch = ref(true);
    const ids = ref<Array<string | number>>([]);
    const leftBtn = ref(
        [
            {type:'remove',hasPermi: 'system:bulletin:remove'},
            {type:'add',hasPermi: 'system:bulletin:add'},
            // {type:'edit',hasPermi: 'system:bulletin:edit'},
            {type:'import',hasPermi: 'system:bulletin:import'},
            // {type:'export',hasPermi: 'system:bulletin:export'},
        ]);
    const single = ref(true);
    const multiple = ref(true);
    const total = ref(0);

    const queryFormRef = ref<ElFormInstance>();
    const bulletinFormRef = ref<ElFormInstance>();
    const detailDataForm = ref<BulletinForm>();

    const dialog = reactive<DialogOption>({
        visible: false,
        title: ''
    });


    const tableParams = reactive<tableTypes<BulletinQuery, BulletinVO>>({
        tableColumn: [
            {show: true, label: '标题', prop: 'title', sortable: false},
            {show: true, label: '发布人员', prop: 'staffName', sortable: false, },
            // {show: true, label: '通知时间', prop: 'noticeTime', sortable: true},
            // {show: true, label: '内容', prop: 'content', sortable: true},
            {show: true, label: '所属栏目', prop: 'columnValue', sortable: false},
            {show: true, label: '接收人员', prop: 'createTime', sortable: false, render: ({ column }: { column: BulletinVO }) => {
                return [h('span', column.bulletinType == 1 ? '全体员工' : '指定人员')]
            }},
            {show: true, label: '已读状态', prop: 'updateTime', sortable: false},
            {
                show: true, label: '操作', width: 200, prop: 'operation', disabledMove: true, render: ({ column }: { column: BulletinVO }) => {
                    return [
                        auth.hasPermi('system:user:demo')? h(ElButton, {link: true, type: 'primary',onClick:() => {}}, 'demo') : '',
                        auth.hasPermi('system:bulletin:detail') ? h(ElButton, {
                            link: true, type: 'primary', onClick: () => {
                                detail(column)
                            }
                        }, '详情') : '',
                    ]
                }
            },
        ],
        keyId: 'id',
        queryParams: {
            deadlineDate: undefined,
            title: undefined,
            content: undefined,
            bulletinType: undefined,
            noticeTime: undefined,
            noticeUserIds: undefined,
            isDelete: undefined,
            enabled: undefined,
            ownerBy: undefined,
            formerOwnerBy: undefined,
            sort: undefined,
        },
        listFn: listBulletin,
        delFn: delBulletin,
    })


    const initFormData: BulletinForm = {
        id: undefined,
        deadlineDate: undefined,
        title: undefined,
        content: undefined,
        bulletinType: undefined,
        noticeTime: undefined,
        noticeUserIds: undefined,
        isDelete: undefined,
        enabled: undefined,
        ownerBy: undefined,
        formerOwnerBy: undefined,
        sort: undefined,
        noticeUserIdList:[]
    }
    const data = reactive<PageData<BulletinForm, BulletinQuery>>({
        form: {...initFormData},
        rules: {
            columnValue: [
                { required: true, message: "请选择栏目", trigger: "change" }
            ],
            deadlineDate: [
                { required: true, message: "截止时间不能为空", trigger: "blur" }
            ],
                title: [
                { required: true, message: "标题不能为空", trigger: "blur" }
            ],
                content: [
                { required: true, message: "内容不能为空", trigger: "blur" }
            ],
                bulletinType: [
                { required: true, message: "通知范围不能为空", trigger: "change" }
            ],
                noticeTime: [
                { required: true, message: "通知时间不能为空", trigger: "blur" }
            ],
            noticeUserIdList: [
                { required: true, type: "array", message: "通知人员不能为空", trigger: "change" }
            ],

        }
    });

    const {  form, rules } = toRefs(data);

    const { queryParams } = toRefs(tableParams);
    /** 取消按钮 */
    const cancel = () => {
        reset();
        dialog.visible = false;
    }

    /** 表单重置 */
    const reset = () => {
        form.value = {...initFormData};
            bulletinFormRef.value?.resetFields();
    }

    const bulletinTable = ref()
    /** 搜索按钮操作 */
    const handleQuery = () => {
            bulletinTable.value.getData()
    }
    /** 取消按钮 */
    const detailCancel = () => {
        detailDialog.value = false;
    }

    /** 重置按钮操作 */
    const resetQuery = () => {
        queryFormRef.value?.resetFields();
        handleQuery();
    }

    /** 多选框选中数据 */
    const handleSelectionChange = (selection: BulletinVO[]) => {
        ids.value = selection.map(item => item.id);
        single.value = selection.length != 1;
        multiple.value = !selection.length;
    }

    /** 新增按钮操作 */
    const handleAdd = () => {
        reset();
        dialog.visible = true;
        dialog.title = "添加公告主";
    }
    /** 修改按钮操作 */
    const detail = async (row?: BulletinVO) => {
        detailDataForm.value = row
        detailDialog.value = true;
    }
    /** 修改按钮操作 */
    const handleUpdate = async (row?: BulletinVO) => {
        reset();
        // const _id = row?.id || ids.value[0]
        // const res = await getBulletin(_id);
        Object.assign(form.value, row);
        dialog.visible = true;
        dialog.title = "修改公告";
    }
    const getList = () => {
            bulletinTable.value.getData()
    }
    /** 提交按钮 */
    const submitForm = () => {
            bulletinFormRef.value?.validate(async (valid: boolean) => {
            if (valid) {
                buttonLoading.value = true;
                if (form.value.id) {
                    await updateBulletin(form.value).finally(() =>  buttonLoading.value = false);
                } else {
                    await addBulletin(form.value).finally(() =>  buttonLoading.value = false);
                }
                proxy?.$modal.msgSuccess("修改成功");
                dialog.visible = false;
                await getList();
            }
        });
    }


    onMounted(() => {
    });
</script>

<style lang="scss">
.bulletin-detail-content{
    .title{
        font-size: 32px;
        font-weight: 700;
        color: #333;
        text-align: center;
        padding: 0;
    }
    .el-dialog__body{
        padding: 0px 10px !important;

    }
    .desc-content{
        background: #e5e5e5;
        display: flex;
        padding: 10px;
        span{
            margin-right: 15px;

        }
    }
    .content{
        padding: 10px;

    }
}

</style>
