<template>
  <el-main class="keep-padding bg-white flex justify-center">
    <div class="w-1200px flex flex-col">
      <el-card>
        <template #header>
          <b>社团列表</b>
        </template>
        <div v-loading="loading" element-loading-text="正在加载" class="min-h-100px">
          <club-list click @click="onClubClick" @load-complete="loading = false" />
        </div>
      </el-card>
    </div>
    <club-detail-dialog v-model="showClubDialog" :club="showingClub" />
  </el-main>
</template>
<style lang="scss" scoped>
.el-card {
  --el-card-padding: 15px;
}
</style>
<script lang="ts" setup>
import ClubDetailDialog from '@/components/club/ClubDetailDialog.vue';
import ClubList from '@/components/club/ClubList.vue';
import type { Club } from '@/schemas/response';
import { ref } from 'vue';
const loading = ref(true);
const showingClub = ref<Club>();
const showClubDialog = ref(false);
function onClubClick(club: Club) {
  showingClub.value = club;
  showClubDialog.value = true;
}
</script>
