<template>
  <isp-data-load :loading="listLoading" :empty="!reportList || reportList.length === 0">
    <isp-load-more :data="queryResult" @reload="loadMore">
      <wd-collapse v-model="collapseValue" accordion>
        <wd-collapse-item
          v-for="report in reportList"
          :key="report.id"
          :name="report.id + ''"
          custom-class="report-item"
          :before-expend="getReportDetail"
        >
          <template #title="{ expanded }">
            <view class="title-view">
              <text>{{ dayjs(report.courseDate).format('MM月DD日') }}&nbsp;</text>
              <text>{{ getWeekDay(report.courseDate) }}&nbsp;</text>
              <text>
                {{ dayjs(report.courseStartDate).format('HH:mm') }}-
                {{ dayjs(report.courseEndDate).format('HH:mm') }}
              </text>
            </view>
            <view>
              <wd-icon v-if="!expanded" name="arrow-down" size="24rpx"></wd-icon>
              <wd-icon v-else name="arrow-up" size="24rpx"></wd-icon>
            </view>
          </template>
          <view style="background-color: #fafcff">
            <isp-data-load
              :loading="loading"
              empty-text="学员未参与督学，暂无数据"
              :empty="!reportDetail.id"
            >
              <qy-student-report :report="reportDetail" />
            </isp-data-load>
          </view>
        </wd-collapse-item>
      </wd-collapse>
    </isp-load-more>
  </isp-data-load>
</template>

<script setup lang="ts">
import { inject, type Ref, ref, watch, watchEffect } from 'vue';
import dayjs from 'dayjs';
import {
  getUserInspectorCourseReportInfo,
  getUserReportPage,
} from '@/api/inspector/student-detail';
import IspDataLoad from '@/components/inspector/isp-data-load.vue';
import IspLoadMore from '@/components/inspector/isp-load-more.vue';

const collapseValue = ref();
const studentInfo = inject<Ref<any>>('studentInfo');

const queryResult = ref({});
const reportList = ref([]);
const reportDetail = ref<any>({});
const listLoading = ref(false);
const loading = ref(false);
const page = ref({
  current: 1,
  total: 0,
});
const loadMore = () => {
  if (Number(page.value.total) > reportList.value.length) {
    page.value.current++;
    initData();
  }
};
// 获取日期星期几，以 周一 这样的格式返回
const getWeekDay = (date: string) => {
  const weekDay = new Date(date).getDay();
  const weekDayMap = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
  return weekDayMap[weekDay];
};
const initData = async () => {
  listLoading.value = true;
  try {
    const { data } = await getUserReportPage({
      userId: studentInfo.value.userId,
      current: page.value.current,
    });
    page.value.total = data.total;
    queryResult.value = data;
    reportList.value.push(...(data?.records ?? []));
  } finally {
    listLoading.value = false;
  }
};

const getReportDetail = async (_name: string) => {
  const item = reportList.value.find(item => {
    return String(item.id) === _name;
  });
  if (reportDetail.value && reportDetail.value.id === item.id) {
    return;
  }
  loading.value = true;
  return new Promise((resolve, reject) => {
    getUserInspectorCourseReportInfo({
      inspectorCourseId: item.inspectorCourseId,
    })
      .then(({ data }) => {
        reportDetail.value = data;
        resolve(true);
      })
      .finally(() => {
        loading.value = false;
      });
  });
};

watchEffect(() => {
  if (studentInfo.value.userId) {
    initData();
  }
});

// watch(
//   () => studentInfo.value,
//   () => {
//     if (studentInfo.value.userId) {
//       initData();
//     }
//   },
// );
</script>

<style scoped lang="scss">
.title-view {
  color: #a9aab5;
  font-size: 26rpx;

  & > text:first-child {
    color: #0a1f13;
    font-size: 30rpx;
  }
}

.report-item {
  :deep(.wd-collapse-item__body) {
    padding: 30rpx 0;
  }

  :deep(.wd-collapse-item__wrapper) {
    //height: 100% !important;
  }
}
</style>
