<template>
  <div>
    <template v-for="(item, index) in users" :key="index">
      <div class="developer">
        <div class="ranking ele-text-secondary">
          <i>{{ index + 1 }}</i>
        </div>
        <div class="avatar" @click="onSelect(item.userId)">
          <a-avatar :src="item.avatar" :size="50" />
          <span class="real-name ele-text-secondary ele-elip">
            {{ item.nickname }}
          </span>
        </div>
        <div class="app-info">
          <span class="ele-text-placeholder"> 插件个数：{{ item.apps }}</span>
          <span class="ele-text-placeholder"> 下载次数：202</span>
        </div>
      </div>
      <a-divider />
    </template>
  </div>
</template>

<script lang="ts" setup>
  import { ref, nextTick } from 'vue';
  import { message } from 'ant-design-vue';
  import type {
    DatasourceFunction,
    ColumnItem
  } from 'ele-admin-pro/es/ele-pro-table/types';
  import { toDateString } from 'ele-admin-pro';
  import Search from '../../oa/app/components/search.vue';
  import type { EleProTable } from 'ele-admin-pro';
  import { ranking } from '@/api/market';
  import type { App, AppParam } from '@/api/app/model';
  import { useRouter } from 'vue-router';
  const { push } = useRouter();
  import { openUrl } from '@/utils/common';
  import { Link } from '@/api/link/model';
  import { User } from '@/api/system/user/model';
  import useSearch from '@/utils/use-search';

  // 当前用户信息
  const props = defineProps<{
    // 机构 id
    tab?: any;
    // 当前选项卡
    activeKey?: any;
  }>();

  const emit = defineEmits<{
    (e: 'done', any): void;
  }>();

  const users = ref<User[]>([]);

  /* 搜索 */
  const reload = (where?: AppParam) => {
    ranking().then((res) => {
      users.value = res;
    });
  };

  // 表单数据
  const { where } = useSearch<AppParam>({
    appName: '',
    appCode: '',
    userId: undefined
  });

  // 按用户查询
  const onSelect = (userId) => {
    where.userId = userId;
    emit('done', where);
  };

  reload();
</script>

<script lang="ts">
  export default {
    name: 'MarketUsers'
  };
</script>

<style lang="less" scoped>
  .developer {
    display: flex;
    align-items: center;
    padding: 10px 5px;
    .ranking {
      font-weight: 700;
      font-size: large;
    }
    .avatar {
      cursor: pointer;
      width: 120px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .real-name {
        max-width: 120px;
        font-size: 13px;
      }
    }
    .app-info {
      padding-left: 10px;
      display: flex;
      flex-direction: column;
    }
  }
</style>
