<template>
  <div class="main">
    <div v-if="loading" style="text-align: center; padding: 1rem 0; color: #999;">加载中...</div>
    <div v-else>
      <van-list :finished="true">
        <div v-for="item in list" :key="item.teacher_id" style="padding: 0.2rem 0.3rem; border-bottom: 1px solid #f0f0f0;">
          <div style="display: flex; justify-content: space-between; align-items: center;">
            <span style="font-weight: bold; font-size: 0.28rem;">{{ item.teacher_id }}</span>
          </div>
          <div style="font-size: 0.24rem; color: #666; margin-top: 0.1rem; display: flex; gap: 0.3rem; flex-wrap: wrap;">
            <span>排课数：{{ item.clazz_count }}</span>
            <span>学生数：{{ item.student_count }}</span>
            <span>总时长：{{ item.total_hours }}h</span>
          </div>
        </div>
        <div v-if="list.length === 0" style="text-align: center; color: #999; padding: 1rem 0;">暂无数据</div>
      </van-list>
    </div>
  </div>
</template>

<script lang="ts">
import {ref, defineComponent, onMounted} from 'vue';
import {List, showFailToast} from 'vant';
import request from "~/utils/request";

export default defineComponent({
  name: "supervisor-stats",
  components: {
    [List.name]: List,
  },
  setup() {
    const list = ref<any[]>([]);
    const loading = ref(true);

    onMounted(async () => {
      const { r, d, e } = await request({
        url: "/api/v1/clazz/stats/org-teachers",
        method: "GET",
      });
      if (r) {
        list.value = d as any[];
      } else {
        showFailToast(e);
      }
      loading.value = false;
    });

    return { list, loading };
  },
});
</script>
