<script setup lang="ts">
import ReportProgress from '@/page/urge/components/ReportProgress.vue'
import ReportExerciseCount from '@/page/urge/components/ReportExerciseCount.vue'
import ReportVideoViews from '@/page/urge/components/ReportVideoViews.vue'
import ReportKnowledgeMap from '@/page/urge/components/ReportKnowledgeMap.vue'
import StatCard from '@/page/urge/components/StatCard.vue'

const props = defineProps<{
  loading: boolean
  stat: anyObj
  tasks: anyObj[]
}>()

const statTime = computed(() => {
  const minutes = props.stat.inspectorTimeMinute
  return {
    hours: Math.floor(minutes / 60),
    minutes: minutes % 60,
  }
})

const correctnessCardProps = computed(() => {
  const correctness = props.stat.correctness
  if (correctness < 60) {
    return {
      color: '#BC2D37',
      meshColor: 'rgba(169, 5, 16, 0.65)',
      brandColor: 'rgba(255, 99, 80, 0.85)',
      trend: 'decrease',
    }
  } else if (correctness < 80) {
    return {
      color: '#A13C00',
      meshColor: 'rgba(192, 141, 0)',
      brandColor: '#FED769',
      trend: 'decrease',
    }
  } else if (correctness < 100) {
    return {
      color: '#2D39BC',
      brandColor: 'rgba(144, 252, 247, 0.85)',
      trend: 'decrease',
    }
  } else {
    return {
      color: '#2F8A5B',
      meshColor: 'rgb(66, 150, 17)',
      brandColor: '#B8FC90',
      trend: 'decrease',
    }
  }
})

const exerciseCountStat = computed(() => {
  return JSON.parse(props.stat.practiceQuestionStatistics)
})
const videoViewsStat = computed(() => {
  return JSON.parse(props.stat.watchVideoStatistics)
})
const knowledgeMapStat = computed(() => {
  return JSON.parse(props.stat.knowledgeGraphStatistics)
})
const learned = computed(() => {
  return JSON.parse(props.stat.learnedKnowledge)
})
</script>

<template>
  <div class="panel">
    <div class="circle"></div>
    <div class="panel-body">
      <div v-if="loading" class="loadincontainer">
        <Icon name="global_loading" loading :size="80"></Icon>
      </div>
      <template v-else-if="stat">
        <div class="stats">
          <StatCard
            title="已学视频"
            color="#2D39BC"
            :trend="['stable', 'increase', 'decrease'][stat.studyVideoCountCompare]"
          >
            <span class="stat-value">{{ stat.studyVideoCount }}</span> 个
          </StatCard>
          <StatCard
            title="练习题数"
            color="#2D39BC"
            :trend="['stable', 'increase', 'decrease'][stat.exercisesCountCompare]"
          >
            <span class="stat-value">{{ stat.exercisesCount }}</span> 道
          </StatCard>
          <StatCard
            title="答题正确率"
            v-bind="correctnessCardProps"
            :trend="['stable', 'increase', 'decrease'][stat.correctnessCompare]"
          >
            <span class="stat-value">{{ stat.correctness }}%</span>
          </StatCard>
          <StatCard title="实际督学时长" color="#2D39BC">
            <template v-if="statTime.hours > 0"
              ><span class="stat-value">{{ statTime.hours }}</span> 时</template
            >
            <span class="stat-value">{{ statTime.minutes }}</span> 分
          </StatCard>
        </div>
        <ReportProgress :tasks="tasks" />
        <ReportExerciseCount :data="exerciseCountStat" />
        <ReportVideoViews :data="videoViewsStat" />
        <ReportKnowledgeMap :data="knowledgeMapStat" :learned="learned" />
      </template>
    </div>
  </div>
</template>

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

.stats {
  border-radius: 1.67vh;
  display: flex;
  padding: 1.33vh;
  justify-content: space-between;
}

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

  &: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;
  }
}
</style>
