<template>
  <div style="height:calc(100vh - 50px);overflow:auto;">
    <Dec :content="content" />

    <div class="app-container">
      <div class="btn-grooup">
        <el-button type="primary">新建角色</el-button>
        <el-button type="primary" @click="copyRole">复制权限新建角色</el-button>
      </div>
      <el-row style="height:calc(100% - 55px)">
        <el-col :span="6" style="height:100%">
          <ListBox
            ref="listbox"
            title="角色列表"
            title-bg="#ccc"
            :data="listData"
            active-color="rgb(64, 158, 255)"
            :acitve-index="1"
            @clicklist="clicklist"
            @removelist="removelist"
            @submitname="submitname"
          />
        </el-col>
        <el-col :span="18" style="padding:0 15px;height:100%">
          <p style="line-height:50px;margin:0;">角色名称：<el-tag>{{ listData[clickindex].name }}</el-tag></p>
          <el-tabs type="border-card">
            <el-tab-pane label="页面权限">
              <el-tree
                :data="treedata"
                show-checkbox
                node-key="id"
                :default-expanded-keys="[2]"
                :default-checked-keys="[5]"
                :default-expand-all="true"
                :props="defaultProps"
              />
            </el-tab-pane>
          </el-tabs>

        </el-col>
      </el-row>

    </div>
  </div>
</template>

<script>
import Dec from '@/components/Dec'
import ListBox from '@/components/ListBox'
export default {
  name: 'Role',
  components: {
    Dec,
    ListBox
  },
  data() {
    return {
      content: '角色用来控制不同的用户可以受用哪些功能权限',
      clickindex: 0,
      listData: [
        { id: 1, name: '班主任' },
        { id: 2, name: '任课老师' }
      ],
      treedata: [{
        id: 1,
        label: '账号管理',
        children: [{
          id: 4,
          label: '角色管理'
        }, {
          id: 5,
          label: '账号管理'
        }]
      }, {
        id: 2,
        label: '一级 2'
      }, {
        id: 3,
        label: '一级 3',
        children: [{
          id: 7,
          label: '二级 3-1'
        }, {
          id: 8,
          label: '二级 3-2'
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },

  methods: {
    removelist(index) {
      this.listData.splice(index, 1)
    },
    clicklist(index) {
      this.clickindex = index
    },
    copyRole() {
      if (this.clickindex < this.listData.length) {
        const name = this.listData[this.clickindex].name
        this.$refs.listbox.addList(name + '-copy')
      } else {
        this.$message.error('请选择复制对象')
      }
    },
    submitname(index) {
      this.listData[index].edit = false
    }

  }
}
</script>
<style scoped>
  .app-container{
    max-width: 1100px;
    height: calc(100% - 65px);
    background: #fff;
    margin:0 auto;
    margin-top:15px;
  }
  .btn-grooup{
    padding-bottom: 15px;
  }
</style>

