<template>
    <div class="detaileDialog">
        <el-dialog width="636px" title="详情查看" :visible.sync="detaildData.dialogVisible">
            <el-form label-width="90px" ref="ruleForm" :model="detaildData.data">                
                <el-form-item label="角色名称:">
                    <el-input v-model="detaildData.data.roleName" autocomplete="off" disabled />
                </el-form-item>
                <el-form-item label="权限字符:">
                    <el-input v-model="detaildData.data.roleKey" autocomplete="off" disabled />
                </el-form-item>
                <el-form-item label="显示排序:">
                    <el-input v-model="detaildData.data.roleSort" autocomplete="off" disabled />
                </el-form-item>
                <el-form-item label="状态:">
                    <el-input v-model="detaildData.data.status == 1?'启用':'停用'" autocomplete="off" disabled />
                </el-form-item>
                <el-form-item label="菜单权限:">
                    <div style="height: 400px;overflow: auto;">
                        <el-tree :default-checked-keys="detaildData.data.menuIds" :default-expand-all="true" ref="tree"
                            :data="meunTreeData" show-checkbox node-key="id">
                        </el-tree>
                    </div>

                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
import { getMenuTree } from '@/api/sysManage'
export default {
    name: 'addRoleDialog',
    props: {
        detaildData: {
            type: Object,
            default: {}
        }
    },
    created() {
        this.getMenuTree()
    },
    data() {
        return {
            meunTreeData: [],
        }
    },
    methods: {
        getMenuTree() {
            getMenuTree().then(res => {
                if (res.code == 200) {
                    this.meunTreeData = res.data
                    this.loopMuduleTreeDisabled(this.meunTreeData, this)
                }
            })
        },
        loopMuduleTreeDisabled(arr, that) {
            arr.forEach((item) => {
                that.$set(item, 'disabled', true)
                if (item.children && item.children.length > 0) {
                    this.loopMuduleTreeDisabled(item.children, that)
                }
            })
        }
    }
}
</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>