<template>
  <div class="member-item">
    <div class="member-item-pic">
      <img :src="data.avatar | avatar" />
    </div>
    <slot name="member-before" :user="data"></slot>
    <div class="member-item-content">
      <h4>{{ data.nickname || data.personal_name }}</h4>
      <p>{{ data.class_name }}</p>
    </div>
    <slot name="member-after" :user="data"></slot>
  </div>
</template>

<script>
export default {
  name: 'MemberItem',
  props: { data: Object }
}
</script>

<style lang="scss" scoped>
.member-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.member-item-pic {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #ccc;
  overflow: hidden;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.member-item-content {
  flex: 1;
  margin-left: 10px;
  h4 {
    font-size: 14px;
    font-weight: 400;
    color: #222;
  }
  p {
    font-size: 14px;
    color: #999;
  }
}
</style>
