<template>
  <view class="mt-24 bg-white relative z-4">
    <uni-calendar ref="calendarRef" :insert="true" :lunar="false" :readonly="false" :showMonth="false"
      :selected="selected" :endDate="endDate" @change-month="changeMonth" @change="handleChangeDate" />
    <view class="wrap mt-20 w-fit mx-auto px-98 py-16 flex items-center justify-center transition-all duration-300">
      <ie-image src="/pagesStudy/static/image/icon-calendar.png" custom-class="w-22 h-22" />
      <text class="ml-4 text-20 text-primary">{{ tip }}</text>
    </view>
    <view class="mt-40 mx-40 mb-30 grid grid-cols-2 gap-x-26 gap-y-26">
      <view v-for="item in stat" :key="item.name" class="relative p-30 rounded-10 bg-back">
        <ie-image :src="item.icon" custom-class="w-52 h-70 absolute top-20 right-25" />
        <view class="text-30 text-fore-light font-bold">{{ item.name }}</view>
        <view class="mt-4">
          <text class="text-36 text-fore-title font-bold">{{ item.value }}</text>
          <text class="ml-20 text-24 text-fore-light">{{ item.unit }}</text>
        </view>
      </view>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { STUDY_PLAN_STATS, STUDY_PLAN } from '@/types/injectionSymbols';
import { Study } from '@/types';
const studyPlan = inject(STUDY_PLAN) || ref({} as Study.StudyPlan);
const studyPlanStats = inject(STUDY_PLAN_STATS) || ref({} as Study.StudyPlanStats);
const today = uni.$uv.timeFormat(new Date(), 'yyyy-mm-dd');
let selectDate = ref(today);
const stat = computed(() => {
  let todayData = selectedDate.value;
  const questionCnt = studyPlan.value.questionCnt;
  const videoTime = studyPlan.value.videoTime;
  // if (studyPlanStats.value?.studyList?.length) {
  //   const index = studyPlanStats?.value?.studyList.findIndex(item => item.date === selectDate.value);
  //   if (index !== -1) {
  //     todayData = studyPlanStats.value?.studyList[index].data;
  //   } else {
  //     todayData = {} as Study.StudyStats;
  //   }
  // }

  return [
    {
      name: '答题数',
      unit: '道题',
      value: `${getValue(todayData?.questionCnt)}/${getValue(questionCnt)}`,
      icon: '/pagesStudy/static/image/icon-pen.png'
    },
    {
      name: '课程学习',
      unit: '课时',
      value: `${getValue(todayData?.videoTime)}/${getValue(videoTime)}`,
      icon: '/pagesStudy/static/image/icon-video.png'
    },
    {
      name: '正确率',
      unit: '',
      value: `${getValue(todayData?.rightRate)}%`,
      icon: '/pagesStudy/static/image/icon-chart.png'
    },
    {
      name: '学习时长',
      unit: '分钟',
      value: `${formatMinutes(todayData?.videoTimes)}`,
      icon: '/pagesStudy/static/image/icon-time.png'
    }
  ]
});
const selectedDate = computed(() => {
  if (studyPlanStats.value?.studyList?.length) {
    const index = studyPlanStats?.value?.studyList.findIndex(item => item.date === selectDate.value);
    if (index !== -1) {
      return studyPlanStats.value?.studyList[index].data;
    } else {
      return {} as Study.StudyStats;
    }
  }
});
const isShowToday = computed(() => {
  return selectDate.value === today;
});
const selected = computed(() => {
  if (!studyPlanStats.value?.studyList?.length) {
    return [];
  }
  return studyPlanStats.value?.studyList.map(item => {
    const { date, data } = item;
    return {
      date: date,
      info: {
        isFinish: data.questionCnt >= data.questionPlan && data.videoTime >= data.videoPlan
      }
    }
  });
});

const endDate = ref('')
const todayPlanFinish = computed(() => {
  // const todayData = studyPlanStats?.value?.today;
  const todayData = selectedDate.value;
  const questionCnt = studyPlan.value.questionCnt;
  const videoTime = studyPlan.value.videoTime;

  if (
    getValue(todayData?.questionCnt) >= getValue(questionCnt) &&
    getValue(todayData?.videoTime) >= getValue(videoTime)) {
    return true;
  }
  return false;
});
const tip = computed(() => {
  if (isShowToday.value) {
    if (todayPlanFinish.value) {
      return '恭喜你，今日计划已完成'
    }
    return '今日计划进行中，加油~'
  } else {
    return '历史完成情况';
  }
});
const getValue = (val?: number) => {
  return val || 0;
}
const init = () => {
  endDate.value = uni.$uv.timeFormat(new Date(), 'yyyy-mm-dd')
}
const calendarRef = ref();
const emit = defineEmits(['changeMonth', 'changeDate']);
const changeMonth = (e: any) => {
  emit('changeMonth', e);
}

const handleChangeDate = (e: any) => {
  selectDate.value = e.fulldate;
}

const formatMinutes = (val?: number) => {
  return val ? Math.round((val / 60)) : 0;
}

init();
</script>
<style lang="scss" scoped>
.wrap {
  background: linear-gradient(to right, white 0%, #E5F7FF 50%, white 100%);
}
</style>