<template>
    <div>
        <el-form :model="form" label-position="left" label-width="80px">
            <el-form-item :model="form.roleName" label="角色名称：">
                <el-input placeholder="决策组-1" type="text"></el-input>
            </el-form-item>
            <el-form-item :model="form.roleDesc" label="角色描述：">
                <el-input type="textarea" placeholder="请输入" v-model="textarea" maxlength="200" show-word-limit></el-input>
            </el-form-item>
            <div class="permissionType">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="PC端" name="pc"></el-tab-pane>
                    <el-tab-pane label="移动端" name="mobile"></el-tab-pane>
                </el-tabs>
                <el-collapse v-model="activeNames" @change="handChange">
                    <el-collapse-item name="1">
                        <template slot="title">
                            <i :class="isActive('1') !== -1 ? 'el-icon-caret-bottom' : 'el-icon-caret-right'"></i>前端
                        </template>
                        <div style="display: flex; margin-left: 20px;">
                            <div>
                                <el-tree :data="data1" :props="defaultProps" show-checkbox node-key="id"
                                    @node-click="handleNodeClick">
                                </el-tree>
                                <el-tree :data="data2" :props="defaultProps" show-checkbox node-key="id"
                                    @node-click="handleNodeClick">
                                </el-tree>

                                <el-tree :data="data3" :props="defaultProps" show-checkbox node-key="id"
                                    @node-click="handleNodeClick">
                                </el-tree>
                            </div>
                            <div style="margin-left: 200px">
                                <el-tree :data="data4" :props="defaultProps" show-checkbox node-key="id"
                                    @node-click="handleNodeClick">
                                </el-tree>
                                <el-tree :data="data5" :props="defaultProps" show-checkbox node-key="id"
                                    @node-click="handleNodeClick">
                                </el-tree>
                                <el-tree :data="data6" :props="defaultProps" show-checkbox node-key="id"
                                    @node-click="handleNodeClick">
                                </el-tree>
                            </div>
                        </div>
                    </el-collapse-item>
                    <el-collapse-item name="2">
                        <template slot="title">
                            <i :class="isActive('2') !== -1 ? 'el-icon-caret-bottom' : 'el-icon-caret-right'"></i>后端
                        </template>
                        <div style="display: flex; margin-left: 20px;">
                            <div>
                                <el-tree :data="data7" :props="defaultProps" show-checkbox node-key="id"
                                    @node-click="handleNodeClick">
                                </el-tree>
                                <el-tree :data="data8" :props="defaultProps" show-checkbox node-key="id"
                                    @node-click="handleNodeClick">
                                </el-tree>
                            </div>
                            <div style="margin-left: 137px;">
                                <el-tree :data="data9" :props="defaultProps" show-checkbox node-key="id"
                                    @node-click="handleNodeClick">
                                </el-tree>
                                <el-tree :data="data10" :props="defaultProps" show-checkbox node-key="id"
                                    @node-click="handleNodeClick">
                                </el-tree>
                            </div>
                        </div>
                    </el-collapse-item>
                </el-collapse>
            </div>
        </el-form>
        <el-button>删除</el-button>
        <el-button>编辑</el-button>
    </div>
</template>
<script>
export default {
    data() {
        return {
            form: {},
            textarea: '',
            activeName: 'pc',
            activeNames: ['1','2'],
            data1: [{
                label: '智能看板-[数据查看][数据导出]',
                children: [{
                    label: '数据查看',
                }, {
                    label: '数据导出',
                }],
            }],
            data2: [{
                label: '智慧办公-[数据查看][数据导出]',
                children: [{
                    label: '数据查看',
                }, {
                    label: '数据导出',
                }],
            }],
            data3: [{
                label: '智慧安防-[数据查看][数据导出][设备交互]',
                children: [{
                    label: '数据查看',
                }, {
                    label: '数据导出',
                },
                {
                    label: '设备交互',
                }],
            }], 
            data4: [{
                label: '智享生活-[数据查看][数据导出]',
                children: [{
                    label: '数据查看',
                }, {
                    label: '数据导出',
                }],
            }],
             data5: [{
                label: '数智双碳-[数据查看][数据导出]',
                children: [{
                    label: '数据查看',
                }, {
                    label: '数据导出',
                }],
            }], 
            data6: [{
                label: '智慧场景-[数据查看][数据导出][策略配置][设备交互]',
                children: [{
                    label: '数据查看',
                }, {
                    label: '数据导出',
                },
                {
                    label: '策略配置',
                }, {
                    label: '设备交互',
                }],
            }],
            data7: [{
                label: '人员管理-[信息查看][人员添加][人员更新][人员删除]',
                children: [{
                    label: '信息查看',
                }, {
                    label: '人员添加',
                },
                {
                    label: '人员更新',
                }, {
                    label: '人员删除',
                }],
            }],
            data8: [{
                label: '角色管理-[信息查看][角色添加][角色更新][角色删除]',
                children: [{
                    label: '信息查看',
                }, {
                    label: '角色添加',
                },
                {
                    label: '角色更新',
                }, {
                    label: '角色删除',
                }],
            }],
            data9: [{
                label: '组织管理-[信息查看][人员添加][人员更新][人员删除]',
                children: [{
                    label: '信息查看',
                }, {
                    label: '人员添加',
                },
                {
                    label: '人员更新',
                }, {
                    label: '人员删除',
                }],
            }],
            data10: [{
                label: '权限管理-[信息查看][权限添加][权限更新][权限删除]',
                children: [{
                    label: '信息查看',
                }, {
                    label: '权限添加',
                },
                {
                    label: '权限更新',
                }, {
                    label: '权限删除',
                }],
            }],
            

            defaultProps: {
                children: 'children',
                label: 'label'
            }
        }
    },
    methods: {
        handleClick() {
            //
        },
        isActive(data) {
            return this.activeNames.indexOf(data);
        }
    }
}
</script>

<style lang="less" scoped>
.el-form {
    //margin: 40px 0 0 0;

    .el-form-item {
        padding-top: 10px;
        margin-inline: 20px;
        margin-bottom: 10px;
    }

    /deep/.el-form-item__label {
        padding: 0;
        text-align: left;
    }

    /deep/.el-form-item__content {
        display: flex;
        width: 600px;
    }

    /deep/.el-textarea__inner {
        height: 80px;
        width: 1174px;
        min-height: 50px !important;
        max-height: 100px;
    }
}

.permissionType {
    margin-top: 20px;
    width: 90%;
    height: 460px;
    margin-left: 5%;
    background-color: rgb(247, 245, 243);

    .el-collapse {
        /deep/.el-collapse-item__arrow {
            display: none;
        }

        /deep/.el-collapse-item__content {
            height: 150px;
            padding-bottom: 0;
        }

        /deep/.el-collapse-item__wrap {
          border-bottom: 0;
          background-color: rgb(247, 245, 243);
        }

        /deep/.el-collapse-item__header {
            padding-left: 30px;
            border-bottom: 0;
            background-color: rgb(247, 245, 243);
        }
    }

    /deep/.el-tabs__nav {
        left: 25px;
    }

    .el-tree {
        margin: 5px;
        background-color: rgb(247, 245, 243);
    }
}

.el-button {
    height: 30px;
    width: 100px;
    margin-top: 20px;
    margin-inline: 40px;
    padding: 5px;
}
</style>