<template>
  <div class="page-container">
    <el-row class="counter-wrap">
      <el-col :span="4" class="left-counter-wrap">
        <left-group ref="LeftGroup" :is-permitted="userData.roleId === 6" @nodeClick="groupSelChange" @treeInit="groupSelChange" />
      </el-col>
      <el-col :span="20" class="right-counter-wrap">
        <member-list ref="MemberList" :is-permitted="userData.roleId === 6" @edit="edit" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import LeftGroup from './group/LeftGroup.vue'
import MemberList from './member/MemberList.vue'
import { mapGetters } from 'vuex'
export default {
  name: 'LeadingGroupIndex',
  components: {
    LeftGroup,
    MemberList
  },
  computed: {
    ...mapGetters([
      'userData'
    ])
  },
  methods: {
    groupSelChange(data) {
      this.$refs['MemberList'].loadData(data)
    },
    edit(data) {
      this.$refs['LeftGroup'].handleUpdate(data)
    }
  }
}
</script>
<style lang="scss">
</style>
<style lang="scss" scoped>
</style>
