<template>
    <section>
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="filters">
                <el-form-item>
                    <el-input v-model="filters.realName" placeholder="姓名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="filters.userName" placeholder="账号"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="getUsers">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleAdd">新增</el-button>
                </el-form-item>
            </el-form>
        </el-col>

        <!--列表-->
        <el-table :data="users" highlight-current-row border v-loading="listLoading" @selection-change="selsChange"
                  style="width: 100%;">
            <el-table-column type="selection" width="55" align="center">
            </el-table-column>
            <!--<el-table-column type="index" width="60">-->
            <!--</el-table-column>-->
            <el-table-column prop="userId" label="ID" width="100" align="center" sortable>
            </el-table-column>
            <el-table-column prop="username" label="账号" width="120" align="center" sortable>
            </el-table-column>
            <el-table-column prop="realname" label="姓名" width="120" align="center" sortable>
            </el-table-column>
            <el-table-column prop="sex" label="性别" width="100" :formatter="formatSex" align="center" sortable>
            </el-table-column>
            <el-table-column prop="mobilephone" label="电话" width="130" align="center">
            </el-table-column>
            <el-table-column prop="creattime" label="创建时间" width="175" align="center" sortable>
            </el-table-column>
            <el-table-column prop="updatetime" label="更新时间" width="175" align="center" sortable>
            </el-table-column>
            <el-table-column prop="address" label="地址" min-width="180" align="center">
            </el-table-column>
            <el-table-column prop="email" label="Email" min-width="180" align="center">
            </el-table-column>
            <el-table-column prop="state" label="启用" width="100" :formatter="formatState" align="center" sortable>
            </el-table-column>
            <el-table-column label="操作" width="300px" fixed="right" align="center">
                <template slot-scope="scope">
                    <el-button type="primary" icon="el-icon-setting" size="small"
                               @click="roleEdit(scope.$index, scope.row)">角色配置
                    </el-button>
                    <el-button size="small" type="success" icon="el-icon-check"
                               @click="handleEdit(scope.$index, scope.row)">编辑
                    </el-button>
                    <el-button type="danger" icon="el-icon-delete" size="small"
                               @click="handleDel(scope.$index, scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--工具条-->
        <el-col :span="24" class="toolbar">
            <el-button type="danger" icon="el-icon-delete" @click="batchRemove" :disabled="this.sels.length===0">批量删除
            </el-button>
            <el-pagination layout="total, prev, pager, next" @current-change="handleCurrentChange" :page-size="10"
                           :total="total" style="float:right;">
            </el-pagination>
        </el-col>

        <!--编辑界面-->
        <el-dialog title="编辑" :visible.sync="editFormVisible" :close-on-click-modal="false">
            <el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
                <el-form-item label="ID">
                    <span>{{editForm.userId}}</span>
                </el-form-item>
                <el-form-item label="账号">
                    <span>{{editForm.username}}</span>
                </el-form-item>
                <!--                <el-form-item label="密码" prop="password">-->
                <!--                    <el-input v-model="editForm.password" auto-complete="off" type="password" show-password></el-input>-->
                <!--                </el-form-item>-->
                <el-form-item label="姓名" prop="realname">
                    <el-input v-model="editForm.realname" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="电话" prop="mobilephone">
                    <el-input v-model="editForm.mobilephone" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="Email" prop="email">
                    <el-input v-model="editForm.email" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-radio-group v-model="editForm.sex">
                        <el-radio class="radio" label="1">男</el-radio>
                        <el-radio class="radio" label="0">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="年龄">
                    <el-input-number v-model="editForm.age" :min="0" :max="200"></el-input-number>
                </el-form-item>
                <!--<el-form-item label="创建日期">-->
                <!--<el-date-picker type="date" placeholder="创建日期" v-model="editForm.creattime" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"></el-date-picker>-->
                <!--</el-form-item>-->
                <el-form-item label="地址">
                    <el-input type="textarea" v-model="editForm.address"></el-input>
                </el-form-item>
                <el-form-item label="启用">
                    <el-radio-group v-model="editForm.state">
                        <el-radio class="radio" label="true">是</el-radio>
                        <el-radio class="radio" label="false">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item lable="头像">
                    <el-upload
                            class="avatar-uploader"
                            action="http://127.0.0.1:7003/upload"
                            :show-file-list="true"
                            accept="image/jpeg,image/jpg,image/png"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload"
                    >
                        <img v-if="faceImageUrl" :src="faceImageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="editFormVisible = false">取消</el-button>
                <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
            </div>
        </el-dialog>

        <!--新增界面-->
        <el-dialog title="新增用户" :visible.sync="addFormVisible" :close-on-click-modal="false">
            <el-form :model="addForm" label-width="150px" :rules="addFormRules" ref="addForm">
                <el-form-item label="账号" prop="username">
                    <el-input v-model="addForm.username" clearable style="width:400px"
                              aria-placeholder="用户名长度在5-11位,支持英文和数字"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="addForm.password" type="password" clearable style="width:400px"></el-input>
                </el-form-item>
                <el-form-item label="姓名" prop="realname">
                    <el-input v-model="addForm.realname" clearable style="width:400px"></el-input>
                </el-form-item>
                <el-form-item label="选择用户关系：">
                    <br/>
                    <el-tree style="width:270px"
                             :data="user_config.server_hostList"
                             :props="user_config.defaultParams"
                             ref="tree"
                             node-key="id"
                             show-checkbox highlight-current default-expand-all>
                    </el-tree>
                </el-form-item>

                <el-form-item label="电话" prop="mobilephone">
                    <el-input v-model="addForm.mobilephone" clearable style="width:400px"></el-input>
                </el-form-item>
                <el-form-item label="Email" prop="email">
                    <el-input v-model="addForm.email" clearable style="width:400px"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-radio-group v-model="addForm.sex">
                        <el-radio class="radio" label="1">男</el-radio>
                        <el-radio class="radio" label="0">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="年龄" prop="age">
                    <el-input-number v-model="addForm.age" :min="0" :max="200"></el-input-number>
                </el-form-item>
                <el-form-item label="地址">
                    <el-input type="textarea" v-model="addForm.address" size="medium" autosize :rows="2" clearable
                              style="width:400px"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="addFormVisible = false">取消</el-button>
                <el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
            </div>
        </el-dialog>

        <!--权限设置-->
        <el-dialog title="权限设置" :visible.sync="roleFormVisible" :close-on-click-modal="false">
            <el-form :model="roleEditForm" label-width="80px" ref="roleEditForm">
                <el-form-item label="ID">
                    <span>{{roleEditForm.userId}}</span>
                </el-form-item>
                <el-form-item label="账号">
                    <span>{{roleEditForm.username}}</span>
                </el-form-item>
                <el-tree :data="roles" :props="treeDefaultProps" default-expand-all show-checkbox highlight-current
                         check-strictly node-key="roleId" ref="tree" @check-change="treeHandleCheckChange">
                </el-tree>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click.native="roleFormVisible = false">取消</el-button>
                <el-button type="primary" @click.native="roleEditSubmit" :loading="addLoading">提交</el-button>
            </div>
        </el-dialog>
    </section>
</template>

<script>
    import util from '../../common/js/util'
    import NProgress from 'nprogress'
    import {getUserList, removeUser, batchRemoveUser, editUser, addUser, setUserRole} from '../../api/user';
    import {getList} from '../../api/role_api';
    import moment from 'moment'
    import {getServerAndHostList, insertUserInfo} from "../../api/message_bus";

    export default {
        data() {
            return {
                user_config: {
                    server_hostList: [],
                    defaultParams: {
                        label: 'aliasName',
                        children: 'aliasList'
                    }
                },
                filters: {
                    userName: '',
                    realName: ''
                },
                treeDefaultProps: {
                    children: 'children',
                    label: 'roleName',
                },
                users: [],
                total: 0,
                pageNum: 1,
                pageSize: 10,
                faceImageUrl: '',
                listLoading: false,
                sels: [],//列表选中列
                //编辑界面是否显示
                editFormVisible: false,
                editLoading: false,
                editFormRules: {
                    name: [
                        {required: true, message: '请输入姓名', trigger: 'blur'}
                    ],
                    mobilephone: [
                        {required: true, message: '请输入手机号码', trigger: ['blur', 'change']}
                    ]
                },
                //编辑界面数据
                editForm: {
                    userId: 1,
                    username: '',
                    password: '',
                    sex: '1',
                    creattime: undefined,
                    address: '',
                    realname: '',
                    email: '',
                    mobilephone: '',
                    state: true
                },

                addFormVisible: false,//新增界面是否显示
                addLoading: false,
                addFormRules: {
                    username: [
                        {required: true, message: '请输入姓名,用户名长度在5-11位,支持英文和数字', trigger: 'blur'},
                    ],
                    password: [
                        {required: true, message: '请输入密码,用户名长度在6-18位,支持英文和数字和非空字符', trigger: 'blur'}
                    ],
                    mobilephone: [
                        {required: true, message: '请输入手机号码', trigger: ['blur', 'change']},
                    ],
                    virtualHostId: [
                        {required: true, message: '请选择虚拟主机', trigger: ['blur', 'change']},
                    ],
                    serverId: [
                        {required: true, message: '请选择服务器', trigger: ['blur', 'change']},
                    ],
                },
                //用户角色配置
                roleFormVisible: false,
                //新增界面数据
                addForm: {
                    username: '',
                    password: '',
                    sex: 1,
                    address: '',
                    realname: '',
                    email: '',
                    mobilephone: '',
                    age: 1,
                    virtualHostId: '',
                    serverId: '',
                },
                roleEditForm: {
                    userId: 1,
                    username: "",
                    roles: []
                },
                roles: [],
                roleIds: []

            }
        },
        methods: {
            // 性别显示转换
            formatSex: function (row, column) {
                return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
            },
            formatState: function (row, column) {
                return row.state == true ? '是' : row.state == false ? '否' : '未知';
            },
            handleCurrentChange(val) {
                this.pageNum = val;
                this.getUsers();
            },
            // 获取用户列表
            getUsers: function () {
                let para = {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    userName: this.filters.userName,
                    realName: this.filters.realName
                };
                this.listLoading = true;
                getUserList(para).then((res) => {
                    let response = res.data.data;
                    this.total = response.total;
                    this.users = response.list;
                    this.listLoading = false;
                    //NProgress.done();
                }).catch((error) => {
                    this.listLoading = false;
                    this.$message.error(error.toString());
                });

            },
            //删除
            handleDel: function (index, row) {
                this.$confirm('确认删除该记录吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;
                    //NProgress.start();
                    let para = {userId: row.userId};
                    removeUser(para).then((res) => {
                        this.listLoading = false;
                        //NProgress.done();
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                        this.getUsers();
                    }).catch((error) => {
                        this.listLoading = false;
                        alert(error);
                    });
                }).catch();
            },
            /**
             * 显示编辑界面
             * @param index
             * @param row 为这行的数据对象
             */
            handleEdit: function (index, row) {
                this.editFormVisible = true;
                this.editForm = Object.assign({}, row);
            },
            roleEdit: function (index, row) {
                this.roleFormVisible = true;
                this.getRoles();
                var _this = this;
                _this.roleIds = [];
                this.roleEditForm = Object.assign({}, row);
                let roles = this.roleEditForm.roles;

                if (util.checkNull(roles)) {
                    roles.forEach(function (role, v_index, v_arr) {
                        if (util.checkNull(role)) {
                            _this.roleIds[v_index] = role.roleId;
                        }
                    });
                }
                this.$nextTick(() => {
                    //反向适配
                    this.$refs.tree.setCheckedKeys(this.roleIds);
                });
            },
            getRoles() {
                let para = {
                    pageNum: 1,
                    pageSize: 100
                };
                NProgress.start();
                getList(para).then((res) => {
                    this.roles = res.data.list;
                    NProgress.done();
                }).catch((error) => {
                    if (null != error.response && error.response !== undefined) {
                        let status = error.response.status;
                        let msg = error.response.statusText;
                        alert(status + msg);
                    } else {
                        alert(error);
                    }
                });


            },
            //显示新增界面，每次点开初始化数据
            handleAdd: function () {
                this.addFormVisible = true;
                this.addForm = {
                    username: '',
                    password: '',
                    sex: 1,
                    address: '',
                    realname: '',
                    email: '',
                    mobilephone: '',
                    age: 1,
                    virtualHostId: '',
                    serverId: '',
                };
            },
            //编辑
            editSubmit: function () {
                this.$refs.editForm.validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            this.editLoading = true;
                            //NProgress.start();
                            // let para = Object.assign({}, this.editForm);
                            //不需要提交的 去掉，后端不好接收
                            this.editForm.authorities = null;
                            this.editForm.permissions = null;
                            this.editForm.roles = null;
//							para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd');
                            /*
        					查询之后格式this.filters.column.create_start_date中日期发生变化;
        					Wed Aug 09 2017 00:00:00 GMT+0800 (中国标准时间) 变成了 "2017-08-08T16:00:00.000Z";
        					所以使用 moment 日期格式化插件将时间转换成 [ Wed Aug 09 2017 00:00:00 GMT+0800 (中国标准时间) ] 格
        					式;
    						*/
                            /*moment 安装 npm install moment --save*/
//                            para.creattime = moment(para.creattime).format('YYYY-MM-DD HH:mm:ss');
                            this.editLoading = false;
                            editUser(this.editForm).then((res) => {

                                //NProgress.done();
                                this.$message({
                                    message: '提交成功',
                                    type: 'success'
                                });
                                this.$refs['editForm'].resetFields();
                                this.editFormVisible = false;
                                this.getUsers();
                            }).catch(error => alert(error));
                        });
                    }
                });
            },
            //新增
            addSubmit: function () {
                this.$refs.addForm.validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            this.addLoading = true;
                            let para = Object.assign({}, this.addForm);
//							para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd');

                            // 添加MQ用户信息
                            this.addForm.virtualHostId = this.$refs.tree.getCheckedKeys().join();
                            const params = {
                                username: this.addForm.username,
                                password: this.addForm.password,
                                realName: this.addForm.realname,
                                virtualHostId: this.addForm.virtualHostId,
                            }
                            insertUserInfo(params).then((response) => {
                                let res = response.data;
                                // 添加失败
                                if (res.code !== '200') {
                                    return this.$message.error("MQ:" + res.msg);
                                }
                                // 添加，成功
                                this.$message.success('添加MQ用戶信息，成功');
                            }).catch(error => {
                                this.$message.error(error.toString());
                            });

                            addUser(para).then((res) => {
                                this.addLoading = false;
                                //NProgress.done();
                                this.$message({
                                    message: '提交成功',
                                    type: 'success'
                                });
                                this.$refs['addForm'].resetFields();
                                this.addFormVisible = false;
                                this.getUsers();
                            }).catch(error => {
                                this.addLoading = false;
                                this.$message({
                                    message: error.message,
                                    type: 'error'
                                });
                            });

                        });
                    }
                });
            },
            selsChange: function (sels) {
                this.sels = sels;
            },
            //批量删除
            batchRemove: function () {
                var ids = this.sels.map(item => item.userId).toString();
                this.$confirm('确认删除选中记录吗？', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;
                    //NProgress.start();
                    let para = {ids: ids};
                    batchRemoveUser(para).then((res) => {
                        this.listLoading = false;
                        //NProgress.done();
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                        this.getUsers();
                    });
                }).catch(() => {

                });
            },
            roleEditSubmit: function () {
                this.$confirm('确认提交吗？', '提示', {}).then(() => {
//                    this.editLoading = true;
                    let userId = this.roleEditForm.userId;
                    let roleIds = this.$refs.tree.getCheckedKeys();
                    let para = {userId, roleIds};
                    setUserRole(para).then((res) => {
                        if (res.status === 200) {
                            this.$message({
                                message: '岗位设置成功',
                                type: 'success'
                            });
                        }
                        this.getUsers();
                        this.roleFormVisible = false;
                    }).catch(err => {
                        alert(err);
                    });
                    console.log(para);
                });
            },
            handleAvatarSuccess: function (response) {
                this.faceImageUrl = 'http://127.0.0.1:7003/' + response.data;
            },
            beforeAvatarUpload: function () {

            },
            treeHandleCheckChange: function (data, checked, indeterminate) {
                if (checked) {
                    this.roleIds.push(data.roleId);
                } else {
                    this.roleIds.splice(this.roleIds.contains(data.roleId), 1);
                }
//                console.log(data, checked, indeterminate);
                console.log(this.roleIds);
            },

            /**
             * 选择用户关系
             * MQ服务器与虚拟主机（1：n）的列表
             */
            selectUserRelation() {
                getServerAndHostList().then((response) => {
                    let res = response.data;
                    if (res.code !== '200') {
                        return this.$message.error('获取服务器与虚拟主机信息，失败！');
                    }
                    // 获取列表数据
                    this.user_config.server_hostList = res.data;
                }).catch(error => {
                    this.$message.error(error.toString());
                });
            },

        },
        mounted() {
            this.getUsers();
            this.selectUserRelation();
        },
        computed: {
            hideShow() {//当图片多于一张的时候，就隐藏上传框
                return this.file === '' ? false : true
            }
        },
    }

</script>

<style scoped>

</style>