<template>
<div class="drawer_info">
    <div class="drawer_title">{{ dataForm.id ? "修改" : "新增" }}</div>
    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" @keyup.enter.native="validateForm('dataForm')" class="drawer_list">
        <el-row>
            <el-col :span="24">
                <el-form-item prop="name" label="角色编码">
                    <el-input v-model="dataForm.name" maxlength="20" placeholder="请输入角色编码" clearable></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item prop="remark" label="角色名称">
                    <el-input v-model="dataForm.remark" maxlength="20" placeholder="请输入角色名称" clearable></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="16">
                <el-form-item size="mini" label="菜单授权">

                    <el-tree :data="menuList" :props="{ label: 'name', children: 'children' }" node-key="id" ref="menuListTree" accordion show-checkbox>
                    </el-tree>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
    <div class="save_btn">
        <el-button type="primary" @click="validateForm('dataForm')">提交</el-button>
        <el-button plain @click="resetForm('dataForm')">重置</el-button>
    </div>
</div>
</template>

<script>
export default {
    data() {
        return {
            id: "",
            menuList: [],
            parentMenuIds:[],
            dataForm: {
                id: "",
                name: "",
                menuIdList: [],
                remark: "",
            },
        };
    },
    computed: {
        dataRule() {
            return {
                name: [{
                    required: true,
                    message: "请输入角色编码",
                    trigger: "blur",
                }, ],
                remark: [{
                    required: true,
                    message: "请输入角色名称",
                    trigger: "blur",
                }, ],
            };
        },
    },
    created() {
        this.getMenuList();
    },
    methods: {
        init() {
            this.resetForm("dataForm");
            this.$nextTick(async () => {
                if (this.dataForm.id) {
                    await this.getMenuList();
                    this.getInfo();
                }
            });
        },
        // 获取信息
        getInfo() {
            this.$http.get(`/sys/role/${this.dataForm.id}`).then(({
                data: res
            }) => {
                if (res.code !== 0) {
                    return this.$message.error(res.msg);
                }
                this.dataForm = {
                    ...this.dataForm,
                    ...res.data,
                };
                let keyids = [];
                this.dataForm.menuIdList.forEach(m=>{
                    if(!this.parentMenuIds.includes(m)){
                        keyids.push(m)
                    }
                })
                this.$refs.menuListTree.setCheckedKeys(keyids);
            });
        },
        // 获取菜单列表
        getMenuList() {
            return this.$http.get("/sys/menu/select").then(async ({
                data: res
            }) => {
                if (res.code !== 0) {
                    return this.$message.error(res.msg);
                }
                this.menuList = res.data;
                await this.getIds(this.menuList);
            });
        },
        getIds(list){
            return new Promise((resolve, reject) => {
                list.forEach(l => {
                    if(l.children.length){
                        if(l.type===0) this.parentMenuIds.push(l.id)
                        this.getIds(l.children);
                    }
                });
                resolve();
            })
        },
        //表单重置
        resetForm(formName) {
            this.$refs.menuListTree.setCheckedKeys([]);
            this.$refs[formName].resetFields();
            this.dataForm.id = this.id;
        },
        //表单验证
        validateForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.submitForm();
                } else {
                    return false;
                }
            });
        },
        // 表单提交
        submitForm() {

            this.dataForm.menuIdList = [
                ...this.$refs.menuListTree.getCheckedKeys(),
                ...this.$refs.menuListTree.getHalfCheckedKeys(),
            ];
            console.log(this.dataForm.menuIdList)
            this.$http[!this.dataForm.id ? "post" : "put"](
                "/sys/role",
                this.dataForm
            ).then((res) => {
                if (res.data.code == 0) {
                    this.$message({
                        type: "success",
                        message: "保存成功",
                    });
                    this.$emit("refreshDataList");
                } else {
                    this.$message({
                        type: "error",
                        message: res.data.msg,
                    });
                }
            });
        },
    },
};
</script>

<style lang="scss">
.customWidth.alert {
    width: 50%;

    .el-dialog__title {
        border-left: 4px solid #ddd;
        padding-left: 8px;
        border-color: #5776e6;
    }
}
</style>
