<template>
  <!--  <div class="friend-list-container" :class="{'default': !hasFriend}">-->
  <div class="list-container">

    <el-collapse v-model="activeNames" class="friend-list-container">
      <el-collapse-item title="用户组" name="user">
        <friend-item v-for="friend in friendList" :key="friend.userID" :friend="friend"/>
      </el-collapse-item>
      <el-collapse-item title="策划组" name="scheme">

      </el-collapse-item>
      <el-collapse-item title="管理组" name="admin">

      </el-collapse-item>
    </el-collapse>
  </div>
  <!--    <div v-if="hasFriend">-->
  <!--      <friend-item v-for="friend in friendList" :key="friend.userID" :friend="friend"/>-->
  <!--    </div>-->
  <!--    <div style="color:gray;" v-else>暂无数据</div>-->
  <!--  </div>-->
</template>

<script>
import {mapState} from 'vuex'
import FriendItem from './friend-item.vue'


export default {
  components: {
    FriendItem,
  },
  computed: {
    ...mapState({
      friendList: state => state.friend.friendList
    }),
    hasFriend() {
      return this.friendList.length > 0
    }
  },
  data() {
    return {
      activeNames: [],
    }
  }
}
</script>

<style lang="stylus" scpoed>
.list-container
  height 100%
  width 100%
  display flex
  flex-direction column

  .friend-list-container
    margin 1px
    border-top:unset
    border-bottom unset


.default {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  overflow-y: scroll;
}
</style>