<template>
    <el-container>
        <el-main>
            <el-card style="background-color: #F5F7FA">
                <!-- 搜素区域 -->
                <div>
                    <el-row>
                        <el-col :span="7">
                            <el-input v-model="queryInfo.serverName" prefix-icon="el-icon-search" size="medium"
                                      placeholder="服务器名称" clearable>
                                <template  slot="prepend" ><i class="el-icon-user"></i>服务器名称</template>
                            </el-input>
                        </el-col>
                        <el-col :span="14">
                            <el-button type="warning" style="width:160px" icon="el-icon-search"  size="medium" @click="getServerList">
                                查询服务器信息
                            </el-button>
                            <el-button type="primary" style="width:160px" icon="el-icon-plus" size="medium" @click="toAddDialog">
                                添加服务器信息
                            </el-button>
                        </el-col>
                    </el-row>
                </div>
                <!--服务器信息列表区域-->
                <div style="margin-top: 20px;">
                    <el-table :data="serverList" border v-loading="server_loading.listLoading"
                              @selection-change="selectChange" size="small"
                              element-loading-text="获取服务器列表，拼命加载中"
                              :header-cell-style="{background:'#6F8294',color:'#FFFFFF'}"
                              style="border-radius: 10px 10px 0px 0px;line-height: 15px;">
                        <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 type="expand">
                            <template slot-scope="props">
                                <el-form :inline="true" label-position="left" label-width="110px" align="left">
                                    <el-row>
                                        <el-col :span="6">
                                            <el-form-item label="服务器名称:">
                                                <el-tag type="success">{{props.row.serverName}}</el-tag>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="6">
                                            <el-form-item label="服务器地址:">
                                                <el-tag type="success">{{props.row.serverIp}}</el-tag>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row>
                                        <el-col :span="6">
                                            <el-form-item label="服务器端口号:">
                                                <el-tag type="success">{{props.row.serverPort}}</el-tag>
                                            </el-form-item>
                                        </el-col>
<!--                                        <el-col :span="6">-->
<!--                                            <el-form-item label="客户端端口号:">-->
<!--                                                <el-tag type="success">{{props.row.clientPort}}</el-tag>-->
<!--                                            </el-form-item>-->
<!--                                        </el-col>-->
<!--                                    </el-row>-->
<!--                                    <el-row>-->
<!--                                        <el-col :span="6">-->
<!--                                            <el-form-item label="超级用户名称:">-->
<!--                                                <el-tag type="success">{{props.row.superUsername}}</el-tag>-->
<!--                                            </el-form-item>-->
<!--                                        </el-col>-->
                                        <el-col :span="8">
                                            <el-form-item label="相关描述:">
                                                <el-tag type="success">{{props.row.description}}</el-tag>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                </el-form>
                            </template>
                        </el-table-column>
                        <el-table-column label="服务器名称" prop="serverName" align="center" width="180"></el-table-column>
                        <el-table-column label="服务器地址" prop="serverIp" align="center" width="200"></el-table-column>
                        <el-table-column label="服务器端口号" prop="serverPort" align="center" width="150"></el-table-column>
<!--                        <el-table-column label="客户端端口号" prop="clientPort" align="center" width="150"></el-table-column>-->
<!--                        <el-table-column label="超级用户名称" prop="superUsername" align="center" width="150"></el-table-column>-->
                        <el-table-column label="相关描述" prop="description" align="center" width="300"></el-table-column>
                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
<!--                                &lt;!&ndash; 虚拟主机 &ndash;&gt;-->
<!--                                <el-tooltip effect="dark" content="虚拟主机" placement="top-start" :enterable="false">-->
<!--                                    <el-button type="warning" icon="el-icon-link" size="mini"-->
<!--                                               @click="toVirtualHost(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="mini"
                                               @click="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="server_loading.delLoading"
                                               @click="removeServerInfo(scope.$index,scope.row)">删除
                                    </el-button>
                                </el-tooltip>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!--分页区域-->
                    <div style="margin-top: 10px">
                        <el-row :gutter="24">
                            <el-col :span="5">
                                <el-button type="danger" icon="el-icon-delete"
                                           :loading="server_loading.listLoading"
                                           :disabled="this.selectList.length===0"
                                           @click="batchRemoveServer">批量删除
                                </el-button>
                            </el-col>
                            <el-col :span="10" style="margin-top: 5px">
                                <el-pagination
                                        @size-change="handleSizeChange"
                                        @current-change="handleCurrentChange"
                                        :current-page="queryInfo.pageNum"
                                        :page-sizes="[10,20,30,50]"
                                        :page-size="queryInfo.pageSize"
                                        layout="total, sizes, prev, pager, next, jumper"
                                        :total="total">
                                </el-pagination>
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </el-card>
            <!--  对话框 —> 添加服务器信息 -->
            <div>
                <el-dialog :title="dialogMap[dialogStatus]"
                           :visible.sync="serverDialog.addDialog"
                           style="margin-top: -50px"
                           width="60%" text-align="center" @close="serverAddDialogClosed">
                    <el-form :inline="true" :model="addServerForm" label-width="120px" status-icon
                             :rules="addServerFormRules" ref="addServerFormRef" style="margin-top: -30px" align="center">
                        <el-form-item label="" prop="serverName">
                            <el-input v-model="addServerForm.serverName" style="width:300px" size="small" clearable
                                      placeholder="请输入服务器名称">
                                <template  slot="prepend" >&nbsp;服务器名称&nbsp;&nbsp;&nbsp;</template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="" prop="serverIp">
                            <el-input v-model="addServerForm.serverIp" style="width:300px" size="small" clearable
                                      placeholder="请输入服务器IP地址">
                                <template  slot="prepend" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;IP地址&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="" prop="serverPort">
                            <el-input v-model="addServerForm.serverPort" style="width:300px" size="small" clearable
                                      placeholder="请输入服务器端口号">
                                <template  slot="prepend" >服务器端口号</template>
                            </el-input>
                        </el-form-item>
<!--                        <el-form-item label="" prop="clientPort">-->
<!--                            <el-input v-model="addServerForm.clientPort" style="width:300px" size="small" clearable-->
<!--                                      placeholder="请输入客户端端口号">-->
<!--                                <template  slot="prepend" >客户端端口号</template>-->
<!--                            </el-input>-->
<!--                        </el-form-item>-->
<!--                        <el-form-item label="" prop="superUsername">-->
<!--                            <el-input v-model="addServerForm.superUsername" style="width:300px" size="small" clearable-->
<!--                                      placeholder="请输入超级用户名称">-->
<!--                                <template  slot="prepend" >超级用户名称</template>-->
<!--                            </el-input>-->
<!--                        </el-form-item>-->
<!--                        <el-form-item label="" prop="firstPassword">-->
<!--                            <el-input type="password" v-model="addServerForm.firstPassword" style="width:300px"-->
<!--                                      size="small" clearable show-password placeholder="请输入超级用户密码">-->
<!--                                <template  slot="prepend" >超级用户密码</template>-->
<!--                            </el-input>-->
<!--                        </el-form-item>-->
<!--                        <el-form-item label="" prop="superPassword">-->
<!--                            <el-input type="password" v-model="addServerForm.superPassword" style="width:300px"-->
<!--                                      size="small" clearable show-password placeholder="请重新输入密码">-->
<!--                                <template  slot="prepend" >重新输入密码</template>-->
<!--                            </el-input>-->
<!--                        </el-form-item>-->
                        <el-form-item label="" prop="description">
                            <el-input v-model="addServerForm.description" placeholder="请输入相关描述"
                                      style="width:300px" size="small" clearable
                                      type="textarea" autosize :rows="1">
                                <template  slot="prepend" >相关描述</template>
                            </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="serverDialog.addDialog = false" size="medium"
                                   style="width: 100px;background-color: #6F8294;color: #ffffff">取消
                        </el-button>
                        <el-button type="primary" @click="dialogStatus==='create'?addServerInfo():editServerInfo()" :loading="server_loading.addLoading"
                                   size="medium"
                                   style="width: 100px">
                            提交
                        </el-button>
                    </div>
                </el-dialog>
            </div>
        </el-main>
    </el-container>
</template>

<script>
    import {
        selectBusServerList,
        insertBusServer,
        updateBusServer,
        deleteBusServer,
        batchRemoveBusServer
    } from "../../api/message_bus";

    export default {
        name: "Server",

        data() {
            const validatePassword = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请重新输入密码'));
                } else if (value !== this.addServerForm.firstPassword) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            // 验证IP地址的自定义规则
            const serverIpValid = (rule, value, callback) => {
                // 验证IP地址的正则表达式
                const regMobile = /^((25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))$/;
                if (regMobile.test(value)) {
                    // 合法的IP地址
                    return callback();
                }
                callback(new Error('请输入合法的IP地址'));
            };
            return {
                dialogMap: {
                    update: '编辑服务器信息',
                    create: '添加服务器信息',
                },
                dialogStatus: 'create',
                /**
                 *  搜索参数
                 */
                queryInfo: {
                    // 服务器名称
                    serverName: '',
                    // 当前页数
                    pageNum: 1,
                    // 每页条数
                    pageSize: 10
                },

                /**
                 * 添加服务器信息的表单
                 */
                addServerForm: {
                    // 服务器名称
                    serverName: '',
                    // 服务器IP
                    serverIp: '',
                    // 服务器端口号
                    serverPort: undefined,
                    // 客户端端口号
                    clientPort: undefined,
                    // 超级用户名称
                    superUsername: '',
                    // 第一次输入密码
                    firstPassword: '',
                    // 超级用户密码
                    superPassword: '',
                    // 相关描述
                    description: '',
                },

                /**
                 *  列表记录的总条数
                 */
                total: 0,

                /**
                 *  服务器列表
                 */
                serverList: [],

                /**
                 * 编辑服务器，表单
                 */
                editServerForm: {},

                /**
                 *  批量删除的选中列表
                 */
                selectList: [],

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

                /**
                 * 加载
                 */
                server_loading: {
                    // 列表加载
                    listLoading: false,
                    // 添加加载
                    addLoading: false,
                    // 编辑加载
                    editLoading: false,
                    // 删除加载
                    delLoading: false,
                    // 批量删除加载
                    batchDelLoading: false,
                },

                /**
                 * 添加服务器，表单的验证规则对象
                 */
                addServerFormRules: {
                    serverName: [
                        {required: true, message: '请输入服务器名称', trigger: ['blur', 'change']},
                    ],
                    serverIp: [
                        {required: true, message: '请输入服务器IP地址', trigger: ['blur', 'change']},
                        {validator: serverIpValid, trigger: ['blur', 'change']}
                    ],
                    serverPort: [
                        {required: true, message: '请输入服务器端口号', trigger: ['blur', 'change']},
                    ],
                    // description: [
                    //     {required: true, message: '请输入服务器相关描述', trigger: ['blur', 'change']},
                    // ],
                    // clientPort: [
                    //     {required: true, message: '请输入客户端端口号', trigger: ['blur', 'change']},
                    // ],
                    // superUsername: [
                    //     {required: true, message: '请输入超级用户名称', trigger: ['blur', 'change']},
                    // ],
                    // firstPassword: [
                    //     {required: true, message: '请输入超级用户密码', trigger: ['blur', 'change']},
                    // ],
                    // superPassword: [
                    //     {required: true, message: '请重新输入密码', trigger: ['blur', 'change']},
                    //     {validator: validatePassword, trigger: ['blur', 'change']}
                    // ],
                },
                /**
                 * 编辑服务器，表单的验证规则对象
                 */
                editServerFormRules: {
                    serverName: [
                        {required: true, message: '请输入服务器名称', trigger: ['blur', 'change']},
                    ],
                    serverIp: [
                        {required: true, message: '请输入服务器IP地址', trigger: ['blur', 'change']},
                        {validator: serverIpValid, trigger: 'blur'}
                    ],
                    serverPort: [
                        {required: true, message: '请输入服务器端口号', trigger: ['blur', 'change']},
                    ],
                    description: [
                        {required: true, message: '请输入服务器相关描述', trigger: ['blur', 'change']},
                    ],
                    clientPort: [
                        {required: true, message: '请输入客户端端口号', trigger: ['blur', 'change']},
                    ],
                    superUsername: [
                        {required: true, message: '请输入超级用户名称', trigger: ['blur', 'change']},
                    ],
                },
            }
        },
        methods: {
            /**
             * 分页查询，监听 pageSize 改变的事件
             */
            handleSizeChange(newSize) {
                this.queryInfo.pageSize = newSize;
                // 刷新列表
                this.getServerList();
            },
            /**
             * 分页查询，监听 pageNum 改变的事件
             */
            handleCurrentChange(newPage) {
                this.queryInfo.pageNum = newPage;
                // 刷新列表
                this.getServerList();
            },
            /**
             * 查询，服务器列表
             */
            getServerList() {
                // 开启加载
                this.server_loading.listLoading = true;
                selectBusServerList(this.queryInfo).then((response) => {
                    let res = response.data;
                    if (res.code !== '200') {
                        // 关闭加载
                        this.server_loading.listLoading = false;
                        return this.$message.error(res.msg);
                    }
                    // 获取服务器列表数据
                    this.serverList = res.data.list;
                    // 获取列表的总记录数
                    this.total = res.data.total;
                    // 关闭加载
                    this.server_loading.listLoading = false;
                    this.$message.success(res.msg);

                    if (this.queryInfo.serverId !== undefined && this.queryInfo.serverId !== '') {
                        // 重置所属服务器id
                        this.queryInfo.serverId = undefined;
                    }
                }).catch(error => {
                    // 关闭加载
                    this.server_loading.listLoading = false;
                    this.$message.error(error.toString());
                });
            },

            /**
             * 打开 添加服务器信息 对话框
             */
            toAddDialog() {
                this.addServerForm = {
                    // 服务器名称
                    serverName: '',
                    // 服务器IP
                    serverIp: '',
                    // 服务器端口号
                    serverPort: undefined,
                    // 客户端端口号
                    clientPort: undefined,
                    // 超级用户名称
                    superUsername: '',
                    // 第一次输入密码
                    firstPassword: '',
                    // 超级用户密码
                    superPassword: '',
                    // 相关描述
                    description: '',
                },
                this.dialogStatus= 'create';
                this.serverDialog.addDialog = true;
            },
            /**
             * 服务器信息，添加对话框，关闭事件
             */
            serverAddDialogClosed() {
                //重置对话框
                this.$refs.addServerFormRef.resetFields();
            },
            /**
             * 服务器信息，添加功能
             */
            addServerInfo() {
                // 进行表单的预验证
                this.$refs.addServerFormRef.validate(valid => {
                    // 未通过，表单预校验
                    if (!valid) return;
                    // 通过，表单预检验
                    this.server_loading.addLoading = true;
                    insertBusServer(this.addServerForm).then((response) => {
                        let res = response.data;
                        // 添加失败
                        if (res.code !== '200') {
                            // 关闭加载
                            this.server_loading.addLoading = false;
                            return this.$message.error(res.msg);
                        }
                        // 添加，成功
                        this.$message.success(res.msg);
                        // 关闭加载
                        this.server_loading.addLoading = false;
                        // 隐藏对话框
                        this.serverDialog.addDialog = false;
                        // 刷新列表
                        this.getServerList();
                    }).catch(error => {
                        this.server_loading.addLoading = false;
                        this.$message.error(error.toString());
                    });
                })
            },

            /**
             * 打开编辑服务器信息对话框
             */
            toEditDialog(index, row) {
                this.dialogStatus= 'update';
                this.addServerForm = Object.assign({}, row);
                this.serverDialog.addDialog = true;
            },

            /**
             * 服务器信息，编辑对话框，关闭事件
             */
            serverEditDialogClosed() {
                //重置对话框
                this.$refs.editServerFormRef.resetFields();
            },

            /**
             * 编辑服务器信息，编辑功能
             */
            editServerInfo() {
                //进行表单的预验证
                this.$refs.addServerFormRef.validate(valid => {
                    // 未通过，表单预校验
                    if (!valid) return;
                    // 通过，表单预检验
                    this.server_loading.addLoading = true;
                    updateBusServer(this.addServerForm).then((response) => {
                        let res = response.data;
                        if (res.code !== '200') {
                            //关闭加载
                            this.server_loading.addLoading = false;
                            return this.$message.error(res.msg);
                        }
                        // 关闭加载
                        this.server_loading.addLoading = false;
                        this.$message.success(res.msg);
                        // 隐藏对话框
                        this.serverDialog.addDialog = false;
                        // 刷新列表
                        this.getServerList();
                    }).catch(error => {
                        this.server_loading.addLoading = false;
                        this.$message.error(error.toString());
                    });
                })
            },

            /**
             * 删除服务器信息
             */
            removeServerInfo(index, row) {
                //弹框询问是否删除服务器信息
                this.$confirm('此操作永久删除该服务器信息, 是否继续?', '警告', {
                        confirmButtonText: '确定删除',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }
                ).then(() => {
                    //开启加载
                    this.server_loading.delLoading = true;
                    deleteBusServer(row).then((response) => {
                        let res = response.data;
                        if (res.code !== '200') {
                            //关闭加载
                            this.server_loading.delLoading = false;
                            return this.$message.error(res.msg);
                        }
                        //关闭加载
                        this.server_loading.delLoading = false;
                        this.$message.success(res.msg);
                        //刷新列表
                        this.getServerList();
                    }).catch(error => {
                        this.server_loading.delLoading = false;
                        this.$message.error(error.toString());
                    });
                }).catch(() => {
                });
            },

            /**
             * 批量删除，之前的选中
             */
            selectChange: function (selectList) {
                this.selectList = selectList;
            },
            /**
             * 批量删除-服务器信息
             */
            batchRemoveServer() {
                const ids = this.selectList.map(item => item.id).toString();
                // console.log(ids);
                this.$confirm('此操作将永久删除选中的服务器信息, 是否继续?', '警告', {
                        confirmButtonText: '确定删除',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }
                ).then(() => {
                    // 开启加载
                    this.server_loading.listLoading = true;
                    let params = {ids: ids};
                    batchRemoveBusServer(params).then(response => {
                        let res = response.data;
                        if (res.code !== '200') {
                            this.server_loading.listLoading = false;
                            return this.$message.error(res.msg);
                        }
                        this.$message.success(res.msg);
                        this.server_loading.listLoading = false;
                        // 刷新列表
                        this.getServerList();
                    }).catch(error => {
                        this.server_loading.listLoading = false;
                        this.$message.error(error.toString());
                    });
                }).catch(() => {
                });
            },
            /**
             * 携带参数，跳转至虚拟主机界面
             */
            toVirtualHost(index, row) {
                this.$confirm('查看该服务器下的虚拟主机, 是否继续?', '提示', {
                        confirmButtonText: '查看',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }
                ).then(() => {
                    this.$router.push({name: "虚拟主机管理", params: {server_scopeRow: row}})
                }).catch(() => {
                });
            }
        },
        created() {
            this.getServerList();
        },
        mounted() {

        },
        computed: {}
    }
</script>

<style >
    .el-input-group__prepend {
        background-color: #6F8294;
        color:#ffffff
    }
    .el-input__inner{
        background-color: #F7F7F7;
    }
    .el-form-item__content .el-textarea__inner{
        background-color: #F7F7F7;
    }
</style>