<template>
  <div>
      <a-row>
          <!-- 角色列表 -->
          <a-col :span="5">
            <div class="cardTitle">所有角色</div>
            <a-collapse accordion @change="rolechange">
              <a-collapse-panel
                v-for="(item, index) in roleList"
                :key="index"
                :header="item.name"
              >
                <div
                  v-for="(rolechild, indexs) in item.childrenList"
                  class="role-card"
                  :key="indexs"
                >
                  <div>
                    {{ rolechild.name }}
                  </div>
                </div>
              </a-collapse-panel>
            </a-collapse>
          </a-col>
          <!-- 人员表格 -->
          <a-col :span="19" class="tree-box">
            <div v-for="menu,index in menus" :key="index" class='tree'>
              <span>{{menu.name}}</span>
              <a-tree
                :title="menu.name"
                v-model="checkedKeys"
                checkable
                :replace-fields="replaceFields"
                :expanded-keys="expandedKeys"
                :auto-expand-parent="autoExpandParent"
                :selected-keys="selectedKeys"
                :tree-data="menu.childrenList"
                @expand="onExpand"
                @select="onSelect"
                @check="onCheck"
              />
            </div>
          </a-col>
        </a-row>
  </div>
</template>

<script>
import {columns,pagination,searchForm} from './config.js'
import { rolelist,FindAllMenus } from "@/api/basic/role";
export default {
  data() {
    return {
      tableChoosed: [],
      roleList: [],
      // 分页
      pagination: pagination,
      //   列
      columns: columns,
      searchForm:searchForm,
      expandedKeys: [],
      replaceFields: {
        children: 'childrenList',
        title: 'name',
        key: 'id',
      },
      autoExpandParent: true,
      checkedKeys: [],
      selectedKeys: [],
      //   数据
      tableData: [],
      ActionsList: [ ],
      menus:[]
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      rolelist().then((res) => {
        this.roleList = res.data;
      });
    },
    rolechange(data){
      if(data){
        this.searchForm.roleId =  this.roleList[data].id
        FindAllMenus({roleId:this.searchForm.roleId}).then(res=>{
          this.menus  = res.data
        })

      }else{
        this.searchForm.roleId = null
      }
    },
     onExpand(expandedKeys) {
      console.log('onExpand', expandedKeys);
      // if not set autoExpandParent to false, if children expanded, parent can not collapse.
      // or, you can remove all expanded children keys.
      this.expandedKeys = expandedKeys;
      this.autoExpandParent = false;
    },
    onCheck(checkedKeys) {
      console.log('onCheck', checkedKeys);
      this.checkedKeys = checkedKeys;
    },
    onSelect(selectedKeys, info) {
      console.log('onSelect', info);
      this.selectedKeys = selectedKeys;
    },
    reset(){
      this.searchForm.keyword =''
    },
    handleTableChange(pagination) {
      console.log(pagination);
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      pager.pageSize = pagination.pageSize;
      this.pagination = pager;
    },
    del(data) {
      this.$confirm({
        title: "是否删除",
        // okText:'删除',
        // cancelText:'取消',
        icon: "",
        onOk: function () {
          console.log(data);
        },
      });
    },
    Actions(data) {
      console.log(data);
    },
    selectionChoosed(data) {
      console.log(data);
      this.tableChoosed = data;
    },
  },
  // watch:{
  //   checkedKeys(val) {
  //     console.log('onCheck', val);
  //   },
  // }
};
</script>

<style lang="less" scoped>
.role-card {
  line-height: 30px;
  font-size: 16px;
  cursor: pointer;
  border-bottom: 1px solid #d9d9d9;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}
.tree-box{
  padding-left: 50px;
  display: flex;
  .tree{
  width:15%;
  
}

}
</style>