<template>
    <div>
        <div class="content-head">
            <dataBreadcrumb :breads="breads"></dataBreadcrumb>
            <h3>新建角色</h3>
            <h5>新建角色</h5>
        </div>
        <div class="content">
            <div class="message">
                <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="角色名称" prop="roleName">
                        <el-input v-model.trim="form.roleName" :disabled="state"></el-input>
                    </el-form-item>
                    <el-form-item label="备注" prop="remark">
                        <el-input v-model="form.remark"   type="textarea" :rows="2" :disabled="state" maxlength="300"></el-input>
                    </el-form-item>
                    <el-form-item label="权限" prop="menuPOList">
                        <el-tree
                            :data="data"
                            :default-checked-keys="list"
                            :default-expanded-keys="list"
                            :props="defaultProps"
                            show-checkbox
                            @check-change="handleCheckChange"
                            node-key="id"
                            ref="tree"
                        >
                        </el-tree>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="centerButton">
            <el-button @click="back">返回</el-button>
            <el-button @click="add" v-if="!state">添加</el-button>
        </div>
    </div>
</template>

<script>
import { roleMenus, roleadd, roledetail } from '@api/purchaser/organization';
import dataBreadcrumb from '@components/dataBreadcrumb.vue';
export default {
    components: {
        dataBreadcrumb
    },
    data() {
        let check = async (rule, value, callback) => {
            console.log(this.form.menuPOList.length);
            if (this.form.menuPOList.length == 0) {
                console.log('空');
                return callback(new Error('请选择权限'));
            } else {
                callback();
            }
        };
        return {
			state:false,
			list:[7],
            detail: '',
            breads: ['系统管理', '权限管理'],
            data: [],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            form: {
                roleName: '',
                menuPOList: [],
                remark:""
            },
            rules: {
                roleName: [
                    {
                        required: true,
                        message: '请填写',
                        trigger: 'blur'
                    }
                ],
                menuPOList: [
                    {
                        required: true,
                        validator: check,
                        trigger: 'change'
                    }
                ]
            }
        };
    },
    methods: {
        back() {
            this.$router.go(-1);
        },
        async getroleMenus() {
            const { data, code } = await roleMenus(2);
            data[0].disabled = true;
            this.data = data;
        },
        handleCheckChange() {
            this.form.menuPOList = this.$refs.tree.getCheckedKeys();
        },
        // 详情
        async getroledetail(id) {
		  var { data, code } = await roleMenus(2);
            for (let item of data) {
				item.disabled = true;
				if(item.children){
					for(let childrens of item.children){
						childrens.disabled = true
					}
				}
            }
            this.data = data;
			 var { data, code } = await roledetail(id);
             this.form.roleName=data.roleName
             this.form.remark=data.remark
			  this.list = data.menuIdList;
			  this.state=true
        },  
        //    添加
        async add() {
            try {
                const valid = await this.$refs['form'].validate();
                if (valid) {
                    let form = this.form;
                    const { code, msg } = await roleadd(form);
                    if (code === 200) {
                        this.$message({
                            message: msg,
                            type: 'success',
                            duration: 1500
                        });
                        setTimeout(() => {
                            this.$router.go(-1);
                        }, 1500);
                    } else {
                        this.$message.error(msg);
                    }	
                }
            } catch (e) {
                console.log(e);
            }
        }
    },
    created() {
			this.form.menuPOList=this.list
        let id = this.$route.query.id;
        if (id) { 
            this.getroledetail(id);
        } else {
            this.getroleMenus();
        }
    }
};
</script>


<style scoped>
.message {
    width: 60%;
    margin-left: 50px;
    margin-top: 20px;
}

.message > div {
    margin-bottom: 30px;
}
</style>
