<template>
  <a-card :bordered="false" title="小组成员">
    <template #extra>
      <a-tooltip>
        <template #title>邀请加入</template>
        <UserAddOutlined @click="onShowQrcode" :style="{ fontSize: '18px' }" />
      </a-tooltip>
    </template>
    <a-list
      class="demo-loadmore-list"
      item-layout="horizontal"
      :data-source="list"
    >
      <template #renderItem="{ item }">
        <a-list-item>
          <template #actions>
            <a-popover>
              <template #content> 待处理 </template>
              <a class="ele-text-danger">{{ item.pending }}</a>
            </a-popover>
            <a-popover>
              <template #content> 本月已处理 </template>
              <a class="ele-text-secondary">{{ item.month }}</a>
            </a-popover>
          </template>
          <a-skeleton avatar :title="false" :loading="!!item.loading" active>
            <a-list-item-meta>
              <template #title>
                {{ item.nickname }}
              </template>
              <template #avatar>
                <a-avatar :src="item.avatar" />
              </template>
            </a-list-item-meta>
          </a-skeleton>
        </a-list-item>
      </template>
    </a-list>
    <!-- 工单二维码 -->
    <Qrcode v-model:visible="showQrcode" />
  </a-card>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { pageTaskCount } from '@/api/oa/task-count';
  import { TaskCount } from '@/api/oa/task-count/model';
  import { UserAddOutlined } from '@ant-design/icons-vue';
  import Qrcode from './qrcode.vue';

  const showQrcode = ref(false);
  const list = ref<TaskCount[]>([]);

  pageTaskCount({ limit: 10, roleCode: 'commander' }).then((res) => {
    if (res) {
      list.value = res?.list;
    }
  });

  const onShowQrcode = () => {
    showQrcode.value = true;
  };
</script>

<style lang="less" scoped>
  .monitor-evaluate-text {
    width: 90px;
    flex-shrink: 0;
    white-space: nowrap;
    opacity: 0.8;

    & > .anticon {
      font-size: 12px;
      margin: 0 6px 0 8px;
    }
  }
  /deep/.ant-list-item {
    padding: 7px 0;
  }
</style>
