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

defineProps<{
  loading: boolean
  tasks: anyObj[]
  students: anyObj[]
  teacher: anyObj
  duration: anyObj
  isTasksLoading: boolean
}>()
</script>

<template>
  <div class="today">
    <div :class="['header', { 'with-class': students.length > 0 }]">
      <div v-if="loading" class="loadincontainer">
        <Icon name="global_loading" loading :size="80"></Icon>
      </div>
      <template v-else-if="teacher">
        <div class="teacher">
          <div class="teacher-inner">
            <div class="photo">
              <img :src="teacher.pic" alt="照片" />
            </div>
            <div class="teacher-right">
              <h2>李老师</h2>
              <span v-for="(tag, index) in teacher.tags" :key="index" class="teacher-tag">{{
                tag
              }}</span>
            </div>
          </div>
        </div>
        <div class="time">
          <div class="time-inner">
            <h2>
              <LineFont text="督学时间" size="40" />
            </h2>
            <div class="time-range">
              <LineFont text="19:00-20:00" size="48" />
            </div>
            <div class="time-duration">
              <LineFont text="已督学" size="40" />
              <template v-if="duration.hours > 0">
                <LineFont
                  class="time-duration-value"
                  :text="duration.hours"
                  border-color="#FF8D3B"
                  size="48"
                />
                <LineFont text="小时" size="40" />
              </template>
              <LineFont
                class="time-duration-value"
                :text="duration.minutes"
                border-color="#FF8D3B"
                size="48"
              />
              <LineFont text="分钟" size="40" />
            </div>
          </div>
        </div>
        <div class="class">
          <h2>班级同学（共{{ students.length }}人）</h2>
          <div class="class-body">
            <div class="class-body-inner">
              <ul>
                <li v-for="student in students" :key="student.id">
                  <img :src="student.avatar" :alt="student.name" />
                  <span>{{ student.name }}</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </template>
    </div>
    <div class="schedule">
      <h2>
        <LineFont text="本次督学计划" size="48" />
      </h2>
      <div class="panel">
        <div class="circle"></div>
        <div class="panel-body">
          <div v-if="isTasksLoading" class="tasks-loadincontainer">
            <Icon name="global_loading" loading :size="80"></Icon>
          </div>
          <ScheduleTasks v-else-if="tasks.length > 0" class="tasks" :tasks="tasks" />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.loadincontainer {
  height: 32.83vh;
  width: 100%;
  display: grid;
  place-content: center;
}

.tasks-loadincontainer {
  position: absolute;
  top: 20%;
  width: 100%;
  display: grid;
  place-content: center;
}

.tasks {
  margin-top: 5.67vh;
  padding: 0 16px;
}

.schedule {
  h2 {
    text-align: center;
    line-height: 6vh;
    margin-top: 6vh;
    margin-bottom: 3.5vh;
  }
}

.panel-body {
  position: relative;
  border-radius: 3.5vh;
  background: linear-gradient(180deg, #fafafa 0%, #f4f0fa 100%);
  height: 76.42vh;
  overflow: auto;

  &:before {
    position: absolute;
    pointer-events: none;
    display: block;
    content: ' ';
    width: 269px;
    height: 24.25vh;
    background: url('../../assets/report/panel-stamp.svg') no-repeat center;
    background-size: cover;
    opacity: 0.15;
    top: 0;
  }
}

.panel {
  padding: 3.5vh 24px 2vh;
  width: 1504px;
  background: linear-gradient(269deg, #adadff 2.25%, #cab5ff 51.93%, #8f9df7 99.65%);
  box-shadow: 0 0.33vh 0.33vh rgba(0, 0, 0, 0.25);
  border-radius: 4vh;
  margin-top: 2vh;
  position: relative;

  .circle {
    position: absolute;
    width: 82px;
    height: 6.83vh;
    background: #adadff;
    right: 60px;
    border-radius: 50%;
    top: -3.42vh;
    pointer-events: none;

    &:after {
      content: '';
      position: absolute;
      width: 28px;
      height: 2.33vh;
      background: #adadff;
      border-radius: 50%;
      top: -1.17vh;
      left: 100%;
      box-shadow: 0 0.33vh 0.67vh rgba(0, 0, 0, 0.2);
    }
  }

  &:after,
  &:before {
    content: '';
    position: absolute;
    display: block;
    background: url('../../assets/panel-nail.svg');
    background-size: 100%;
    width: 44px;
    height: 6.33vh;
    top: -3vh;
    left: 423px;
    pointer-events: none;
  }

  &:after {
    left: auto;
    right: 423px;
  }
}

.time-duration {
  margin-top: 3.83vh;
}

.time-duration-value {
  margin: 0 16px;
}

.time-inner {
  position: relative;
  height: 31.5vh;
  border-radius: 1.33vh;
  background: linear-gradient(180deg, #fafafa 0%, #f4f0fa 100%);
  padding: 2vh;

  &:before {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    background: url(../../assets/learning/bg-mesh.svg) no-repeat center;
    width: 235px;
    height: 19.75vh;
    opacity: 0.65;
    pointer-events: none;
  }

  h2 {
    color: #fff;
    line-height: 5vh;
  }

  .time-range {
    margin-top: 4.67vh;

    color: #fff;
    line-height: 6vh;
  }
}

.time {
  text-align: center;
  width: 546px;
  height: 32.83vh;
  padding: 0.67vh;
  border-radius: 1.33vh;
  background: linear-gradient(180deg, rgba(241, 234, 250, 0.35) 0%, rgba(241, 241, 250, 0.35) 100%);
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}

.teacher-tag {
  position: relative;
  border-radius: 0.83vh;
  background: #92fc90;
  display: flex;
  padding: 0.33vh 24px;
  justify-content: center;
  align-items: center;
  white-space: nowrap;

  color: $font-color;
  font-size: 2.17vh;
  line-height: 3.33vh;
  margin-bottom: 0.67vh;
}

.teacher-right {
  height: 100%;
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
}

.teacher-inner {
  position: relative;
  background: linear-gradient(180deg, #fafafa 0%, #f4f0fa 100%);
  height: 31.5vh;
  width: 488px;
  border-radius: 1.33vh;
  padding: 2vh 16px 2vh 294px;

  &:before {
    position: absolute;
    content: '';
    pointer-events: none;
    background: url(../../assets/learning/bg-stamp.svg) center no-repeat;
    background-size: contain;
    right: 0;
    bottom: 0;
    width: 222.464px;
    height: 15.38vh;
    opacity: 0.25;
  }

  h2 {
    color: $font-color;
    font-family: $font-special, sans-serif;
    font-size: 3.33vh;
    line-height: 5vh;
    margin-bottom: 0.33vh;
  }
}

.teacher {
  width: 504px;
  padding: 0.67vh;
  background: linear-gradient(180deg, rgba(241, 234, 250, 0.35) 0%, rgba(241, 241, 250, 0.35) 100%);
  border-radius: 1.33vh;
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}

.photo {
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  background: linear-gradient(4deg, #b3ffd8 8.53%, #e3ffd3 84.26%);
  border: 0.33vh solid $font-color;
  border-radius: 50%;
  overflow: hidden;
  width: 246px;
  height: 20.5vh;

  img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.title-outline {
  line-height: normal;
  font-weight: normal;
}

.header {
  display: flex;
  column-gap: 24px;

  .time {
    flex-grow: 1;
  }

  .class {
    display: none;
  }

  &.with-class {
    .class {
      display: block;
    }

    .time {
      flex-basis: 546px;
      flex-grow: 0;
    }
  }
}

.class {
  flex-grow: 1;
  height: 308px + 86px;

  + .class {
    margin-top: $space-2_h;
  }

  h2 {
    padding: $space-2_h $space-4;
    border-radius: 1.67vh;
    background: linear-gradient(269deg, #c0c7f7 -35.56%, #ded3fb 25.96%, #e3e3ff 89.99%);
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));

    color: $font-color;
    font-family: $font-special, serif;
    font-size: 3vh;
    font-style: normal;
    font-weight: 400;
    line-height: 4.5vh;
  }
}

.class-body {
  border-radius: $space-2;
  padding: $space-1;

  background: linear-gradient(
    180deg,
    rgba(241, 234, 250, 0.35) 65.43%,
    rgba(241, 241, 250, 0.35) 99.5%
  );
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}

.class-body-inner {
  border-radius: 1.33vh;
  background: linear-gradient(180deg, #fafafa 0%, #f4f0fa 100%);

  color: #666;
  font-size: 2.33vh;
  font-style: normal;
  font-weight: 400;
  line-height: 3.5vh;

  &:after {
    display: block;
    content: ' ';
    background: url('../../assets/bg-stamp.svg') no-repeat center;
    background-size: cover;
    width: 162px;
    height: 11.17vh;
    position: absolute;
    right: 16px;
    bottom: 1.33vh;
    pointer-events: none;
  }

  ul {
    height: 24.33vh;
    padding: 0 24px;
    overflow: auto;

    li {
      padding: 1.33vh 0;
      color: $font-color;
      font-family: $font-special, sans-serif;
      font-size: 2.33vh;
      line-height: 3.5vh;

      display: flex;
      align-items: center;
      position: relative;

      + li:after {
        display: block;
        content: ' ';
        height: 0.17vh;
        width: 100%;
        position: absolute;
        top: 0;

        background: repeating-linear-gradient(
          to right,
          #ccc,
          #ccc 10px,
          transparent 10px,
          transparent 20px
        );
      }

      img {
        width: 56px;
        height: 4.67vh;
        border-radius: 50%;
        margin-right: 8px;
        border: 0.08vh solid $font-color;
      }
    }
  }
}

.today {
  height: calc(100vh - 128px);
  overflow: auto;
  padding-bottom: 3.33vh;
}
</style>
