<template>
  <div class="main">
    <van-form @submit="search">
      <van-field v-model="state.start_date" label="开始日期" readonly clickable :right-icon="'calendar-o'"
                 @click="showStartPicker = true" />
      <van-field v-model="state.end_date" label="结束日期" readonly clickable :right-icon="'calendar-o'"
                 @click="showEndPicker = true" />
      <van-button block type="primary" native-type="submit" style="margin: 0.3rem;">查询</van-button>
    </van-form>

    <div v-if="state.summary" style="padding: 0.2rem 0.3rem; background: #f5f7fa; margin: 0.2rem 0; border-radius: 0.1rem;">
      <span style="font-size: 0.28rem; color: #666;">共 {{ stats.length }} 名学生</span>
    </div>

    <van-list v-model:loading="state.loading" :finished="true">
      <div v-for="item in stats" :key="item.student_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.student_name || item.student_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.total_classes }}</span>
          <span style="color: #07c160;">已到：{{ item.attended }}</span>
          <span style="color: #ee0a24;">缺勤：{{ item.absent }}</span>
          <span>总时长：{{ item.total_hours }}h</span>
          <span v-if="item.leave_count > 0">请假：{{ item.leave_count }}</span>
        </div>
      </div>
      <div v-if="stats.length === 0 && !state.loading" style="text-align: center; color: #999; padding: 1rem 0;">暂无数据</div>
    </van-list>
  </div>
</template>

<script lang="ts">
import {reactive, ref, defineComponent} from 'vue';
import {Field, Form, Button, Tag, List, showFailToast} from 'vant';
import useClazz from "~/store/clazz";

export default defineComponent({
  name: "teacher-stats",
  components: {
    [Field.name]: Field,
    [Form.name]: Form,
    [Button.name]: Button,
    [Tag.name]: Tag,
    [List.name]: List,
  },
  setup() {
    const {queryTeacherDetailStats} = useClazz();
    const state = reactive({
      start_date: "",
      end_date: "",
      loading: false,
      summary: false,
    });
    const stats = ref<any[]>([]);

    const showStartPicker = ref(false);
    const showEndPicker = ref(false);

    const setDefaultDates = () => {
      const now = new Date();
      state.end_date = now.toISOString().split('T')[0];
      const start = new Date(now.getFullYear(), now.getMonth(), 1);
      state.start_date = start.toISOString().split('T')[0];
    };
    setDefaultDates();

    const search = async () => {
      if (!state.start_date || !state.end_date) {
        showFailToast("请选择日期范围");
        return;
      }
      state.loading = true;
      const data = await queryTeacherDetailStats(state.start_date + " 00:00:00", state.end_date + " 23:59:59");
      if (data) {
        stats.value = data;
        state.summary = true;
      }
      state.loading = false;
    };

    return {
      state, stats, search, showStartPicker, showEndPicker,
    };
  },
});
</script>
