<script lang="ts" setup>
import BussApi from '@/api/BussApi';
import { useDayjs } from '@/composables/useDayjs';
import type { Lesson } from '@/types/api/lesson';
import { calcLessonProgress, extractLessonStage, getLessonSteps } from '@/utils/lesson';
import { useRoute } from 'uni-mini-router';
import { computed, onMounted, ref } from 'vue';
import { useToast } from 'wot-design-uni';

const route = useRoute()
const toast = useToast()
const dayjs = useDayjs()

const lesson = ref<Lesson | null>(null)
const lessonSteps = computed(() => lesson.value ? getLessonSteps(lesson.value) : [])
const lessonStages = computed(() => lesson.value ? extractLessonStage(lesson.value) : null)
const lessonProgress = computed(() => lesson.value ? calcLessonProgress(lesson.value) : 0)

onMounted(() => {
  if (!route.params?.courseId) {
    toast.error({
      msg: '参数错误'
    })
    return
  }
  toast.loading({
    msg: '加载中...'
  })
  BussApi.course(route.params.courseId).then(courseData => {
    toast.close()
    lesson.value = courseData
  }).catch(err => {
    toast.error({ msg: err.message })
  })
})
</script>

<template>
  <div>
    <div :class="`pattern p-4 flex flex-col gap-6 relative ${lessonProgress === 100 ? 'bg-emerald' : (lessonProgress === 0 ? 'bg-neutral' : 'bg-blue')}`">
      <div class="flex flex-col gap-0">
        <h2 class="text-sm text-white font-black op-50">{{ lesson?.course_name }}</h2>
        <h1 class="text-lg text-white font-bold">{{ lesson?.m_lesson_name }}</h1>
      </div>
      <p class="text-xs text-white font-bold op-50" style="line-height: 1;">
        创建于 {{ dayjs(lesson?.created_at).format('YYYY-MM-DD HH:mm:ss') }}
      </p>
      <div class="absolute text-white top-2 right-2 op-35 text-18">
        <div v-if="lessonProgress === 100" class="i-tabler-circle-check"></div>
        <div v-else-if="lessonProgress === 0" class="i-tabler-circle-dashed"></div>
        <div v-else class="i-tabler-hourglass-empty"></div>
      </div>
    </div>
    <div class="p-4">
      <wd-steps :active="lessonStages?.step || 0" vertical>
        <wd-step v-for="(step, index) in lessonSteps" :key="index" :title="step.title"
          :description="step.description" />
      </wd-steps>
    </div>
  </div>
</template>

<style scoped>
.pattern {
  background-image: url("data:image/svg+xml,%3Csvg width='52' height='26' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.08'%3E%3Cpath d='M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
</style>
