<template>
  <Touchable
    direction="column"
    @click="$emit('click')"
  >
    <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="rank" fontConfig="h5" color="white" />
        </BackgroundBox>
        <Avatar 
          :url="image" 
          defaultAvatar="https://xy.wenlvti.net/app_static/images/village/PlaceholderVolunteer.png"
          :size="70" 
          mode="aspectFill" 
          radius="radius.md" 
        />
        <Text :text="title" fontConfig="contentText" />
      </FlexRow>
      <FlexRow center gap="gap.md">
        <Tag v-if="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="score" fontConfig="contentText" />
        </BackgroundBox>
      </FlexRow>
    </BackgroundBox>
  </Touchable>
</template>

<script setup lang="ts">  
import Touchable from '@/components/feedback/Touchable.vue';
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';

const props = defineProps<{
  id: number;
  image: string;
  rank: number;
  title: string;
  score: number;
  isAdmin: boolean;
}>();

const emit = defineEmits<{
  (e: 'click'): void;
}>();
</script>