<template>
    <el-container>
        <el-main>
            <el-card style="background-color: #F5F7FA">
                <!-- 搜素区域 -->
                <div>
                    <el-row>
                        <el-col :span="4">
                            <el-input v-model="messageNote_queryInfo.username" placeholder="用户名称"
                                      size="medium" clearable prefix-icon="el-icon-search"></el-input>
                        </el-col>
                        <el-col :span="4">
                            <el-input v-model="messageNote_queryInfo.serverName" placeholder="服务器名称"
                                      size="medium" clearable prefix-icon="el-icon-search"></el-input>
                        </el-col>
                        <el-col :span="4">
                            <el-input v-model="messageNote_queryInfo.virtualHostName"
                                      size="medium" clearable prefix-icon="el-icon-search"
                                      placeholder="虚拟主机名称"></el-input>
                        </el-col>
                        <el-col :span="4">
                            <el-input v-model="messageNote_queryInfo.exchangeName" placeholder="交换机名称"
                                      size="medium" clearable prefix-icon="el-icon-search"></el-input>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="4">
                            <el-input v-model="messageNote_queryInfo.queueName" placeholder="队列名称"
                                      size="medium" clearable prefix-icon="el-icon-search"></el-input>
                        </el-col>
                        <el-col :span="4">
                            <el-input v-model="messageNote_queryInfo.routingKeyName" placeholder="路由键名称"
                                      size="medium" clearable prefix-icon="el-icon-search"></el-input>
                        </el-col>
                        <el-col :span="4">
                            <el-date-picker v-model="messageNote_queryInfo.sendTime" type="date"
                                            value-format="yyyy-MM-dd"
                                            placeholder="消息发送时间" size="medium" style="width: auto"></el-date-picker>
                        </el-col>
                        <el-col :span="4">
                            <el-date-picker v-model="messageNote_queryInfo.receiveTime" type="date"
                                            value-format="yyyy-MM-dd"
                                            placeholder="消息接收时间" size="medium" style="width: auto"></el-date-picker>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="15">
                            <el-button type="success" style="width:150px" size="medium" @click="messageNote_getList">
                                查询消息收发记录
                            </el-button>
                            <el-button type="primary" style="width:150px" size="medium"
                                       @click="messageNote_toAddDialog">
                                添加消息收发记录
                            </el-button>
                            <el-button type="warning" style="width:150px" size="medium"
                                       @click="messageNote_openDeleteTime">
                                设置定时删除
                            </el-button>
                        </el-col>
                    </el-row>
                </div>
                <!-- 列表区域 -->
                <div style="margin-top: 20px;">
                    <el-table :data="messageNote_page.messageNoteList" border
                              v-loading="messageNote_loading.listLoading"
                              @selection-change="messageNote_selectChange"
                              element-loading-text="获取消息收发记录，拼命加载中">
                        <el-table-column type="selection" width="55" align="center"></el-table-column>
                        <el-table-column type="index" align="center"></el-table-column>
                        <el-table-column label="用户名称" prop="username" align="center" width="220"></el-table-column>
                        <el-table-column label="服务器名称" prop="serverName" align="center" width="220"></el-table-column>
                        <el-table-column label="虚拟主机名称" prop="virtualHostName" align="center"
                                         width="220"></el-table-column>
                        <el-table-column label="交换机名称" prop="exchangeName" align="center" width="220"></el-table-column>
                        <el-table-column label="队列名称" prop="queueName" align="center" width="220"></el-table-column>
                        <el-table-column label="路由键名称" prop="routingKeyName" align="center"
                                         width="220"></el-table-column>
                        <el-table-column label="操作" width="245px" align="center" fixed="right">
                            <template slot-scope="scope">
                                <!-- 编辑按钮-->
                                <el-tooltip effect="dark" content="编辑" placement="top-start" :enterable="false">
                                    <el-button type="primary" icon="el-icon-edit" size="mini"
                                               @click="messageNote_toEditDialog(scope.$index,scope.row)">编辑
                                    </el-button>
                                </el-tooltip>
                                <!-- 删除按钮-->
                                <el-tooltip effect="dark" content="删除" placement="top-start" :enterable="false">
                                    <el-button type="danger" icon="el-icon-delete" size="mini"
                                               :loading="messageNote_loading.delLoading"
                                               @click="messageNote_remove(scope.$index,scope.row)">删除
                                    </el-button>
                                </el-tooltip>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <!--分页区域-->
                <div style="margin-top: 10px">
                    <el-row :gutter="24">
                        <el-col :span="5">
                            <el-button type="danger" icon="el-icon-delete"
                                       :loading="messageNote_loading.batchDelLoading"
                                       :disabled="this.messageNote_page.selectList.length===0"
                                       @click="messageNote_batchRemove">批量删除
                            </el-button>
                        </el-col>
                        <el-col :span="10" style="margin-top: 5px">
                            <el-pagination
                                    @size-change="messageNote_handleSizeChange"
                                    @current-change="messageNote_handleCurrentChange"
                                    :current-page="messageNote_queryInfo.pageNum"
                                    :page-sizes="[10,20,30,50]"
                                    :page-size="messageNote_queryInfo.pageSize"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total="messageNote_page.total">
                            </el-pagination>
                        </el-col>
                    </el-row>
                </div>
            </el-card>
        </el-main>
        <!-- 增加，对话框区域 -->
        <div>
            <el-dialog title="添加消息收发记录"
                       :visible.sync="messageNote_dialog.addDialog"
                       style="margin-top: -50px" text-align="center" width="50%"
                       @close="messageNote_addDialogClosed">

                <el-form :inline="true" label-width="120px" status-icon style="margin-top: -10px" align="center"
                         :model="messageNote_addForm" :rules="messageNote_addFormRules" ref="messageNote_addFormRef">
                    <el-form-item label="用户名称：" prop="username">
                        <el-input v-model="messageNote_addForm.username" style="width:240px" size="small" clearable
                                  placeholder="请输入用户名称">
                        </el-input>
                    </el-form-item>

                    <el-form-item label="服务器名称：" prop="serverName">
                        <el-input v-model="messageNote_addForm.serverName" placeholder="请输入服务器名称名称"
                                  clearable style="width:240px" size="small">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="虚拟主机名称：" prop="virtualHostName">
                        <el-input v-model="messageNote_addForm.virtualHostName" style="width:240px" size="small"
                                  clearable
                                  placeholder="请输入虚拟主机名称">
                        </el-input>
                    </el-form-item>

                    <el-form-item label="交换机名称：" prop="exchangeName">
                        <el-input v-model="messageNote_addForm.exchangeName" style="width:240px" size="small" clearable
                                  placeholder="请输入交换机名称">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="队列名称：" prop="queueName">
                        <el-input v-model="messageNote_addForm.queueName" style="width:240px" size="small" clearable
                                  placeholder="请输入队列名称">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="路由键名称：" prop="routingKeyName">
                        <el-input v-model="messageNote_addForm.routingKeyName" style="width:240px" size="small"
                                  clearable
                                  placeholder="请输入路由键名称">
                        </el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer" style="text-align: center;margin-top: -20px">
                    <el-button type="info" @click="messageNote_dialog.addDialog = false" size="medium"
                               style="width: 100px">取消
                    </el-button>
                    <el-button type="primary" @click="messageNote_add" :loading="messageNote_loading.addLoading"
                               size="medium" style="width: 100px">添加
                    </el-button>
                </div>
            </el-dialog>
        </div>
    </el-container>
</template>

<script>
    import {
        selectMessageNoteList,
        insertMessageNote,
        updateMessageNote,
        deleteMessageNote,
        batchRemoveMessageNote,
    } from "../../api/message_bus";

    export default {
        // 消息收发记录
        name: "MessageNote",

        data() {
            return {
                /**
                 * messageNote，配置与参数
                 */
                messageNote_config: {},
                /**
                 *  messageNote，搜索参数
                 */
                messageNote_queryInfo: {
                    // 用户名称
                    username: '',
                    // 服务器名称
                    serverName: '',
                    // 虚拟主机名称
                    virtualHostName: '',
                    // 交换机名称
                    exchangeName: '',
                    // 队列名称
                    queueName: '',
                    // 路由键名称
                    routingKeyName: '',
                    // 消息发送时间
                    sendTime: undefined,
                    // 消息获取时间
                    receiveTime: undefined,
                    // 当前页数
                    pageNum: 1,
                    // 每页条数
                    pageSize: 10
                },
                /**
                 * messageNote，分页
                 */
                messageNote_page: {
                    // 路由键列表
                    messageNoteList: [],
                    // 总条数
                    total: 0,
                    // 批量删除，选中列表
                    selectList: [],
                },
                /**
                 * messageNote，新增表单
                 */
                messageNote_addForm: {
                    // 用户名称
                    username: '',
                    // 服务器名称
                    serverName: '',
                    // 虚拟主机名称
                    virtualHostName: '',
                    // 交换机名称
                    exchangeName: '',
                    // 队列名称
                    queueName: '',
                    // 路由键名称
                    routingKeyName: '',
                },
                /**
                 * messageNote，编辑表单
                 */
                messageNote_editForm: {},
                /**
                 * messageNote，加载
                 */
                messageNote_loading: {
                    // 列表加载
                    listLoading: false,
                    // 添加加载
                    addLoading: false,
                    // 编辑加载
                    editLoading: false,
                    // 删除加载
                    delLoading: false,
                    // 批量删除加载
                    batchDelLoading: false,
                },
                /**
                 *  messageNote,对话框管理
                 */
                messageNote_dialog: {
                    // 添加对话框
                    addDialog: false,
                    // 编辑对话框
                    editDialog: false,
                    // 定时删除记录对话框
                    openDeleteTimeDialog: false,

                },

                /**
                 * messageNote,添加表单，验证规则
                 */
                messageNote_addFormRules: {
                    // 用户名称
                    username: [
                        {required: true, message: '请输入用户名称', trigger: ['blur', 'change']},
                    ],
                    // 服务器名称
                    serverName: [
                        {required: true, message: '请输入虚拟主机名称', trigger: ['blur', 'change']},
                    ],
                    // 虚拟主机名称
                    virtualHostName: [
                        {required: true, message: '请输入虚拟主机名称', trigger: ['blur', 'change']},
                    ],
                    // 队列名称
                    queueName: [
                        {required: true, message: '请输入队列名称', trigger: ['blur', 'change']},
                    ],
                    // 交换机名称
                    exchangeName: [
                        {required: true, message: '请输入交换机名称', trigger: ['blur', 'change']},
                    ],
                    // 路由键名称
                    routingKeyName: [
                        {required: true, message: '请输入路由键名称', trigger: ['blur', 'change']},
                    ],
                },
                /**
                 * messageNote,编辑表单，验证规则
                 */
                messageNote_editFormRules: {
                    // 队列名称
                    queueName: [
                        {required: true, message: '请输入队列名称', trigger: ['blur', 'change']},
                    ],
                },
                /**
                 * Boolean属性，选择列表
                 */
                booleanList: [
                    {
                        value: true,
                        label: '是'
                    },
                    {
                        value: false,
                        label: '否'
                    },
                ],
            }
        },
        methods: {
            /**
             * 分页查询，监听 pageSize 改变的事件
             */
            messageNote_handleSizeChange(newSize) {
                this.messageNote_queryInfo.pageSize = newSize;
                //刷新列表
                this.messageNote_getList();
            },
            /**
             * 分页查询，监听 pageNum 改变的事件
             */
            messageNote_handleCurrentChange(newPage) {
                this.messageNote_queryInfo.pageNum = newPage;
                //刷新列表
                this.messageNote_getList();
            },
            /**
             * messageNote,分页查询
             */
            messageNote_getList() {
                // 开启加载
                this.messageNote_loading.listLoading = true;
                selectMessageNoteList(this.messageNote_queryInfo).then((response) => {
                    let res = response.data;
                    if (res.code !== '200') {
                        // 关闭加载
                        this.messageNote_loading.listLoading = false;
                        return this.$message.error('获取消息收发记录，失败！');
                    }
                    // 获取列表数据
                    this.messageNote_page.messageNoteList = res.data.list;
                    // 获取列表的总记录数
                    this.messageNote_page.total = res.data.total;
                    // 关闭加载
                    this.messageNote_loading.listLoading = false;
                    this.$message.success('获取消息收发记录，成功！');
                }).catch(error => {
                    // 关闭加载
                    this.messageNote_loading.listLoading = false;
                    this.$message.error(error.toString());
                });
            },
            /**
             * messageNote，添加对话框，打开事件
             */
            messageNote_toAddDialog() {
                this.messageNote_dialog.addDialog = true;
            },
            /**
             * queue，添加对话框，关闭事件
             */
            messageNote_addDialogClosed() {
                // 重置对话框
                this.$refs.messageNote_addFormRef.resetFields();
            },
            /**
             * messageNote，添加功能
             */
            messageNote_add() {
                // 进行表单的预验证
                this.$refs.messageNote_addFormRef.validate(valid => {
                    // 未通过，表单预校验
                    if (!valid) return;
                    // 通过，表单预检验，开启加载
                    this.messageNote_loading.addLoading = true;
                    insertMessageNote(this.messageNote_addForm).then((response) => {
                        let res = response.data;
                        // 添加失败
                        if (res.code !== '200') {
                            if (res.code === '999') {
                                // 关闭加载
                                this.messageNote_loading.addLoading = false;
                                return this.$message.error('未知异常，添加消息收发记录，失败');
                            }
                            // 关闭加载
                            this.messageNote_loading.addLoading = false;
                            return this.$message.error('添加消息收发记录，失败');
                        }
                        // 添加，成功
                        this.$message.success('添加消息收发记录，成功');
                        // 关闭加载
                        this.messageNote_loading.addLoading = false;
                        // 隐藏对话框
                        this.messageNote_dialog.addDialog = false;
                        // 刷新列表
                        this.messageNote_getList();
                    }).catch(error => {
                        // 关闭加载
                        this.messageNote_loading.addLoading = false;
                        this.$message.error(error.toString());
                    });
                })
            },
            /**
             * messageNote，编辑对话框，打开事件
             */
            messageNote_toEditDialog(index, row) {
                this.messageNote_editForm = Object.assign({}, row);
                this.messageNote_dialog.editDialog = true;
            },
            /**
             * messageNote，编辑对话框，关闭事件
             */
            messageNote_editDialogClosed() {
                //重置对话框
                this.$refs.messageNote_editFormRef.resetFields();
            },
            /**
             * messageNote，编辑功能
             */
            messageNote_edit() {
                //进行表单的预验证
                this.$refs.messageNote_editFormRef.validate(valid => {
                    // 未通过，表单预校验
                    if (!valid) return;
                    // 通过，表单预检验，开启加载
                    this.messageNote_loading.editLoading = true;
                    updateMessageNote(this.messageNote_editForm).then((response) => {
                        let res = response.data;
                        if (res.code !== '200') {
                            if (res.code === '999') {
                                // 关闭加载
                                this.messageNote_loading.editLoading = false;
                                return this.$message.error('未知异常，编辑消息收发记录，失败');
                            }
                            //关闭加载
                            this.messageNote_loading.editLoading = false;
                            return this.$message.error('编辑消息收发记录，失败');
                        }
                        // 关闭加载
                        this.messageNote_loading.editLoading = false;
                        this.$message.success('编辑队列信息，成功！');
                        // 隐藏对话框
                        this.messageNote_dialog.editDialog = false;
                        // 刷新列表
                        this.messageNote_getList();
                    }).catch(error => {
                        // 关闭加载
                        this.messageNote_loading.editLoading = false;
                        this.$message.error(error.toString());
                    });
                })
            },
            /**
             * messageNote，删除功能
             */
            messageNote_remove(index, row) {
                // 弹框询问是否删除？
                this.$confirm('此操作永久删除该消息收发记录, 是否继续?', '警告', {
                        confirmButtonText: '确定删除',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }
                ).then(() => {
                    // 开启加载
                    this.messageNote_loading.delLoading = true;
                    deleteMessageNote(row).then((response) => {
                        let res = response.data;
                        if (res.code !== '200') {
                            // 关闭加载
                            this.messageNote_loading.delLoading = false;
                            return this.$message.error('删除队列信息，失败');
                        }
                        // 关闭加载
                        this.messageNote_loading.delLoading = false;
                        this.$message.success('删除队列信息，成功！');
                        // 刷新列表
                        this.messageNote_getList();
                    }).catch(error => {
                        // 关闭加载
                        this.messageNote_loading.delLoading = false;
                        this.$message.error(error.toString());
                    });
                }).catch(() => {
                });
            },
            /**
             * messageNote，批量删除---选中
             */
            messageNote_selectChange: function (selectList) {
                this.messageNote_page.selectList = selectList;
            },
            /**
             * messageNote，批量删除功能
             */
            messageNote_batchRemove() {
                const ids = this.messageNote_page.selectList.map(item => item.id).toString();
                this.$confirm('此操作将永久删除选中的消息收发记录, 是否继续?', '警告', {
                        confirmButtonText: '确定删除',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }
                ).then(() => {
                    // 开启加载
                    this.messageNote_loading.batchDelLoading = true;
                    let params = {ids: ids};
                    batchRemoveMessageNote(params).then(response => {
                        let res = response.data;
                        if (res.code !== '200') {
                            // 关闭加载
                            this.messageNote_loading.batchDelLoading = false;
                            return this.$message.error('批量删除消息收发记录，失败');
                        }
                        this.$message.success('批量删除消息收发记录，成功！');
                        // 关闭加载
                        this.messageNote_loading.batchDelLoading = false;
                        // 刷新列表
                        this.messageNote_getList();
                    }).catch(error => {
                        // 关闭加载
                        this.messageNote_loading.batchDelLoading = false;
                        this.$message.error(error.toString());
                    });
                }).catch(() => {
                });
            },

            messageNote_openDeleteTime() {

            },
            /**
             * 设置定时删除
             */
            messageNote_setDeleteTime() {

            },
        },
        created() {
            // 刷新列表
            this.messageNote_getList();
        },
        mounted() {

        },
        computed: {},
    }
</script>

<style scoped>

</style>