<template>
  <CommonTopBanner title="志愿者排名">
    <VillageUserRankList 
      :list="villageUserRankListFirst3" 
      @goDetails="goDetails" 
    />
    <FlexCol gap="gap.lg" padding="space.md">
      <Touchable
        v-for="(item, index) in villageUserRankListAfter3"
        :key="item.id"
        direction="column"
        @click="goDetails(item)"
      >
        <BackgroundBox
          backgroundImage="https://xy.wenlvti.net/app_static/images/village/BoxDark.png"
          :backgroundCutBorder="[6,6,6,6]"
          :backgroundCutBorderSize="[10,10,10,10]"
          :padding="[25,25]"
          direction="row"
          justify="space-between"
          align="center"
          gap="gap.md"
          
        >
          <FlexRow align="center" gap="gap.lg">
            <BackgroundBox
              backgroundImage="https://xy.wenlvti.net/app_static/images/village/BoxOrder.png"
              width="120rpx"
              height="90rpx"
              center
            >
              <Text :text="index + 4" fontConfig="h5" color="white" />
            </BackgroundBox>
            <Avatar 
              :url="item.image" 
              defaultAvatar="https://xy.wenlvti.net/app_static/images/village/PlaceholderVolunteer.png"
              :size="70" 
              mode="aspectFill" 
              radius="radius.md" 
            />
            <Text :text="item.title" fontConfig="contentText" />
          </FlexRow>
          <FlexRow center gap="gap.md">
            <Tag v-if="item.isAdmin" text="管理员" size="small" />
            <BackgroundBox
              backgroundImage="https://xy.wenlvti.net/app_static/images/village/TagNormal.png"
              :backgroundCutBorder="[10,10,10,10]"
              :backgroundCutBorderSize="[10,10,10,10]"
              :padding="[15,10]"
              center
              direction="row"
              gap="gap.md"
              width="100"
            >
              <Image src="https://xy.wenlvti.net/app_static/images/village/IconFruit.png" width="30rpx" height="30rpx" mode="aspectFill" />
              <Text :text="item.score" fontConfig="contentText" />
            </BackgroundBox>
          </FlexRow>
        </BackgroundBox>
      </Touchable>
    </FlexCol>
  </CommonTopBanner>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useSimpleDataLoader } from '@/components/composeabe/loader/SimpleDataLoader';
import { useLoadQuerys } from '@/components/composeabe/LoadQuerys';
import { ArrayUtils } from '@imengyu/imengyu-utils';
import { navTo } from '@/components/utils/PageAction';
import FlexCol from '@/components/layout/FlexCol.vue';
import VillageUserRankList from '../../components/VillageUserRankList.vue';
import LightVillageApi from '@/api/light/LightVillageApi';
import BackgroundBox from '@/components/display/block/BackgroundBox.vue';
import Text from '@/components/basic/Text.vue';
import Avatar from '@/components/display/Avatar.vue';
import Tag from '@/components/display/Tag.vue';
import Image from '@/components/basic/Image.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import StatusBarSpace from '@/components/layout/space/StatusBarSpace.vue';
import NavBar from '@/components/nav/NavBar.vue';
import Touchable from '@/components/feedback/Touchable.vue';
import CommonTopBanner from '@/common/components/CommonTopBanner.vue';

const { querys } = useLoadQuerys({
  regionId: 0,
  villageId: 0,
}, () => {
  villageUserRankListLoader.reload();
});

const villageUserRankListLoader = useSimpleDataLoader(async () => {
  const res = (await LightVillageApi.getVolunteerRankList({ 
    region_id: querys.value.regionId || undefined, 
    village_id: querys.value.villageId || undefined,
    num: 30,
  }))
    .map((item, i) => ({
      id: item.id,
      image: item.image ?? '',
      title: item.name,
      rank: i + 1,
      score: item.points,
      isAdmin: item.type === 'admin',
    }));

  if (res.length >= 3) {
    //移动第一名到中间
    const first = res[0];
    ArrayUtils.removeAt(res, 0);
    ArrayUtils.insert(res, 1, first);
  }
  return res
});
const villageUserRankListFirst3 = computed(() => {
  return villageUserRankListLoader.content.value?.slice(0, 3) ?? [];
});
const villageUserRankListAfter3 = computed(() => {
  return villageUserRankListLoader.content.value?.slice(3) ?? [];
});

function goDetails(item: {
  id: number;
  image: string;
  title: string;
  rank: number;
  score: number;
}) {
  console.log(item);
  
  navTo('../volunteer/detail', { id: item.id });
}

</script>