<template>
  <view class="relative">
    <ie-image :is-oss="true" src="/study-bg5.png" customClass="w-full h-[555rpx] absolute top-0 left-0 z-0" />
    <ie-image :is-oss="true" src="/study-bg6.png" :customClass="`w-220 h-205 absolute right-38 z-1 ${appStore.isH5 ? 'top-83' : 'top-153'}`" />
    <view class="relative z-2">
      <view :class="`ml-43 ${appStore.isH5 ? 'pt-122' : 'pt-192'}`">
        <ie-image :is-oss="true" src="/study-title2.png" customClass="w-240 h-52" />
        <view class="mt-22 text-24 text-fore-light"> 每天按计划学习，让进步看得见~</view>
      </view>
      <view class="mt-32 mx-30 px-40 py-28 rounded-10 bg-white flex items-center justify-between">
        <view v-for="(item, index) in stat" :key="item.desc" class="text-start">
          <view class="">
            <text class="text-36 text-fore-title font-bold">{{ item.data }}</text>
            <text class="ml-8 text-24 text-fore-light">{{ item.unit }}</text>
          </view>
          <view class="mt-8 text-24 text-fore-light">{{ item.desc }}</view>
        </view>
      </view>
    </view>

  </view>
</template>
<script lang="ts" setup>
import { useAppStore } from '@/store/appStore';
import { STUDY_PLAN_STATS, STUDY_PLAN } from '@/types/injectionSymbols';
const appStore = useAppStore();
const studyPlan = inject(STUDY_PLAN);
const studyPlanStatsRef = inject(STUDY_PLAN_STATS);

const stat = computed(() => {
  const studyPlanStats = studyPlanStatsRef?.value;
  return [
    {
      data: getValue(studyPlanStats?.doneDay),
      unit: '天',
      desc: '本月已完成'
    },
    {
      data: getValue(studyPlanStats?.undoneDay),
      unit: '天',
      desc: '本月未完成'
    },
    {
      data: formatMinutes(studyPlanStats?.videoTimes),
      unit: '分钟',
      desc: '学习时长'
    },
    {
      data: getValue(studyPlanStats?.questionCnt),
      unit: '题',
      desc: '答题总数'
    }
  ]
});
const getValue = (val?: number) => {
  return val || 0;
}
const formatMinutes = (val?: number) => {
  return val ? Math.round(val / 60) : 0;
}
</script>
<style lang="scss" scoped></style>