<template>
    <div class="addRoleDialog">
        <el-dialog width="636px" center @close="closeDialog()" v-if="addRoleData.dialogVisible" title="新增角色"
            :visible.sync="addRoleData.dialogVisible">
            <el-form label-width="100px" ref="ruleForm" :rules="rules" :model="addRoleForm">
                <el-form-item label="角色名称：" prop="roleName">
                    <el-input placeholder="请输入角色名称" v-model="addRoleForm.roleName"></el-input>
                </el-form-item>
                <el-form-item label="权限字符：" prop="roleKey">
                    <el-input placeholder="请输入权限字符" v-model="addRoleForm.roleKey"></el-input>
                </el-form-item>
                <el-form-item label="显示排序：" prop="roleSort">
                    <el-input placeholder="请输入显示排序" v-model="addRoleForm.roleSort" type="text"
                        onkeyup="this.value=this.value.replace(/\D/g,'')"
                        onafterpaste="this.value=this.value.replace(/\D/g,'')" />
                </el-form-item>
                <el-form-item label="状态：" prop="status">
                    <el-radio v-model="addRoleForm.status" label="1">启用</el-radio>
                    <el-radio v-model="addRoleForm.status" label="2">停用</el-radio>
                </el-form-item>
                <el-form-item label="菜单权限：">
                    <div style="height: 400px;overflow: auto;">
                        <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                        <el-tree placeholder="请选择菜单权限" ref="tree" :default-expanded-keys="defaultExpanded"
                            :data="meunTreeData" @check-change="handleCheckChange" show-checkbox node-key="id">
                        </el-tree>
                    </div>
                </el-form-item>
                <div>

                </div>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <!-- <el-button @click="cancel()">取 消</el-button>
                        <el-button type="primary" @click="addRole()">保 存</el-button> -->
                <div class="search" @click="addRole()">保 存</div>
                <div class="reset" @click="cancel()">取 消</div>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { getMenuTree, addRole } from '@/api/sysManage'
export default {
    name: 'addRoleDialog',
    props: {
        addRoleData: {
            type: Object,
            default: {}
        }
    },
    created() {
        this.getMenuTree()
    },
    data() {
        return {
            checkAll: false,
            defaultExpanded: [],
            meunTreeData: [],
            addRoleForm: {
                roleName: '',
                roleKey: "",
                roleSort: '',//角色排序
                status: '1',//状态
                menuIds: []//菜单ID
            },
            rules: {
                roleName: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
                roleKey: [{ required: true, message: '请输入权限字符', trigger: 'blur' }],
                roleSort: [{ required: true, message: '请输入显示排序', trigger: 'blur' }],
                status: [{ required: true, message: '请选择状态', trigger: 'blur' }],
            },
            menuIds:[]
        }
    },
    methods: {
        handleCheckAllChange(val) {
            if (this.checkAll) {
                this.$refs.tree.setCheckedNodes(this.meunTreeData);
            } else {
                this.$refs.tree.setCheckedKeys([]);
            }
        },
        getMenuTree() {
            getMenuTree().then(res => {
                if (res.code == 200) {
                    this.defaultExpanded = []
                    res.data.forEach(item => {
                        this.defaultExpanded.push(item.id)
                    })
                    this.meunTreeData = res.data
                }
            })
        },
        handleCheckChange(data, checked, indeterminate) {            
            // let res = this.$refs.tree.getCheckedNodes()            
            // let arrDeptId = []
            // res.forEach((item) => {
            //     arrDeptId.push(item.id)
            // })
            // this.addRoleForm.menuIds = arrDeptId

            //获取所有选中的子节点
            let checkedKeys = this.$refs.tree.getCheckedKeys()            
            //获取所有选中的父节点（半选中）
            let hafCheckedKeys = this.$refs.tree.getHalfCheckedKeys()            
            //组合
            let menuIds = checkedKeys.concat(hafCheckedKeys)  
            this.menuIds = menuIds                                                                      
            // this.addRoleForm.menuIds = menuIds
        },
        addRole() {            
            this.$refs.ruleForm.validate(valid => {
                if (valid) {                    
                    if (this.menuIds.length != 0) { 
                        this.addRoleForm.menuIds = this.menuIds                     
                        this.$emit("addRoleBtn1", this.addRoleForm)
                    } else {
                        this.$message({
                            type: 'warning',
                            message: '请选择菜单权限!'
                        });
                    }
                }
            })
        },
        cancel() {
            this.addRoleData.dialogVisible = false
            this.addRoleForm = {
                roleName: '',
                roleKey: "",
                roleSort: '',//角色排序
                status: '1',//状态
                menuIds: null//菜单ID
            }
            this.getMenuTree()
        },
        closeDialog() {
            this.addRoleData.dialogVisible = false
            this.getMenuTree()
            this.addRoleForm = {
                roleName: '',
                roleKey: "",
                roleSort: '',//角色排序
                status: '0',//状态
                menuIds: null//菜单ID
            }
        }

    }
}
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__body{
  padding: 20px 95px !important;
}
.dialog-footer{    
    div {        
        display: inline-block;
        width: 80px;
        height: 40px;
        border-radius: 2px;
        font-size: 14px;
        line-height: 40px;
        text-align: center;
      }

      div:hover {
        cursor: pointer;
      }
      .search {
        margin: 0 12px;
        background-color: #2766DD;
        color: #fff;
      }

      .search:hover {
        background-color: #4D85F4;
      }
      .reset {
        color: #333334;
        border: 1px solid #D7D7D7;
      }

      .reset:hover {
        color: #1F9FFF;
        border: 1px solid #1F9FFF;
      }
}
// 选中后radio文本的颜色
::v-deep .el-radio__input.is-checked+.el-radio__label {
    color: #2766DD
}

/* radio选中后小圆点的颜色 */
::v-deep .el-radio__input.is-checked .el-radio__inner {
    background: #2766DD !important;
    border-color: #2766DD !important;
}
</style>