<script setup lang="ts">
import TimetableScheduleDialog from '@/page/urge/timetable/components/TimetableScheduleDialog.vue'
import dayjs from 'dayjs'

const props = defineProps<{
  period: anyObj
}>()

const currentSchedule: Ref<anyObj | null> = ref(null)
const scheduleDialogVisible = ref(false)

const schedules = computed(() =>
  props.period.inspectorCourseList.map((course: anyObj, index: number) => {
    const date = dayjs(course.courseDate)
    const now = dayjs()
    return {
      date: date.format('YYYY-MM-DD'),
      time: '19:00-20:00',
      week: '星期' + ['日', '一', '二', '三', '四', '五', '六'][date.day()],
      schedule: !!course.inspectorPlanId,
      id: course.id,
      planId: course.inspectorPlanId,
      index: String(index + 1).padStart(2, '0'),
      status: date.isSame(now, 'day') ? 'today' : date.isBefore(now) ? 'closed' : 'pending',
      closed: date.isBefore(now),
    }
  }),
)

const remainingSchedulesCount = computed(() => {
  return schedules.value.filter((item: anyObj) => !item.closed).length
})

function showSchedule(schedule: anyObj) {
  currentSchedule.value = schedule
  scheduleDialogVisible.value = true
}
</script>

<template>
  <TimetableScheduleDialog
    v-model="scheduleDialogVisible"
    class="schedule-tasks"
    :schedule="currentSchedule"
  />
  <div class="schedule">
    <div class="schedule-header">
      课表<small>剩余课时：{{ remainingSchedulesCount }}节</small>
    </div>
    <div class="schedule-body">
      <ul v-if="schedules.length > 0">
        <li v-for="item in schedules" :key="item.index" :class="item.status">
          <div>
            <img
              v-if="item.schedule"
              class="tasks-button"
              alt="课表"
              src="../../assets/timetable/icon-table.svg"
              @click="showSchedule(item)"
            />
            {{ item.index }}
          </div>
          <div>{{ item.date }}</div>
          <div>{{ item.time }}</div>
          <div>{{ item.week }}</div>
        </li>
      </ul>
      <div v-else class="empty-tip">
        <img src="../../assets/empty-tip.svg" alt="empty" />
        <p>请选择开课时间</p>
        <p>自动生成课表</p>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.tasks-button {
  position: absolute;
  right: -16px;
  top: -0.17vh;
  height: 2.83vh;
}

.schedule {
  width: 760px;
  background: linear-gradient(180deg, #fafafa 0%, #f4f0fa 100%), #fff;
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
  border-radius: 1.33vh;
  margin-left: 24px;
  overflow: hidden;
}

.schedule-body {
  position: relative;
  padding: 1.33vh 16px 0;
  height: 43.83vh;
  overflow: auto;

  li {
    border-radius: 1.33vh;
    background: linear-gradient(90deg, #c3b4ff 0%, #fff 100%);
    height: 4.83vh;
    display: flex;
    align-items: center;
    text-align: center;

    &:nth-child(2n) {
      background: linear-gradient(90deg, rgba(196, 181, 255, 0.25) 0%, #fff 100%);
    }

    &.closed {
      background: linear-gradient(90deg, #fff78c 0%, #fff 100%);
    }

    &.today {
      background: linear-gradient(90deg, #92fc90 0%, #fff 100%);
    }

    + li {
      margin-top: 0.67vh;
    }

    div:first-child {
      position: relative;
      width: 10%;
    }

    div:nth-child(2) {
      width: 30%;
    }

    div:nth-child(3) {
      width: 30%;
    }

    div:last-child {
      width: 30%;
    }
  }
}

.schedule-header {
  color: $font-color;
  height: 6.67vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: $font-special, sans-serif;
  font-size: 3.33vh;
  line-height: 5vh;
  text-align: center;
  background:
    url('../../assets/bg-mesh.svg') left bottom,
    linear-gradient(269deg, #adadff 2.25%, #cab5ff 51.93%, #8f9df7 99.65%);
  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);
  position: relative;
  z-index: 1;

  small {
    font-size: 2.67vh;

    &:before {
      content: '(';
    }

    &:after {
      content: ')';
    }
  }
}
</style>
