<template>
    <div>
        <h1>
            我是权限管理页面
        </h1>
<!--角色管理-->
        <el-table
                ref="multipleTable"
                stripe border fit highlight-current-row
                :data="list"
                height="961"
                style="width: 100%">
            <el-table-column type="index"    label="序号"    width="180" align="center"></el-table-column>
            <el-table-column prop="us"       label="用户名称" width="180" align="center"></el-table-column>
            <el-table-column prop="age"       label="用户年龄" width="180" align="center"></el-table-column>
            <el-table-column prop="sex"      label="用户性别" width="180" align="center"></el-table-column>
            <el-table-column prop="emailAddress"  label="用户邮箱" width="240" align="center"></el-table-column>
            <el-table-column prop="role.role_name"     label="用户等级" width="200" align="center"></el-table-column>

            <!--单个删除-->
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="small"
                            type="info"
                            @click="handleEdit(scope.$index, scope.row)">
                        <i class="el-icon-edit"></i>编辑</el-button>
                    <el-button
                            size="small"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">
                        <i class="el-icon-delete"></i>_删除</el-button>
                </template>
            </el-table-column>
        </el-table>

<!--菜单信息-新增/编辑弹窗层-->
        <el-dialog
                title="修改权限"
                :visible.sync="dialogVisible"
                width="50%">
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                <!--用户名称-->
                <el-form-item label="用户名称" prop="label">
                    <el-input v-model="form.us" style="width: 25%" :disabled="true" ></el-input>
                </el-form-item>
                <!--用户性别-->
                <el-form-item label="用户性别" prop="label">
                    <el-input v-model="form.sex" style="width: 25%" :disabled="true"></el-input>
                </el-form-item>
                <!--用户邮箱-->
                <el-form-item label="用户邮箱" prop="label">
                    <el-input v-model="form.emailAddress" style="width: 25%" :disabled="true"></el-input>
                </el-form-item>
                <!--用户等级-->
                <el-form-item label="用户等级" prop="label">
                    <el-select v-model="form.role" placeholder="请选择">
                        <el-option
                                v-for="item in userRoleList"
                                :label="item.role_name"
                                :value="item._id">
                        </el-option>
                    </el-select>
                </el-form-item>

                <!--立即创建/取消-->
                <el-form-item>
                    <el-button type="primary" @click="updateRoleName" round>修改</el-button>
                    <el-button type="warning" @click="cancelBtnClick" round>取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

<!--底部说明-->
        <footer>
            <p>{{CopyRight}}</p>
        </footer>
    </div>
</template>

<script>
    const axios=require('axios');
    import Cookies from 'js-cookie';

    export default {
        data(){
            return{
                list:[],
                userRoleList:[],
                CopyRight:'2020  Permission  Vue  Demo ! ',
                dialogVisible:false,
                form: {
                    _id:'',
                    us:'',
                    age:'',
                    sex:'',
                    role:'',
                    emailAddress:'',
                },
                rules:{
                    dept:[
                        {required:true,message:'请填写用户等级',trigger:'blur'}
                    ],
                }
            }
        },
        created(){
            this.getUserInfo();
            this.getroleNameInfo();
        },
        methods:{
            getUserInfo(){

                axios.get('https://mz.tshe.cn/restauantCH/user/userRolePopulateFind',
                    {
                        headers:{
                            // 切记 token 不要直接发送，要在前面加上 Bearer 字符串和一个空格
                            // 'Authorization':`Bearer ${Cookies.get('token')}`
                            // 'Authorization':"Bearer " + Cookies.get('token')
                            'token':Cookies.get('token')
                        }
                    })
                    .then((res)=>{
                        this.list=res.data;
                    })
                    .catch(error=>{//token过期的处理
                        if(error.response.data.code==-1){
                            this.$message.info(error.response.data.massage);
                                this.$router.replace('/');
                        }
                    })
            },
            getroleNameInfo(){
                axios.get('https://mz.tshe.cn/restauantCH/role/findroleName')
                    .then(res=>{
                        res.data.forEach(item=>{
                            this.userRoleList.push(item)
                        })
                    })
            },
            handleEdit(index, row) {
                this.dialogVisible = true;
                console.log(row,'row!!!!!')
                if(row.role==null){
                    this.form={
                        _id:row._id,
                        us:row.us,
                        sex:row.sex,
                        emailAddress:row.emailAddress,
                    }
                    this.$message.info('该用户的角色权限已被删除，请重新赋予其权限')
                }
                else{
                    this.form={
                        _id:row._id,
                        us:row.us,
                        sex:row.sex,
                        role:row.role.role_name,
                        emailAddress:row.emailAddress,
                    }
                }
            },
            updateRoleName(){
                axios.post('https://mz.tshe.cn/restauantCH/user/updateDept',{
                    _id:this.form._id,
                    role:this.form.role
                })
                    .then((res)=>{
                        if(res.data.code==0){
                            this.$message.success(res.data.msg);
                            this.dialogVisible=false;
                            // 定时任务
                            let that = this;
                            setTimeout(function () {
                                that.getUserInfo();
                            }, 300);
                        }
                        else if(res.data.code==-1)this.$message.error(res.data.msg)
                    })
            },
            handleDelete(index, row){
                if (confirm('确定要删除吗') == true) {
                    axios.post('https://mz.tshe.cn/restauantCH/user/removeUserInfo', {_id: row._id})
                        .then((res) => {
                            this.$message.success('删除成功!')
                            // 定时任务
                            let that = this;
                            setTimeout(function () {
                                that.getUserInfo();
                            }, 300);
                        })
                }
            },
            cancelBtnClick(){
                    this.form._id='',
                    this.form.us='',
                    this.form.sex='',
                    this.form.role='',
                    this.form.emailAddress='',
                    this.dialogVisible =false;
            },
        }
    }
</script>
