<script setup lang="ts">
import urgeApi from '@/api/urge.ts'

import ScheduleTeacher from '@/page/urge/timetable/components/TimetableTeacher.vue'
import TimetableSchedule from '@/page/urge/timetable/components/TimetableSchedule.vue'
import TimetableCalendar from '@/page/urge/timetable/components/TimetableCalendar.vue'
import TimetableClass from '@/page/urge/timetable/components/TimetableClass.vue'
import dayjs from 'dayjs'

const periods = ref([])

const currentPeriodIndex = ref(-1)
const currentPeriod: Ref<anyObj | null> = computed(() => {
  if (currentPeriodIndex.value === -1) {
    return null
  }
  return periods.value[currentPeriodIndex.value]
})

const isTeacherLoading = ref(false)
const teacher = ref()
const students = ref([])
watch(currentPeriod, async (period: anyObj) => {
  if (period) {
    isTeacherLoading.value = true
    try {
      const {
        data: { data: res },
      } = await urgeApi.getInspectorTeacherStudentInfo(period.orderId)
      if (!res.inspectorTeacher) {
        return // 还未分配督学师
      }
      const {
        personalInformation,
        qualifications: qualificationsJson,
        name,
        gradSchool,
        personalPhoto,
        propagandaSlogan,
        degree,
      } = res.inspectorTeacher
      let qualifications = []
      try {
        qualifications = JSON.parse(qualificationsJson)
      } catch (e) {
        console.error(e)
      }
      teacher.value = {
        name,
        education: gradSchool + ' / ' + degree,
        pic: personalPhoto,
        intro: propagandaSlogan,
        tags: qualifications.map(({ name }: { name: string }) => name),
        content: [personalInformation],
      }
      students.value =
        res.studentList?.map((item: anyObj) => ({
          name: item.name,
          avatar: item.avatarUrl,
        })) ?? []
    } finally {
      isTeacherLoading.value = false
    }
  }
})
const withClass = computed(() => !isTeacherLoading.value && students.value?.length > 0)

const isLoading = ref(false)
onBeforeMount(async () => {
  isLoading.value = true
  try {
    const {
      data: { data: res },
    } = await urgeApi.getUserInspectorCourseList()
    periods.value = res.sort((a: anyObj, b: anyObj) => {
      return dayjs(a.inspectorTimeEnd).isBefore(dayjs(b.inspectorTimeEnd)) ? -1 : 1
    })
    if (periods.value.length > 0) {
      currentPeriodIndex.value = periods.value.findIndex((period: anyObj) =>
        dayjs(period.inspectorTimeEnd).isAfter(dayjs()),
      )
      if (currentPeriodIndex.value === -1) {
        currentPeriodIndex.value = periods.value.length - 1
      }
    }
  } finally {
    isLoading.value = false
  }
})

const prevPeriodVisible = computed(() => {
  return currentPeriodIndex.value > 0
})
const nextPeriodVisible = computed(() => {
  return currentPeriodIndex.value < periods.value.length - 1
})

function handlePrevPeriod() {
  currentPeriodIndex.value -= 1
}

function handleNextPeriod() {
  currentPeriodIndex.value += 1
}
</script>

<template>
  <div class="timetable-content">
    <div v-if="isLoading" class="loadincontainer">
      <Icon name="global_loading" loading :size="80"></Icon>
    </div>
    <template v-else-if="currentPeriod">
      <div class="period-navigation">
        <button v-if="prevPeriodVisible" class="prev-period" @click="handlePrevPeriod"></button>
        <span class="period-title"
          >督学周期：{{ currentPeriod.inspectorTimeStart }}至{{
            currentPeriod.inspectorTimeEnd
          }}</span
        >
        <button v-if="nextPeriodVisible" class="next-period" @click="handleNextPeriod" />
      </div>

      <div :class="{ top: true, 'with-class': withClass }">
        <ScheduleTeacher class="teacher" :loading="isTeacherLoading" :teacher="teacher" />
        <div v-if="withClass" class="class">
          <TimetableClass :students="students" />
        </div>
      </div>
      <div class="bottom">
        <TimetableCalendar :period="currentPeriod" />
        <TimetableSchedule :period="currentPeriod" />
      </div>
    </template>
  </div>
</template>

<style scoped lang="scss">
.period-navigation {
  display: flex;
  align-items: center;
  color: $font-color;
  position: fixed;
  top: 3.33vh;
  right: 384px;

  text-shadow:
    -2px -2px 0 #fff,
    2px -2px 0 #fff,
    -2px 2px 0 #fff,
    2px 2px 0 #fff,
    0px 4px 2px rgba(0, 0, 0, 0.25);
  font-family: $font-special, sans-serif;
  font-size: 2.67vh;
  line-height: 4vh;

  .period-title {
    margin: 0 16px;
  }

  button {
    background: url('../../assets/nav-prev.svg') no-repeat center;
    background-size: 100%;
    width: 48px;
    height: 4vh;

    &.next-period {
      background-image: url('../../assets/nav-next.svg');
    }
  }
}

.timetable-content {
  position: relative;
  height: calc(100vh - 136px);
  padding-right: 64px;
}

.loadincontainer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-content: center;
}

.teacher {
  height: 32.83vh;
}

.bottom {
  margin-top: 2vh;
  display: flex;
}

.top {
  &.with-class {
    display: flex;

    .teacher {
      width: 1088px;
    }
  }
}

.class {
  width: 400px;
  margin-left: 24px;
}
</style>
