<script setup lang="ts">
import ReportPanel from '@/page/urge/components/ReportPanel.vue'
import Card from '@/page/urge/components/Card.vue'
import urgeApi from '@/api/urge.ts'
import dayjs from 'dayjs'

const props = defineProps<{
  loading: boolean
  plan: anyObj
}>()

const teacher = computed(() => {
  if (!props.plan) {
    return null
  }
  const { inspectorTeacherInfo } = props.plan
  const {
    personalInformation,
    propagandaSlogan,
    gradSchool,
    degree,
    personalPhoto,
    name,
    qualifications: qualificationsJson,
  } = inspectorTeacherInfo
  let qualifications = []
  try {
    qualifications = JSON.parse(qualificationsJson)
  } catch (e) {
    console.error(e)
  }
  return {
    name,
    education: gradSchool + ' / ' + degree,
    pic: personalPhoto,
    intro: propagandaSlogan,
    tags: qualifications.map(({ name }: { name: string }) => name),
    content: [personalInformation],
  }
})

const reportTime = computed(() => {
  if (!props.plan) {
    return ''
  }
  return (
    dayjs(props.plan.courseDate).format('YYYY-MM-DD') +
    ' 19:00-20:00 星期' +
    ['日', '一', '二', '三', '四', '五', '六'][dayjs(props.plan.courseDate).day()]
  )
})

const isReportLoading = ref(false)
const reportStat = ref()
const tasks: Ref<anyObj[]> = ref([])
watch(
  () => props.plan,
  async plan => {
    if (!plan) {
      return
    }
    isReportLoading.value = true
    try {
      const {
        data: { data: res },
      } = await urgeApi.getUserInspectorCourseReportInfo(plan.inspectorCourseId)
      reportStat.value = res
      tasks.value = res.tasks.map((task: anyObj) => {
        const {
          subjectName,
          inspectorTimeEnd,
          inspectorTimeStart,
          chapterName,
          courseTimeName,
          finishedNum = 0,
          num,
          progress,
        } = JSON.parse(task.taskInfoJson)
        return {
          id: task.id,
          subject: subjectName,
          time:
            dayjs(inspectorTimeStart).format('HH:mm') +
            '-' +
            dayjs(inspectorTimeEnd).format('HH:mm'),
          title:
            task.taskType === 0 || task.taskType === 1
              ? '观看【' + chapterName + '】章节的【' + courseTimeName + '】知识点视频'
              : task.taskType === 2
                ? 'AI精准学' + num + '次'
                : task.taskType === 3
                  ? '语感练习' + num + '次'
                  : '',
          mode: ['自由学', '自由学', '精准学', '语感'][task.taskType] ?? '',
          completionRate: progress ?? 0,
          num,
          finishedNum,
          completed: progress === 1 || (finishedNum > 1 && finishedNum === num),
        }
      })
    } finally {
      isReportLoading.value = false
    }
  },
  {
    immediate: true,
  },
)
</script>

<template>
  <div class="report">
    <div v-if="loading" class="loadincontainer">
      <Icon name="global_loading" loading :size="80"></Icon>
    </div>
    <template v-else>
      <section v-if="teacher" class="teacher">
        <Card>
          <div class="card-pic">
            <img :src="teacher.pic" :alt="teacher.name" />
          </div>
          <div class="card-body">
            <div class="card-title">
              <h2>{{ teacher.name }}</h2>
              <span v-for="(tag, index) in teacher.tags" :key="index" class="card-tag">{{
                tag
              }}</span>
              <span class="card-education">{{ teacher.education }}</span>
            </div>
            <div class="card-intro">{{ teacher.intro }}</div>
            <p v-for="(content, index) in teacher.content" :key="index">
              {{ content }}
            </p>
          </div>
        </Card>
      </section>
      <section class="panel">
        <h2>
          <LineFont text="督学报告" />
        </h2>
        <h3>{{ reportTime }}</h3>
        <ReportPanel :loading="isReportLoading" :stat="reportStat" :tasks="tasks" />
      </section>
    </template>
  </div>
</template>

<style scoped lang="scss">
.loadincontainer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-content: center;
}

.report {
  position: relative;
  height: calc(100vh - 128px);
  overflow: auto;
  padding-bottom: 3.33vh;
}

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

.panel {
  h2 {
    margin-top: 6vh;
    text-align: center;

    &.fixed {
      position: fixed;
      top: 2.67vh;
      left: 50%;
      margin-left: 48px;
    }
  }

  h3 {
    text-align: center;
    color: $font-color;
    margin-top: 0.67vh;
    font-size: 2.67vh;
    line-height: 4vh;
    font-weight: normal;
  }
}

.card-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 16px;

  &:after {
    display: block;
    content: ' ';
    height: 0.17vh;
    width: 100%;
    background: repeating-linear-gradient(
      to right,
      #ccc,
      #ccc 10px,
      transparent 10px,
      transparent 20px
    );
    margin: 2vh 0;
  }

  .card-tag {
    border-radius: 0.83vh;
    background: #92fc90;
    padding: 0.33vh 24px;

    color: $font-color;
    font-size: 2.33vh;
    font-weight: 400;
    line-height: 3.5vh;
  }

  h2 {
    color: $font-color;
    font-family: $font-special, serif;
    font-size: 4vh;
    font-style: normal;
    font-weight: 400;
    line-height: 6vh;
    display: flex;
    align-items: center;

    & + .card-education {
      margin-left: $space-2;
    }
  }

  .card-education {
    color: #666;
    font-family: OPPOSans, Arial, sans-serif;
    font-size: 2.33vh;
    font-style: normal;
    font-weight: 400;
    line-height: 3.5vh;
    margin-top: 0.33vh;
  }
}

.card-pic {
  position: absolute;
  background: linear-gradient(4deg, #b3ffd8 8.53%, #e3ffd3 84.26%);
  border: 0.33vh solid $font-color;
  border-radius: 50%;
  overflow: hidden;
  width: 318px;
  height: 26.5vh;
  z-index: 1;
  top: 2vh;
  left: 24px;

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

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

  height: 31.5vh;
  padding: 2vh 32px 2.67vh 362px;
  position: relative;
  overflow: auto;

  &::after {
    content: ' ';
    display: block;
    width: 410px;
    height: 30.08vh;
    background: url('../../assets/hole-purple.svg') no-repeat right bottom;
    background-size: 50%;
    position: fixed;
    right: 0;
    bottom: 0;
    pointer-events: none;
  }

  p {
    color: #666;
    font-size: 2.33vh;
    font-style: normal;
    font-weight: 400;
    line-height: 3.5vh;
    display: flex;
    margin-top: $space-2_h;

    &::before {
      display: block;
      content: ' ';
      width: 40px;
      flex-shrink: 0;
      height: 3.33vh;
      background: url('../../assets/leaf.svg') center no-repeat;
      background-size: 100%;
      margin-right: $space-2;
    }
  }
}

.card-intro {
  margin-top: 0.33vh;
  color: $font-color;
  font-size: 2.67vh;
  font-style: normal;
  font-weight: 400;
  line-height: 4vh;
}
</style>
