<template>
    <el-container>
        <el-main>
            <el-card style="background-color: #F5F7FA">
                <!-- 搜素区域 -->
                <div>
                    <el-row>
                        <el-col :span="4">
                            <el-input v-model="user_queryInfo.username" prefix-icon="el-icon-search" size="medium"
                                      placeholder="用户名称" clearable></el-input>
                        </el-col>
                        <el-col :span="4">
                            <el-input v-model="user_queryInfo.serverName" prefix-icon="el-icon-search" size="medium"
                                      placeholder="服务器名称" clearable></el-input>
                        </el-col>
                        <el-col :span="4">
                            <el-input v-model="user_queryInfo.virtualHostName" prefix-icon="el-icon-search"
                                      size="medium"
                                      placeholder="虚拟主机名称" clearable></el-input>
                        </el-col>
                        <el-col :span="8">
                            <el-button type="success" style="width:150px" size="medium" @click="user_getList">
                                查询用户信息
                            </el-button>
                            <el-button type="primary" style="width:150px" size="medium" @click="user_toAddDialog">
                                添加用户信息
                            </el-button>
                        </el-col>
                    </el-row>
                </div>
                <!-- 列表区域 -->
                <div style="margin-top: 20px;">
                    <el-table :data="user_page.userInfoList" border v-loading="user_loading.listLoading"
                              @selection-change="user_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="190"></el-table-column>
                        <el-table-column label="服务器名称" prop="serverName" align="center" width="190"></el-table-column>
                        <el-table-column label="虚拟主机名称" prop="virtualHostName" align="center" width="300"></el-table-column>
                        <el-table-column label="操作" width="340px" align="center">
                            <!-- 删除用户 -->
                            <el-tooltip effect="dark" content="删除用户" placement="top-start" :enterable="false">
                                <el-button type="danger" icon="el-icon-delete" size="small"
                                           :loading="user_loading.delLoading"
                                           @click="user_remove(scope.$index,scope.row)">删除用户
                                </el-button>
                            </el-tooltip>
                            <!-- 编辑关系 -->
                            <el-tooltip effect="dark" content="编辑关系" placement="top-start" :enterable="false">
                                <el-button type="primary" icon="el-icon-edit" size="small"
                                           @click="user_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-edit" size="small"
                                           @click="user_removeRelation(scope.$index,scope.row)">删除关系
                                </el-button>
                            </el-tooltip>
                            <!-- 修改密码 -->

                        </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="user_loading.batchDelLoading"
                                       :disabled="this.user_page.selectList.length===0"
                                       @click="user_batchRemove">批量删除
                            </el-button>
                        </el-col>
                        <el-col :span="10" style="margin-top: 5px">
                            <el-pagination
                                    @size-change="user_handleSizeChange"
                                    @current-change="user_handleCurrentChange"
                                    :current-page="user_queryInfo.pageNum"
                                    :page-sizes="[10,20,30,50]"
                                    :page-size="user_queryInfo.pageSize"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total="user_page.total">
                            </el-pagination>
                        </el-col>
                    </el-row>
                </div>
            </el-card>
        </el-main>
        <!-- 增加，对话框区域 -->
        <div>
            <el-dialog title="添加MQ用户信息"
                       :visible.sync="user_dialog.addDialog"
                       style="margin-top: -20px"
                       width="50%" text-align="center" @close="user_addDialogClosed">
                <el-form :inline="true" label-width="145px" status-icon style="margin-top: -10px"
                         :model="user_addForm" :rules="user_addFormRules" ref="user_addFormRef" align="center">
                    <el-form-item label="用户名称：" prop="exchangeName">
                        <el-input v-model="user_addForm.username" style="width:270px" size="small" clearable
                                  placeholder="请输入用户名称">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="用户密码：" prop="firstPassword">
                        <el-input type="password" v-model="user_addForm.firstPassword" style="width:270px"
                                  size="small" clearable show-password placeholder="请输入用户密码"></el-input>
                    </el-form-item>
                    <el-form-item label="重新输入密码：" prop="password">
                        <el-input type="password" v-model="user_addForm.password" style="width:270px"
                                  size="small" clearable show-password placeholder="请重新输入密码"></el-input>
                    </el-form-item>
                    <br/>
                    <el-form-item label="选择关系：">
                        <br/>
                        <el-tree style="width:270px"
                                 :data="user_config.tree.server_hostList"
                                 :props="user_config.tree.defaultParams"
                                 ref="tree"
                                 node-key="id"
                                 show-checkbox highlight-current default-expand-all>
                        </el-tree>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer" style="text-align: center;margin-top: -20px">
                    <el-button type="info" @click="user_dialog.addDialog = false" size="medium"
                               style="width: 100px">取消
                    </el-button>
                    <el-button type="primary" @click="user_add" :loading="user_loading.addLoading"
                               size="medium" style="width: 100px">添加
                    </el-button>
                </div>
            </el-dialog>
        </div>
    </el-container>
</template>

<script>
    import {
        getServerAndHostList,
        selectUserInfoList
    } from "../../api/message_bus";

    export default {
        name: "UserInfo",
        data() {
            return {

                /**
                 * user，配置与参数
                 */
                user_config: {
                    tree: {
                        treeList: [],
                        // 服务器及虚拟主机列表
                        server_hostList: [],
                        defaultParams: {
                            label: 'aliasName',
                            children: 'aliasList'
                        }
                    }
                },

                /**
                 *  搜索参数
                 */
                user_queryInfo: {
                    // 用户名称
                    username: '',
                    // 服务器名称
                    serverName: '',
                    // 虚拟主机名称
                    virtualHostName: '',
                    // 当前页数
                    pageNum: 1,
                    // 每页条数
                    pageSize: 10
                },

                /**
                 * user，分页
                 */
                user_page: {
                    // 用户信息列表
                    userInfoList: [],
                    // 总条数
                    total: 0,
                    // 批量删除，选中列表
                    selectList: [],
                },

                /**
                 * user，新增表单
                 */
                user_addForm: {},

                /**
                 * user，编辑表单
                 */
                user_editForm: {},

                /**
                 *  user,对话框管理
                 */
                user_dialog: {
                    // 添加对话框
                    addDialog: false,
                    // 编辑对话框
                    editDialog: false,
                },

                /**
                 * user,添加表单，验证规则
                 */
                user_addFormRules: {},
                /**
                 * user,编辑表单，验证规则
                 */
                user_editFormRules: {},
                /**
                 * 加载
                 */
                user_loading: {
                    // 列表加载
                    listLoading: false,
                    // 添加加载
                    addLoading: false,
                    // 编辑加载
                    editLoading: false,
                    // 删除加载
                    delLoading: false,
                    // 批量删除加载
                    batchDelLoading: false,
                },

            }
        },
        methods: {
            /**
             * 分页查询，监听 pageSize 改变的事件
             */
            user_handleSizeChange(newSize) {
                this.user_queryInfo.pageSize = newSize;
                //刷新列表
                this.user_getList();
            },
            /**
             * 分页查询，监听 pageNum 改变的事件
             */
            user_handleCurrentChange(newPage) {
                this.queue_queryInfo.pageNum = newPage;
                //刷新列表
                this.user_getList();
            },
            /**
             * user,分页查询
             */
            user_getList() {
                // 开启加载
                this.user_loading.listLoading = true;
                selectUserInfoList(this.user_queryInfo).then((response) => {
                    let res = response.data;
                    if (res.code !== '200') {
                        // 关闭加载
                        this.user_loading.listLoading = false;
                        return this.$message.error('获取用户信息列表，失败！');
                    }
                    // 获取列表数据
                    this.user_page.userInfoList = res.data.list;
                    // 获取列表的总记录数
                    this.user_page.total = res.data.total;
                    // 关闭加载
                    this.user_loading.listLoading = false;
                    this.$message.success('获取用户信息列表，成功！');
                }).catch(error => {
                    // 关闭加载
                    this.exchange_loading.listLoading = false;
                    this.$message.error(error.toString());
                });
            },
            /**
             * user，添加对话框，打开事件
             */
            user_toAddDialog() {
                this.selectServerAndHostList();
                this.user_dialog.addDialog = true;
            },
            /**
             * user，添加对话框，关闭事件
             */
            user_addDialogClosed() {
                // 重置对话框
                this.$refs.user_addFormRef.resetFields();
            },

            /**
             * user，添加功能
             */
            user_add() {
                console.log(this.$refs.tree.getCheckedKeys());
            },

            /**
             * user，编辑对话框，打开事件
             */
            user_toEditDialog(index, row) {
                this.user_dialog.editDialog = true;
                this.user_editForm = Object.assign({}, row);
            },

            /**
             * user，编辑对话框，关闭事件
             */
            user_editDialogClosed() {
                //重置对话框
                this.$refs.user_editFormRef.resetFields();
            },

            /**
             * user，编辑功能
             */
            user_edit() {

            },

            /**
             * user，删除功能
             */
            user_remove(index, row) {

            },

            /**
             * user，删除用户关系
             */
            user_removeRelation(index, row) {

            },

            /**
             * user，批量删除---选中
             */
            user_selectChange: function (selectList) {
                this.user_page.selectList = selectList;
            },

            /**
             * user，批量删除功能
             */
            user_batchRemove() {
                const ids = this.user_page.selectList.map(item => item.id).toString();
            },

            /**
             * 服务器与虚拟主机 1：n
             * 获取列表
             */
            selectServerAndHostList() {
                getServerAndHostList().then((response) => {
                    let res = response.data;
                    if (res.code !== '200') {
                        return this.$message.error('获取服务器与虚拟主机信息，失败！');
                    }
                    // 获取列表数据
                    this.user_config.tree.server_hostList = res.data;
                }).catch(error => {
                    this.$message.error(error.toString());
                });
            },
        },
        created() {
        },
        mounted() {
        },
        computed: {},
    }
</script>

<style scoped>

</style>