<script lang="ts">
export default {
    name: "announce",
};
</script>

<script setup lang="ts">
import moment from "moment";
import { onMounted, reactive, ref, toRefs } from "vue";
import { ElTable, ElForm, ElMessage, ElMessageBox } from "element-plus";
import {
    Search,
    Refresh,
    ArrowUp,
    ArrowDown,
    Plus,
    Delete,
} from "@element-plus/icons-vue";
// 自定义组件依赖
import Editor from "@/components/WangEditor/index.vue";
import { stickTopAnnounce, announceDown } from "@/api/cms";
import {
    messageDetailList,
    messageType,
    addMessageAllsend,
    messageDetailUpdata,
    messageDetailDel,
} from "@/api/messageCenter/index";
import { AnnounceFormData } from "@/types/api/messageCenter/index";

const emit = defineEmits(["AnnounceClick"]);
const dataTableRef = ref(ElTable);
const queryFormRef = ref(ElForm);
const dataFormRef = ref(ElForm);

const state = reactive({
    loading: true,
    // 选中ids数组
    ids: [],
    // 非单个禁用
    single: true,
    // 非多个禁用
    multiple: true,
    queryParams: {
        currentPage: 1,
        pageSize: 15,
        receiverId: "",
        senderId: "",
        isRead: "",
        isSend: "",
    },
    list: [],
    total: 0,
    isCreate: false,
    dialog: {
        title: "",
        visible: false,
    },
    formData: {} as AnnounceFormData,
    rules: {
        // messageTitle: [
        //     { required: true, message: "请输入公告标题", trigger: "blur" },
        // ],
        // messageTypeId: [
        //     { required: true, message: "请选择公告分类", trigger: "blur" },
        // ],
        // lang: [{ required: true, message: "请选择公告语言", trigger: "blur" }],
        // isShow: [
        //     { required: true, message: "请选择公告状态", trigger: "blur" },
        // ],
    },
    sendNow: true,
    searchBox: {
        title: "展开搜索",
        expand: false,
    },
});

const {
    searchBox,
    loading,
    multiple,
    queryParams,
    list,
    total,
    isCreate,
    dialog,
    formData,
    rules,
} = toRefs(state);

function handleQuery() {
    state.loading = true;
    messageDetailList(state.queryParams).then(({ data }) => {
        state.list = data.records;
        state.total = data.total;
        state.loading = false;
    });
}

function handleSelectionChange(selection: any) {
    state.ids = selection.map((item: any) => item.id);
    state.single = selection.length !== 1;
    state.multiple = !selection.length;
}

function handleAdd() {
    state.dialog = {
        title: "添加公告",
        visible: true,
    };
    state.isCreate = true;
    formData.value.id = 0;
    formData.value.messageTitle = "";
    formData.value.imgUrl = "";
    formData.value.lang = "zh_CN";
    state.sendNow = true;
    formData.value.messageTypeId = 1;
    formData.value.content = "";
    formData.value.createTime = "";
}

/**
 * 提交新增/编辑
 */
function submitFormData() {
    dataFormRef.value.validate((valid: any) => {
        if (valid) {
            loading.value = true;
            if (state.formData.id) {
                messageDetailUpdata(state.formData).then(() => {
                    ElMessage.success("修改成功");
                    cancel();
                    handleQuery();
                    loading.value = false;
                });
            } else {
                addMessageAllsend(state.formData, state.sendNow).then(() => {
                    cancel();
                    ElMessage.success("添加成功");
                    handleQuery();
                    loading.value = false;
                });
            }
        }
    });
}

/**
 * 取消
 */
function cancel() {
    dialog.value.visible = false;
    formData.value.id = 0;
    formData.value.messageTitle = "";
    formData.value.imgUrl = "";
    formData.value.lang = "";
    formData.value.isShow = false;
    formData.value.messageTypeId = 0;
    formData.value.content = "";
    formData.value.createTime = "";
    dataFormRef.value.resetFields();
    dataFormRef.value.clearValidate();
}

/**
 *  删除
 */
function handleDelete() {
    const ids = state.ids.join(",");
    ElMessageBox.confirm(
        "确认删除已选中的" + state.ids.length + "条数据项?",
        "警告",
        {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
        }
    )
        .then(() => {
            messageDetailDel({ ids: ids }).then(() => {
                ElMessage.success("删除成功");
                handleQuery();
            });
        })
        .catch(() => ElMessage.info("已取消删除"));
}

/**
 * 查看 / 编辑
 * @param row
 */
const viewEdit = (row: any) => {
    state.dialog = {
        title: "修改",
        visible: true,
    };
    state.isCreate = false;
    formData.value.id = row.id;
    formData.value.messageTitle = row.messageTitle;
    state.sendNow = row.isSend;
    formData.value.messageTypeId = row.messageTypeId;
    formData.value.content = row.content;
    formData.value.createTime = row.createdTime;
    formData.value.sendTime = row.sendTime;
};

/**
 * 查询重置
 */
function resetQuery() {
    queryFormRef.value.resetFields();
    state.queryParams.isRead = "";
    state.queryParams.isSend = "";
    handleQuery();
}

/**
 * 展开/收起搜索
 */
const closeSearch = () => {
    state.searchBox.expand = !state.searchBox.expand;
    state.searchBox.title = !state.searchBox.expand ? "展开搜索" : "收起搜索";
};

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

<template>
    <div class="app-container">
        <!-- 搜索表单 -->
        <el-form ref="queryFormRef" :model="queryParams" :inline="true">
            <el-row>
                <el-col :span="22">
                    <el-form-item prop="senderId">
                        <el-tooltip
                            content="请输入发送者ID搜索"
                            placement="bottom"
                            effect="light"
                        >
                            <el-input
                                v-model="queryParams.senderId"
                                placeholder="发送者ID"
                                style="width: 180px"
                                clearable
                                @keyup.enter="handleQuery"
                            />
                        </el-tooltip>
                    </el-form-item>
                    <el-form-item prop="receiverId">
                        <el-tooltip
                            content="请输入发送者ID搜索"
                            placement="bottom"
                            effect="light"
                        >
                            <el-input
                                v-model="queryParams.receiverId"
                                placeholder="接收者ID"
                                style="width: 180px"
                                clearable
                                @keyup.enter="handleQuery"
                            />
                        </el-tooltip>
                    </el-form-item>

                    <el-form-item prop="type" v-show="searchBox.expand">
                        <span>阅读状态：</span>
                        <el-select
                            v-model="queryParams.isRead"
                            class="filter-item"
                            placeholder="请选择"
                            style="width: 100px"
                        >
                            <el-option :value="true" label="已读" />
                            <el-option :value="false" label="未读" />
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="type" v-show="searchBox.expand">
                        <span>发送状态：</span>
                        <el-select
                            v-model="queryParams.isSend"
                            class="filter-item"
                            placeholder="请选择"
                            style="width: 100px"
                        >
                            <el-option :value="true" label="已发送" />
                            <el-option :value="false" label="未发送" />
                        </el-select>
                    </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-button
                            link
                            @click="closeSearch"
                            style="border: 0"
                            size="small"
                        >
                            {{ searchBox.title }}
                            <template v-if="searchBox.expand"
                                ><el-icon class="el-icon--right"
                                    ><ArrowUp /></el-icon
                            ></template>
                            <template v-else
                                ><el-icon class="el-icon--right"
                                    ><ArrowDown /></el-icon
                            ></template>
                        </el-button>
                    </el-form-item>
                </el-col>
                <el-col :span="2">
                    <el-form-item style="float: right">
                        <!-- <el-button type="success" :icon="Plus" @click="handleAdd"
                        >添加</el-button
                        > -->
                        <el-button
                            type="danger"
                            :icon="Delete"
                            :disabled="multiple"
                            @click="handleDelete"
                            >删除</el-button
                        >
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <!-- 数据表格 -->
        <el-table
            ref="dataTableRef"
            v-loading="loading"
            :data="list"
            @selection-change="handleSelectionChange"
            highlight-current-row
            border
        >
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column
                label="编号"
                prop="id"
                min-width="80"
                align="center"
            />

            <el-table-column
                label="接收ID"
                prop="receiverId"
                min-width="180"
                align="center"
            />
            <el-table-column
                label="发送ID"
                prop="senderId"
                min-width="100"
                align="center"
            >
                <!-- <template #default="scope">
                    <span>{{ messageJudgment(scope.row.messageTypeId) }}</span>
                </template> -->
            </el-table-column>
            <el-table-column
                label="内容"
                prop="content"
                min-width="180"
                align="center"
            >
                <!-- <template #default="scope">
                    <div v-html="scope.row.content"></div>
                </template> -->
            </el-table-column>

            <el-table-column
                label="阅读状态"
                prop="isRead"
                min-width="80"
                align="center"
            >
                <template #default="scope">
                    <span v-if="scope.row.isRead">已读</span>
                    <span v-else>未读</span>
                </template>
            </el-table-column>
            <el-table-column
                label="发送状态"
                prop="isSend"
                min-width="80"
                align="center"
            >
                <template #default="scope">
                    <span v-if="scope.row.isSend">已发送</span>
                    <span v-else>未发送</span>
                </template>
            </el-table-column>

            <el-table-column
                label="发布时间"
                prop="createdTime"
                min-width="160"
                align="center"
            />
            <el-table-column
                label="修改时间"
                prop="updatedTime"
                min-width="160"
                align="center"
            />
            <el-table-column
                label="操作"
                align="center"
                width="280"
                fixed="right"
            >
                <template #default="scope">
                    <el-button
                        type="primary"
                        size="small"
                        @click.stop="viewEdit(scope.row)"
                        >修改</el-button
                    >
                    <!-- <el-button
                        type="danger"
                        size="small"
                        @click.stop="setTop(scope.row)"
                        >置顶</el-button
                    >
                    <el-button
                        type="danger"
                        size="small"
                        @click.stop="cancelTop(scope.row)"
                        >取消置顶</el-button
                    > -->
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页工具条 -->
        <pagination
            v-if="total > 0"
            :total="total"
            v-model:page="queryParams.currentPage"
            v-model:limit="queryParams.pageSize"
            @pagination="handleQuery"
        />

        <!-- 表单弹窗 -->
        <el-dialog
            :title="dialog.title"
            v-model="dialog.visible"
            width="800px"
            destroy-on-close
        >
            <el-form
                ref="dataFormRef"
                :model="formData"
                :rules="rules"
                label-width="100px"
            >
                <el-form-item
                    label="创建时间"
                    prop="createTime"
                    v-if="!isCreate"
                >
                    <el-input
                        v-model="formData.createTime"
                        placeholder="请输入"
                        disabled
                    />
                </el-form-item>

                <el-form-item
                    label="发送时间"
                    prop="messageTypeId"
                    v-if="!state.sendNow"
                >
                    <el-date-picker
                        v-model="formData.sendTime"
                        type="datetime"
                        placeholder="Select date and time"
                    />
                </el-form-item>
                <el-form-item :label-width="0" prop="content">
                    <editor v-model="formData.content" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitFormData"
                        >确 定</el-button
                    >
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
