<template>
  <div
    class="flex"
    :class="{
      'cursor-pointer': click,
      'flex-col items-center': mode === 'v',
      'gap-10px': mode === 'h',
    }"
    :key="club.id"
    @click="click && $emit('click', club)"
  >
    <club-avatar :size="100" :avatar="club.avatar" />
    <div class="flex flex-col" :class="[{ 'items-center': mode === 'v' }, textOuterClass]">
      <div class="text-black font-bold" :class="mode === 'v' ? 'text-5' : 'text-7'">
        {{ club.name }}
      </div>
      <div>
        <el-text
          v-if="userStore.userInfo?.club?.id === club.id"
          class="flex items-center gap-5px"
          :size="mode === 'h' ? 'large' : 'default'"
          type="success"
        >
          <icon-ep-success-filled />
          <b>已加入</b>
        </el-text>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import type { Club } from '@/schemas/response';
import { useUserStore } from '@/stores/user';
import ClubAvatar from './ClubAvatar.vue';
const userStore = useUserStore();
const { click = false, mode = 'v' } = defineProps<{
  club: Club;
  click?: boolean;
  mode?: 'h' | 'v';
  textOuterClass?: string;
}>();
defineEmits<{ click: [club: Club] }>();
</script>
