<!-- 小组成员 -->
<template>
  <a-card :title="title" :bordered="false" :body-style="{ padding: '2px 0px' }">
    <template #extra>
      <more-icon @remove="onRemove" @edit="onEdit" />
    </template>
    <div
      v-for="(item, index) in userList"
      :key="index"
      class="ele-cell user-list-item"
    >
      <div style="flex-shrink: 0">
        <a-avatar :size="46" :src="item.avatar" />
      </div>
      <div class="ele-cell-content">
        <span class="ele-cell-title ele-elip">{{ item.nickname }}</span>
        <div class="ele-cell-desc ele-elip">{{ item.phone }}</div>
      </div>
      <div style="flex-shrink: 0">
        <a-tag :color="['green', 'red'][item.status]">
          {{ ['在线', '离线'][item.status] }}
        </a-tag>
      </div>
    </div>
  </a-card>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import MoreIcon from './more-icon.vue';
  import { pageUsers } from '@/api/system/user';
  import type { User } from '@/api/system/user/model';

  defineProps<{
    title?: string;
  }>();

  const emit = defineEmits<{
    (e: 'remove'): void;
    (e: 'edit'): void;
  }>();

  // 小组成员数据
  const userList = ref<User[]>([]);

  /* 查询小组成员 */
  const queryUserList = () => {
    pageUsers({ parentId: 11, limit: 5 }).then((data: any) => {
      userList.value = data.list;
    });
  };

  const onRemove = () => {
    emit('remove');
  };

  const onEdit = () => {
    emit('edit');
  };

  queryUserList();
</script>

<style lang="less" scoped>
  .user-list-item {
    padding: 12px 18px;

    & + .user-list-item {
      border-top: 1px solid hsla(0, 0%, 60%, 0.15);
    }

    .ele-cell-content {
      overflow: hidden;
    }

    .ele-cell-desc {
      margin-top: 0;
    }

    .ant-tag {
      margin: 0;
    }
  }
</style>
