<template>
  <div>
    <a-collapse accordion :expand-icon-position="expandIconPosition" icon="setting">
      <a-collapse-panel v-for="role in roles" :key="role.roleId" :header="role.name">
        <a-icon slot="extra" type="setting" />
        <menu-tree v-model="role.roleId" :treeData="treeData" :key="role.roleId"></menu-tree>
      </a-collapse-panel>
    </a-collapse>
  </div>
</template>

<script>
import MenuTree from '@/views/system/role/menuTree'

export default {
  name: 'RoleRight',
  components: {
    MenuTree
  },
  data() {
    return {
      roles: [],
      expandIconPosition: 'left',
      //activeKey: [],
      treeData: []
    }
  },
  created() {
    this.getRoleList()
    this.getMenuData()
  },
  methods: {
    getRoleList() {
      this.$api.systemManage.getRoleList().then(({ data = {} }) => {
        if (data) {
          this.roles = data
        }
      }).catch(() => {})
    },
    getMenuData() {
      this.$api.systemManage.getAllMenuTree().then(({ data = {} }) => {
        if (data) {
          this.treeData = data
        }
      }).catch(() => {})
    },
  }
};
</script>