<template>
    <el-container>
        <el-main>
            <el-card style="background-color: #F5F7FA">
                <!-- 搜素区域 -->
                <div>
                    <el-row>
                        <el-col :span="5">
                            <el-input v-model="umb_queryInfo.username"
                                      size="medium"
                                      placeholder="用户名称" clearable>
                                <template  slot="prepend" ><i class="el-icon-user"></i>用户名称</template>
                            </el-input>
                        </el-col>
                        <el-col :span="6">
                            <el-input v-model="umb_queryInfo.serverName"
                                      size="medium"
                                      placeholder="服务器名称" clearable>
                                <template  slot="prepend"><i class="el-icon-s-platform"></i>服务器名称</template>
                            </el-input>
                        </el-col>
                        <el-col :span="6">
                            <el-input v-model="umb_queryInfo.virtualHostName"
                                      size="medium"
                                      placeholder="虚拟主机名称" clearable>
                                <template  slot="prepend"><i class="el-icon-s-operation"></i>虚拟主机名称</template>
                            </el-input>
                        </el-col>
                        <el-col :span="6">
                            <el-input v-model="umb_queryInfo.exchangeName"
                                      size="medium"
                                      placeholder="交换机名称" clearable>
                                <template  slot="prepend"><i class="el-icon-sort"></i>交换机名称</template>
                            </el-input>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="5">
                            <el-input v-model="umb_queryInfo.queueName"
                                      size="medium"
                                      placeholder="队列名称" clearable>
                                <template  slot="prepend"><i class="el-icon-notebook-2"></i>队列名称</template>
                            </el-input>
                        </el-col>
                        <el-col :span="6">
                            <el-input v-model="umb_queryInfo.routingKeyName"
                                      size="medium"
                                      placeholder="路由键名称" clearable>
                                <template  slot="prepend" ><i class="el-icon-user"></i>路由键名称</template>
                            </el-input>
                        </el-col>
                        <el-col :span="8">
                            <el-button type="warning" style="width:150px" size="medium" icon="el-icon-search" @click="umb_getList">
                                查询配置信息
                            </el-button>
                            <el-button type="primary" style="width:150px" size="medium" icon="el-icon-plus" @click="umb_toAddDialog">
                                添加配置信息
                            </el-button>
                        </el-col>
                    </el-row>
                </div>
                <!-- 列表区域 -->
                <div style="margin-top: 20px;">
                    <el-table :data="umb_page.umbList" border v-loading="umb_loading.listLoading"
                              @selection-change="umb_selectChange" size="small"
                              element-loading-text="获取配置信息列表，拼命加载中"
                              :header-cell-style="{background:'#6F8294',color:'#FFFFFF'}"
                              style="border-radius: 10px 10px 0px 0px;line-height: 25px;">
                        <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="subscriber" 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="400"></el-table-column>
                        <el-table-column label="路由键名称" prop="routingKeyName" align="center"
                                         width="220"></el-table-column>
                        <el-table-column label="相关描述" prop="description" 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-view" size="mini"
                                               @click="umb_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="umb_loading.listLoading"
                                               @click="umb_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="umb_loading.listLoading"
                                       :disabled="this.umb_page.selectList.length===0"
                                       @click="umb_batchRemove">批量删除
                            </el-button>
                        </el-col>
                        <el-col :span="10" style="margin-top: 5px">
                            <el-pagination
                                    @size-change="umb_handleSizeChange"
                                    @current-change="umb_handleCurrentChange"
                                    :current-page="umb_queryInfo.pageNum"
                                    :page-sizes="[10,20,30,50]"
                                    :page-size="umb_queryInfo.pageSize"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total="umb_page.total">
                            </el-pagination>
                        </el-col>
                    </el-row>
                </div>
            </el-card>
            <!-- 增加，对话框区域 -->
            <div>
                <el-dialog title="添加配置信息"
                           :visible.sync="umb_dialog.addDialog"
                           v-loading="umb_loading.addLoading" element-loading-text="拼命添加配置中"
                           style="margin-top: -50px" text-align="center" width="60%"
                           @close="umb_addDialogClosed">

                    <el-form :inline="true" label-width="120px" status-icon style="margin-top: -30px" align="center"
                             :model="umb_addForm" :rules="umb_addFormRules" ref="umb_addFormRef">

                        <el-form-item label="" prop="usernames">
                            <el-select v-model="umb_addForm.usernames" prefix-icon="el-icon-search" clearable
                                       @change="umb_userInfo_addChange"
                                       style="width:300px" size="medium" filterable multiple
                                       placeholder="请选择用户">
                                <el-option
                                        v-for="item in (user_cloud.cloudUserList)"
                                        :key="item.id"
                                        :label="item.username"
                                        :value="item.username">
                                    <span style="float: left">{{ item.username }}</span>
                                    <span style="float: right; color: #0984e3; ">{{ item.realname }}</span>
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="" prop="serverId">
                            <el-select v-model="umb_addForm.serverId" prefix-icon="el-icon-search" clearable
                                       style="width:300px" size="medium" filterable
                                       :disabled="umb_addForm.usernames.length===0"
                                       @change="umb_server_addChange"
                                       placeholder="请选择服务器">
                                <el-option
                                        v-for="item in (umb_config.serverList)"
                                        :key="item.id"
                                        :label="item.serverName"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="" prop="virtualHostId">
                            <el-select v-model="umb_addForm.virtualHostId" prefix-icon="el-icon-search" clearable
                                       style="width:300px" size="medium" filterable
                                       @change="umb_virtualHost_addChange"
                                       :disabled="umb_addForm.serverId==='' || umb_addForm.usernames.length===0"
                                       placeholder="请选择虚拟主机">
                                <el-option
                                        v-for="item in (umb_config.virtualHostList)"
                                        :key="item.id"
                                        :label="item.virtualHostName"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="" prop="exchangeIds">
                            <el-select v-model="umb_addForm.exchangeIds" prefix-icon="el-icon-search" clearable
                                       style="width:300px" size="medium" filterable multiple
                                       @change="umb_exchange_addChange"
                                       :disabled="umb_addForm.virtualHostId===''"
                                       placeholder="请选择交换机">
                                <el-option
                                        v-for="item in (umb_config.exchangeList)"
                                        :key="item.id"
                                        :label="item.exchangeName"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="" prop="routingKeyIds">
                            <el-select v-model="umb_addForm.routingKeyIds" prefix-icon="el-icon-search" clearable
                                       style="width:300px" size="medium" filterable multiple
                                       :disabled="umb_addForm.exchangeIds===''"
                                       placeholder="请选择路由键">
                                <el-option
                                        v-for="item in (umb_config.routingKeyList)"
                                        :key="item.id"
                                        :label="item.routingKeyName"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="" prop="queueIds">
                            <el-select v-model="umb_addForm.queueIds" prefix-icon="el-icon-search" clearable
                                       style="width:300px" size="medium" filterable multiple
                                       :disabled="umb_addForm.virtualHostId==='' || umb_addForm.usernames.length===0"
                                       placeholder="请选择订阅者队列">
                                <el-option
                                        v-for="item in (umb_config.queueList)"
                                        :key="item.id"
                                        :label="item.queueName"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="" prop="description">
                            <el-input v-model="umb_addForm.description" style="width:300px" size="medium" clearable
                                      type="textarea" autosize :rows="1"
                                      placeholder="请输入相关描述">
                            </el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer" style="text-align: center;margin-top: 0px">
                        <el-button type="info" @click="umb_dialog.addDialog = false" size="medium"
                                   style="width: 100px;background-color: #6F8294;color: #ffffff">取消
                        </el-button>
                        <el-button type="primary" @click="umb_add" :loading="umb_loading.addLoading"
                                   size="medium" style="width: 100px">添加
                        </el-button>
                    </div>
                </el-dialog>
            </div>
            <!-- 编辑，对话框区域 -->
            <div>
                <el-dialog title="查看配置信息"
                           :visible.sync="umb_dialog.editDialog"
                           style="margin-top: -50px" text-align="center" width="50%"
                           @close="umb_editDialogClosed">
                    <el-form :inline="true" label-width="120px" status-icon style="margin-left: 30px" align="center"
                             :model="umb_editForm" :rules="umb_editFormRules" ref="umb_editFormRef">
                        <el-form-item label="" prop="username">
                            <el-input v-model="umb_editForm.username" style="width:300px" size="small" clearable disabled
                                      placeholder="请输入用户名称">
                                <template  slot="prepend" >用户名称</template>
                            </el-input>
                        </el-form-item>
                        <!--                        <el-form-item label="订阅者名称：" prop="subscriber">-->
                        <!--                            <el-input v-model="umb_editForm.subscriber" style="width:240px" size="small" clearable-->
                        <!--                                      placeholder="请输入订阅者名称">-->
                        <!--                            </el-input>-->
                        <!--                        </el-form-item>-->

                        <!-- @change="umb_server_editChange" -->
                        <el-form-item label="" prop="serverId">
                            <el-select v-model="umb_editForm.serverId" prefix-icon="el-icon-search" clearable
                                       style="width:300px" size="small" filterable disabled
                                       placeholder="请选择所属服务器">
                                <el-option
                                        v-for="item in (umb_config.serverList)"
                                        :key="item.id"
                                        :label="item.serverName"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <!-- :disabled="umb_editForm.serverId===''"-->
                        <el-form-item label="" prop="virtualHostId">
                            <el-select v-model="umb_editForm.virtualHostId" prefix-icon="el-icon-search" clearable
                                       style="width:300px" size="small" filterable disabled
                                       @change="umb_virtualHost_editChange"
                                       placeholder="请选择虚拟主机名称">
                                <el-option
                                        v-for="item in (umb_config.virtualHostList)"
                                        :key="item.id"
                                        :label="item.virtualHostName"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <!-- :disabled="umb_editForm.virtualHostId===''" -->
                        <el-form-item label="" prop="exchangeId">
                            <el-select v-model="umb_editForm.exchangeId" prefix-icon="el-icon-search" clearable
                                       style="width:300px" size="small" filterable disabled
                                       @change="umb_exchange_editChange"
                                       placeholder="请选择交换机名称">
                                <el-option
                                        v-for="item in (umb_config.exchangeList)"
                                        :key="item.id"
                                        :label="item.exchangeName"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <!-- :disabled="umb_editForm.exchangeId===''" -->
                        <el-form-item label="" prop="routingKeyId">
                            <el-select v-model="umb_editForm.routingKeyId" prefix-icon="el-icon-search" clearable
                                       style="width:300px" size="small" filterable disabled
                                       placeholder="请选择路由键名称">
                                <el-option
                                        v-for="item in (umb_config.routingKeyList)"
                                        :key="item.id"
                                        :label="item.routingKeyName"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <!-- :disabled="umb_editForm.virtualHostId===''" -->
                        <el-form-item label="" prop="queueIds">
                            <el-select v-model="umb_editForm.queueIds" prefix-icon="el-icon-search" clearable
                                       style="width:300px" size="small" filterable multiple disabled
                                       placeholder="请选择订阅者队列">
                                <el-option
                                        v-for="item in (umb_config.queueList)"
                                        :key="item.id"
                                        :label="item.queueName"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="" prop="description">
                            <el-input v-model="umb_editForm.description" style="width:300px" size="small" clearable
                                      type="textarea" autosize :rows="1" disabled
                                      placeholder="请输入相关描述">
                            </el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer" style="text-align: center">
                        <el-button type="info" @click="umb_dialog.editDialog = false" size="medium"
                                   style="width: 100px;background-color: #6F8294;color: #ffffff">取消
                        </el-button>
                        <el-button type="primary" @click="umb_dialog.editDialog = false" :loading="umb_loading.addLoading" disabled
                                   size="medium" style="width: 100px">关闭
                        </el-button>
                    </div>
                </el-dialog>
            </div>
        </el-main>
    </el-container>
</template>

<script>
    import {
        selectUserMessageBindingList,
        insertUserMessageBinding,
        updateUserMessageBinding,
        deleteUserMessageBinding,
        batchRemoveUserMessageBinding,
        getServerList, getHostList, getExchangeList, getQueueList, getRoutingKeyList,
        getUserInfoList
    } from "../../api/message_bus";
    import {getUserList} from '../../api/user';

    export default {
        /**
         * UserMessageBinding:  账户信息绑定配置
         * 简称：umb
         */
        name: "UserMessageBinding",

        data() {
            return {
                /**
                 * 用户中心,相关
                 */
                user_cloud: {
                    cloudUserList: [],
                    queryInfo: {
                        pageNum: 1,
                        pageSize: 10000,
                    }
                },

                /**
                 * umb，配置与参数
                 */
                umb_config: {
                    // 服务器列表
                    serverList: [],
                    // 虚拟主机列表
                    virtualHostList: [],
                    // 交换机列表
                    exchangeList: [],
                    // 队列-列表
                    queueList: [],
                    // 路由键列表
                    routingKeyList: [],
                    // 用户信息列表
                    userInfoList: [],
                },

                /**
                 *  umb，搜索参数
                 */
                umb_queryInfo: {
                    // 用户名称
                    username: '',
                    // 订阅者名称
                    subscriber: '',
                    // 服务器名称
                    serverName: '',
                    // 虚拟主机名称
                    virtualHostName: '',
                    // 交换机名称
                    exchangeName: '',
                    // 队列名称
                    queueName: '',
                    // 路由键名称
                    routingKeyName: '',
                    // 当前页数
                    pageNum: 1,
                    // 每页条数
                    pageSize: 10
                },
                /**
                 * umb，分页
                 */
                umb_page: {
                    // 配置，列表
                    umbList: [],
                    // 总条数
                    total: 0,
                    // 批量删除，选中列表
                    selectList: [],
                },
                /**
                 * umb，新增表单
                 */
                umb_addForm: {
                    // 用户id
                    userId: '',
                    // 用户名称
                    username: '',
                    // 服务器id
                    serverId: '',
                    // 虚拟主机id
                    virtualHostId: '',
                    // 交换机id
                    exchangeId: '',
                    // 队列id
                    queueId: '',
                    // 路由键id
                    routingKeyId: '',
                    // 临时字段，队列id集合
                    queueIds: [],
                    // 临时字段，交换机id集合
                    exchangeIds: [],
                    // 临时字段，用户id集合
                    userIds: [],
                    // 临时字段，用户名称集合
                    usernames: [],
                    // 临时字段，路由键id集合
                    routingKeyIds: [],
                },
                /**
                 * umb，编辑表单
                 */
                umb_editForm: {},
                /**
                 * umb，加载
                 */
                umb_loading: {
                    // 列表加载
                    listLoading: false,
                    // 添加加载
                    addLoading: false,
                    // 编辑加载
                    editLoading: false,
                    // 删除加载
                    delLoading: false,
                    // 批量删除加载
                    batchDelLoading: false,
                },
                /**
                 *  umb,对话框管理
                 */
                umb_dialog: {
                    // 添加对话框
                    addDialog: false,
                    // 编辑对话框
                    editDialog: false,
                },
                /**
                 * umb,添加表单，验证规则
                 */
                umb_addFormRules: {
                    // 用户名称
                    userIds: [
                        {required: true, message: '请输入用户名称', trigger: ['blur', 'change']},
                    ],
                    // 用户名称
                    usernames: [
                        {required: true, message: '请输入用户名称', trigger: ['blur', 'change']},
                    ],
                    // 订阅者名称
                    // subscriber: [
                    //     {required: true, message: '请输入订阅者名称', trigger: ['blur', 'change']},
                    // ],
                    // 服务器ID
                    serverId: [
                        {required: true, message: '请选择服务器名称', trigger: ['blur', 'change']},
                    ],
                    // 虚拟主机ID
                    virtualHostId: [
                        {required: true, message: '请选择虚拟主机名称', trigger: ['blur', 'change']},
                    ],
                    // 交换机ID
                    exchangeIds: [
                        {required: true, message: '请选择交换机名称', trigger: ['blur', 'change']},
                    ],
                    // 队列ID
                    queueIds: [
                        {required: true, message: '请选择队列名称', trigger: ['blur', 'change']},
                    ],
                    // 路由键ID
                    routingKeyIds: [
                        {required: true, message: '请选择路由键名称', trigger: ['blur', 'change']},
                    ],
                },
                /**
                 * umb,编辑表单，验证规则
                 */
                umb_editFormRules: {
                    // 用户名称
                    username: [
                        {required: true, message: '请输入用户名称', trigger: ['blur', 'change']},
                    ],
                    // 订阅者名称
                    subscriber: [
                        {required: true, message: '请输入订阅者名称', trigger: ['blur', 'change']},
                    ],
                    // 服务器ID
                    serverId: [
                        {required: true, message: '请选择服务器名称', trigger: ['blur', 'change']},
                    ],
                    // 虚拟主机ID
                    virtualHostId: [
                        {required: true, message: '请选择虚拟主机名称', trigger: ['blur', 'change']},
                    ],
                    // 交换机ID
                    exchangeId: [
                        {required: true, message: '请选择交换机名称', trigger: ['blur', 'change']},
                    ],
                    // 队列ID
                    queueIds: [
                        {required: true, message: '请选择队列名称', trigger: ['blur', 'change']},
                    ],
                    // 路由键ID
                    routingKeyId: [
                        {required: true, message: '请选择路由键名称', trigger: ['blur', 'change']},
                    ],
                },
                /**
                 * Boolean属性，选择列表
                 */
                booleanList: [
                    {
                        value: true,
                        label: '是'
                    },
                    {
                        value: false,
                        label: '否'
                    },
                ],
            }
        },
        methods: {
            /**
             * 分页查询，监听 pageSize 改变的事件
             */
            umb_handleSizeChange(newSize) {
                this.umb_queryInfo.pageSize = newSize;
                //刷新列表
                this.umb_getList();
            },
            /**
             * 分页查询，监听 pageNum 改变的事件
             */
            umb_handleCurrentChange(newPage) {
                this.umb_queryInfo.pageNum = newPage;
                //刷新列表
                this.umb_getList();
            },
            /**
             * umb,分页查询
             */
            umb_getList() {
                // 开启加载
                this.umb_loading.listLoading = true;
                selectUserMessageBindingList(this.umb_queryInfo).then((response) => {
                    let res = response.data;
                    if (res.code !== '200') {
                        // 关闭加载
                        this.umb_loading.listLoading = false;
                        return this.$message.error(res.msg);
                    }
                    // 获取列表数据
                    this.umb_page.umbList = res.data.list;
                    // 获取列表的总记录数
                    this.umb_page.total = res.data.total;
                    // 关闭加载
                    this.umb_loading.listLoading = false;
                    this.$message.success(res.msg);
                }).catch(error => {
                    // 关闭加载
                    this.umb_loading.listLoading = false;
                    this.$message.error(error.toString());
                });
            },
            /**
             * umb，添加对话框，打开事件
             */
            umb_toAddDialog() {
                this.umb_dialog.addDialog = true;
            },
            /**
             * umb，添加对话框，关闭事件
             */
            umb_addDialogClosed() {
                // 重置对话框
                this.$refs.umb_addFormRef.resetFields();
            },
            /**
             * umb，添加功能
             */
            umb_add() {
                this.umb_addForm.queueId = this.umb_addForm.queueIds.join();
                this.umb_addForm.username = this.umb_addForm.usernames.join();
                this.umb_addForm.exchangeId = this.umb_addForm.exchangeIds.join();
                this.umb_addForm.routingKeyId = this.umb_addForm.routingKeyIds.join();
                // 进行表单的预验证
                this.$refs.umb_addFormRef.validate(valid => {
                    // 未通过，表单预校验
                    if (!valid) return;
                    // 通过，表单预检验，开启加载
                    this.umb_loading.addLoading = true;
                    insertUserMessageBinding(this.umb_addForm).then((response) => {
                        let res = response.data;
                        // 添加失败
                        if (res.code !== '200') {
                            // 关闭加载
                            this.umb_loading.addLoading = false;
                            return this.$message.error(res.msg);
                        }
                        // 添加，成功
                        this.$message.success(res.msg);
                        // 关闭加载
                        this.umb_loading.addLoading = false;
                        // 隐藏对话框
                        this.umb_dialog.addDialog = false;
                        // 刷新列表
                        this.umb_getList();
                    }).catch(error => {
                        // 关闭加载
                        this.umb_loading.addLoading = false;
                        this.$message.error(error.toString());
                    });
                })
            },

            /**
             * umb，编辑对话框，打开事件
             */
            umb_toEditDialog(index, row) {
                this.selectServerList()
                this.selectHostList(row.serverId)
                this.selectQueueList(row.virtualHostId)
                this.selectExchangeList(row.virtualHostId)
                this.selectRoutingKeyList(row.exchangeId)
                this.umb_editForm = Object.assign({}, row);

                this.umb_editForm.queueIds = [];
                if (this.umb_editForm.queueId.indexOf(",") === -1) {
                    // 队列id中不包含","
                    this.umb_editForm.queueIds[0] = this.umb_editForm.queueId;
                } else {
                    this.umb_editForm.queueIds = this.umb_editForm.queueId.split(",")
                }
                this.umb_dialog.editDialog = true;
            },
            /**
             * umb，编辑对话框，关闭事件
             */
            umb_editDialogClosed() {
                //重置对话框
                this.$refs.umb_editFormRef.resetFields();
            },
            /**
             * umb，编辑功能
             */
            umb_edit() {
                //进行表单的预验证
                this.$refs.umb_editFormRef.validate(valid => {
                    // 未通过，表单预校验
                    if (!valid) return;
                    // 通过，表单预检验，开启加载
                    this.umb_loading.editLoading = true;
                    updateUserMessageBinding(this.umb_editForm).then((response) => {
                        let res = response.data;
                        if (res.code !== '200') {
                            if (res.code === '999') {
                                // 关闭加载
                                this.umb_loading.editLoading = false;
                                return this.$message.error('未知异常，编辑配置信息，失败');
                            }
                            //关闭加载
                            this.umb_loading.editLoading = false;
                            return this.$message.error('编辑配置信息，失败');
                        }
                        // 关闭加载
                        this.umb_loading.editLoading = false;
                        this.$message.success('编辑配置信息，成功！');
                        // 隐藏对话框
                        this.umb_dialog.editDialog = false;
                        // 刷新列表
                        this.umb_getList();
                    }).catch(error => {
                        // 关闭加载
                        this.umb_loading.editLoading = false;
                        this.$message.error(error.toString());
                    });
                })
            },
            /**
             * umb，删除功能
             */
            umb_remove(index, row) {
                // 弹框询问是否删除？
                this.$confirm('此操作永久删除该配置信息, 是否继续?', '警告', {
                        confirmButtonText: '确定删除',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }
                ).then(() => {
                    // 开启加载
                    this.umb_loading.listLoading = true;
                    deleteUserMessageBinding(row).then((response) => {
                        let res = response.data;
                        if (res.code !== '200') {
                            // 关闭加载
                            this.umb_loading.listLoading = false;
                            return this.$message.error('删除-配置-信息，失败');
                        }
                        // 关闭加载
                        this.umb_loading.listLoading = false;
                        this.$message.success('删除-配置-信息，成功！');
                        // 刷新列表
                        this.umb_getList();
                    }).catch(error => {
                        // 关闭加载
                        this.umb_loading.listLoading = false;
                        this.$message.error(error.toString());
                    });
                }).catch(() => {
                });
            },

            /**
             * umb，批量删除---选中
             */
            umb_selectChange: function (selectList) {
                this.umb_page.selectList = selectList;
            },
            /**
             * umb，批量删除功能
             */
            umb_batchRemove() {
                const ids = this.umb_page.selectList.map(item => item.id).toString();
                this.$confirm('此操作将永久删除选中的配置信息, 是否继续?', '警告', {
                        confirmButtonText: '确定删除',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }
                ).then(() => {
                    // 开启加载
                    this.umb_loading.listLoading = true;
                    let params = {ids: ids};
                    batchRemoveUserMessageBinding(params).then(response => {
                        let res = response.data;
                        if (res.code !== '200') {
                            // 关闭加载
                            this.umb_loading.listLoading = false;
                            return this.$message.error('批量删除-配置-信息，失败');
                        }
                        this.$message.success('批量删除-配置-信息，成功！');
                        // 关闭加载
                        this.umb_loading.listLoading = false;
                        // 刷新列表
                        this.umb_getList();
                    }).catch(error => {
                        // 关闭加载
                        this.umb_loading.listLoading = false;
                        this.$message.error(error.toString());
                    });
                }).catch(() => {
                });
            },

            /**
             * 获取服务器列表
             */
            selectServerList() {
                getServerList().then((response) => {
                    let res = response.data;
                    if (res.code !== '200') {
                        return this.$message.error('获取服务器列表，失败！');
                    }
                    // 获取服务器列表数据
                    this.umb_config.serverList = res.data;
                }).catch(error => {
                    this.$message.error(error.toString());
                });
            },

            /**
             * 获取虚拟主机列表
             */
            selectHostList(id) {
                let params = {serverId: id};
                getHostList(params).then((response) => {
                    let res = response.data;
                    if (res.code !== '200') {
                        return this.$message.error('获取虚拟主机列表，失败！');
                    }
                    // 获取虚拟主机列表数据
                    this.umb_config.virtualHostList = res.data;
                }).catch(error => {
                    this.$message.error(error.toString());
                });
            },

            /**
             * 获取交换机列表
             */
            selectExchangeList(id) {
                let params = {virtualHostId: id};
                getExchangeList(params).then((response) => {
                    let res = response.data;
                    if (res.code !== '200') {
                        return this.$message.error('获取交换机列表，失败！');
                    }
                    // 获取交换机列表数据
                    this.umb_config.exchangeList = res.data;
                }).catch(error => {
                    this.$message.error(error.toString());
                });
            },
            /**
             * 获取队列-列表
             */
            selectQueueList(virtualHostId) {
                let params = {
                    virtualHostId: virtualHostId,
                };
                getQueueList(params).then((response) => {
                    let res = response.data;
                    if (res.code !== '200') {
                        return this.$message.error('获取队列-列表，失败！');
                    }
                    // 获取队列-列表数据
                    this.umb_config.queueList = res.data;
                }).catch(error => {
                    this.$message.error(error.toString());
                });
            },
            /**
             * 获取路由键-列表
             */
            selectRoutingKeyList(id) {
                let params = {exchangeId: id};
                getRoutingKeyList(params).then((response) => {
                    let res = response.data;
                    if (res.code !== '200') {
                        return this.$message.error('获取路由键列表，失败！');
                    }
                    // 获取路由键列表数据
                    this.umb_config.routingKeyList = res.data;
                }).catch(error => {
                    this.$message.error(error.toString());
                });
            },

            /**
             * 添加方法，服务器ID值，改变
             */
            umb_server_addChange(value) {
                // 现将对应的虚拟主机的ID清空
                this.umb_addForm.virtualHostId = undefined;
                // 根据服务器ID，获取出对应的虚拟主机的列表
                this.selectHostList(value);
            },

            umb_userInfo_addChange(value) {

            },

            /**
             * 添加方法，虚拟主机ID值，改变
             */
            umb_virtualHost_addChange(value) {
                this.umb_addForm.exchangeIds = undefined;
                this.umb_addForm.queueIds = undefined;
                this.umb_addForm.routingKeyIds = undefined;
                this.selectExchangeList(value);
                this.selectQueueList(value);
            },

            /**
             * 添加方法，交换机ID值，改变
             */
            umb_exchange_addChange(value) {
                // 先将对应的路由键的ID清空
                this.umb_addForm.routingKeyIds = undefined;
                // 根据交换机ID，获取出对应的路由键的列表
                this.selectRoutingKeyList(value.join());
            },
            // /**
            //  * 添加方法，队列ID值，改变
            //  */
            // umb_queue_addChange(value) {
            //     // 将多选的queueID，用逗号相连接
            //     this.umb_addForm.queueId = value.join();
            // },
            /**
             * 编辑方法，服务器ID值，改变
             */
            umb_server_editChange(value) {
                // 现将对应的虚拟主机的ID清空
                this.umb_editForm.virtualHostId = undefined;
                // 根据服务器ID，获取出对应的虚拟主机的列表
                this.selectHostList(value);
            },
            /**
             * 编辑方法，虚拟主机ID值，改变
             */
            umb_virtualHost_editChange(value) {
                // 先将对应的交换机和队列的ID清空
                this.umb_editForm.exchangeId = undefined;
                this.umb_editForm.queueId = undefined;

                // 根据虚拟主机ID，获取出对应的交换机和队列的列表
                this.selectExchangeList(value);
                this.selectQueueList(value);
            },
            /**
             * 编辑方法，交换机ID值，改变
             */
            umb_exchange_editChange(value) {
                // 先将对应的路由键的ID清空
                this.umb_editForm.routingKeyId = undefined;
                // 根据交换机ID，获取出对应的路由键的列表
                this.selectRoutingKeyList(value);
            },
            /**
             * 获取所有用户的信息
             */
            umb_getUserInfoList() {
                getUserInfoList().then((response) => {
                    let res = response.data;
                    if (res.code !== '200') {
                        return this.$message.error('获取用户信息列表，失败！');
                    }
                    // 获取列表数据
                    this.umb_config.userInfoList = res.data;
                }).catch(error => {
                    this.$message.error(error.toString());
                });
            },

            /**
             * 查询用户中心的用户
             */
            getCloudUser() {
                getUserList(this.user_cloud.queryInfo).then((response) => {
                    this.user_cloud.cloudUserList = response.data.data.list;
                }).catch((error) => {
                    this.$message.error(error.toString());
                });
            },
        },
        created() {
            // 刷新列表
            // this.umb_getList();
        },
        mounted() {
            // 获取服务器列表
            this.selectServerList();
            // 获取用户中心的用户列表
            this.getCloudUser();
        },
        computed: {},
    }
</script>

<style scoped>

</style>