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

const props = defineProps<{
  modelValue: boolean
  schedule?: anyObj | null
}>()
const emit = defineEmits<(e: 'update:modelValue', visible: boolean) => void>()

const isVisible = computed({
  get: () => props.modelValue,
  set: (value: boolean) => emit('update:modelValue', value),
})

const tasks: Ref<anyObj[]> = ref([])
const isLoading = ref(false)
watch(
  () => props.schedule,
  async () => {
    if (!props.schedule?.planId) {
      return
    }

    isLoading.value = true
    try {
      const {
        data: { data: res },
      } = await urgeApi.getInspectorPlanInfo(props.schedule.planId)
      tasks.value = res.taskList.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: finishedNum,
          completed: progress === 1 || (finishedNum > 1 && finishedNum === num),
        }
      })
    } finally {
      isLoading.value = false
    }
  },
)
</script>

<template>
  <el-dialog
    v-model="isVisible"
    class="schedule-tasks-dialog"
    :show-close="false"
    append-to-body
    destroy-on-close
    align-center
  >
    <div class="panel">
      <div class="circle"></div>
      <div class="panel-body">
        <div class="title">
          <LineFont text="课程计划" />
        </div>
        <div class="time">
          {{ schedule?.index }}. {{ schedule?.date }} 19:00-20:00 {{ schedule?.week }}
        </div>
        <div v-if="isLoading" class="loadincontainer">
          <Icon name="global_loading" loading :size="80"></Icon>
        </div>
        <ScheduleTasks v-else class="tasks" :tasks="tasks" />
      </div>
    </div>
    <Btn class="ok-button" @click.stop="isVisible = false">确定</Btn>
  </el-dialog>
</template>
<style scoped lang="scss">
.loadincontainer {
  width: 100%;
  height: 100%;
  display: grid;
  place-content: center;
}

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

.panel-body {
  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;
  }
}

.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;
  }
}
</style>
<style lang="scss">
.schedule-tasks-dialog {
  background: transparent;
  box-shadow: none;
  width: auto;
  padding: 0;

  .el-dialog__header {
    display: none;
  }

  .el-dialog__body {
    padding: 0;
  }

  .panel-body > .title {
    color: #fff;
    text-align: center;
    font-size: 4vh;
    line-height: 6vh;
  }

  .panel-body > .time {
    color: $font-color;
    text-align: center;
    font-size: 2.67vh;
    line-height: 4vh;
  }

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

  .ok-button {
    position: absolute;
    bottom: 3.33vh;
    left: 50%;
    transform: translateX(-50%);
  }

  .panel-body {
    padding: 2.67vh 0 10.67vh;
  }
}
</style>
