<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;">共 {{ lessons.length }} 节课，出勤 {{ state.attended }} 节，出勤率 {{ state.attendance_rate }}</span>
    </div>

    <van-list v-model:loading="state.loading" :finished="true">
      <div v-for="item in lessons" :key="item.clazz_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.clazz_name }}</span>
          <van-tag :type="attendanceTagType(item.attendance_status)" size="small">{{ attendanceLabel(item.attendance_status) }}</van-tag>
        </div>
        <div style="font-size: 0.24rem; color: #999; margin-top: 0.1rem;">
          <div>{{ item.start_from }} ~ {{ item.end_by }}</div>
          <div v-if="item.teacher_names">老师：{{ item.teacher_names }}</div>
          <div v-if="item.leave_status">请假：{{ item.leave_status }}</div>
        </div>
      </div>
      <div v-if="lessons.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: "student-lessons",
  components: {
    [Field.name]: Field,
    [Form.name]: Form,
    [Button.name]: Button,
    [Tag.name]: Tag,
    [List.name]: List,
  },
  setup() {
    const {queryStudentLessons} = useClazz();
    const state = reactive({
      start_date: "",
      end_date: "",
      loading: false,
      attended: 0,
      attendance_rate: "0%",
      summary: false,
    });
    const lessons = 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 queryStudentLessons(state.start_date + " 00:00:00", state.end_date + " 23:59:59");
      if (data) {
        lessons.value = data;
        const attended = data.filter((x: any) => x.attendance_status === 'NORMAL').length;
        state.attended = attended;
        state.attendance_rate = data.length > 0 ? Math.round(attended / data.length * 100) + '%' : '0%';
        state.summary = true;
      }
      state.loading = false;
    };

    const attendanceTagType = (status: string) => {
      if (status === 'NORMAL') return 'success';
      if (status === 'ABSENT') return 'danger';
      return 'default';
    };

    const attendanceLabel = (status: string) => {
      if (status === 'NORMAL') return '已到';
      if (status === 'ABSENT') return '缺勤';
      return '未点名';
    };

    return {
      state, lessons, search, showStartPicker, showEndPicker, attendanceTagType, attendanceLabel,
    };
  },
});
</script>
