<template>
    <div class="updataRoleDialog">
        <el-dialog width="636px" center title="修改角色" :visible.sync="updateRoleData.dialogVisible">            
            <el-form label-width="100px" ref="ruleForm" :rules="rules" :model="updateRoleData.data">
                <el-form-item label="角色名称：" prop="roleName">
                    <el-input v-model="updateRoleData.data.roleName"></el-input>
                </el-form-item>
                <el-form-item label="权限字符：" prop="roleKey">
                    <el-input :disabled="updateRoleData.data.roleId == 1" v-model="updateRoleData.data.roleKey"></el-input>
                </el-form-item>
                <el-form-item label="显示排序：" prop="roleSort">
                    <el-input v-model="updateRoleData.data.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 :disabled="updateRoleData.data.roleId == 1" v-model="updateRoleData.data.status"
                        label="1">启用</el-radio>
                    <el-radio :disabled="updateRoleData.data.roleId == 1" v-model="updateRoleData.data.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 :data="meunTreeData" :show-checkbox="true" ref="tree" node-key="id" 
                            :check-strictly="checkStrictly" :default-expand-all="true"
                            :default-checked-keys='updateRoleData.data.menuIds'                        
                            @check-change="handleCheckChange" 
                            >
                        </el-tree> -->
                        <el-tree :data="meunTreeData" :show-checkbox="true" ref="tree" node-key="id"
                            :check-strictly="checkStrictly" @check="getCurrentNode"
                            :default-checked-keys="this.updateRoleData.data.menuIds" :default-expand-all="true"
                            @check-change="handleCheckChange">
                        </el-tree>
                    </div>
                </el-form-item>                
            </el-form>
            <span slot="footer" class="dialog-footer">
                <!-- <el-button @click="cancel()">取 消</el-button>
                        <el-button type="primary" @click="updateRole">保 存</el-button> -->
                <div class="search" @click="updateRole">保 存</div>
                <div class="reset" @click="cancel()">取 消</div>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { getMenuTree, addRole,roleDetaile } from '@/api/sysManage'
export default {
    name: 'updateRoleDialog',
    props: {
        updateRoleData: {
            type: Object,
            default: {}
        }
    },
    created() {                            
        this.getMenuTree()               
    },      
    data() {
        return {                     
            checkAll: false,
            checkStrictly: true,
            defaultExpanded: [],
            meunTreeData: [],
            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.checkStrictly = false
                this.$refs.tree.setCheckedNodes(this.meunTreeData);
            } else {
                this.checkStrictly = true
                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 checkedKeys = this.$refs.tree.getCheckedKeys()
            // //获取所有选中的父节点（半选中）
            // let hafCheckedKeys = this.$refs.tree.getHalfCheckedKeys()
            // //组合
            // let menuIds = checkedKeys.concat(hafCheckedKeys)             
            // // let menuIds = checkedKeys           
            // this.menuIds = menuIds           
            // // this.updateRoleData.data.menuIds = menuIds

            const AllcheckedNodes = this.$refs.tree.getCheckedNodes(false, true);
            let arrDeptId = []
            AllcheckedNodes.forEach((item) => {
                arrDeptId.push(item.id)
            })
            this.updateRoleData.data.menuIds = arrDeptId
        },
        updateRole() {
            this.$refs.ruleForm.validate(valid => {                
                if (valid) {                    
                    // this.handleCheckChange()
                    if (this.updateRoleData.data.menuIds.length != 0) {                        
                        // this.updateRoleData.data.menuIds = this.menuIds
                        this.$emit("updateRoleBtn", this.updateRoleData.data)                        
                    } else {
                        this.$message({
                            type: 'warning',
                            message: '请选择菜单权限!'
                        });
                    }
                }
            })
        },
        cancel() {
            this.updateRoleData.dialogVisible = false
            this.getMenuTree()
        },
        closeDialog() {
            this.getMenuTree()
        },
        getCurrentNode(data) {
            const node = this.$refs.tree.getNode(data);
            this.childNodes(node);
            this.parentNodes(node);
        },
        childNodes(node) {            
            const len = node.childNodes.length;                        
            for (let i = 0; i < len; i += 1) {
                node.childNodes[i].checked = node.checked;
                this.childNodes(node.childNodes[i]);
            }
        },
        parentNodes(node) {                       
            if (node.parent) {                
                for (const key in node) {                    
                    if (key === 'parent') {
                        node[key].checked = true;
                        this.parentNodes(node[key]);
                    }
                }
            }
        },
    }
}
</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>