<template>
  <ie-page>
    <ie-navbar title="学习计划" transparent bg-color="#FFFFFF" title-color="black" :keep-title-color="true" />
    <page-header />
    <page-calendar :select-date="selectDate" @changeMonth="handleChangeMonth" @changeDate="handleChangeDate" />
    <ie-safe-toolbar :height="84" :shadow="false">
      <view class="px-46 pt-24">
        <ie-button type="primary" @click="handleEditPlan">修改学习计划</ie-button>
      </view>
    </ie-safe-toolbar>
  </ie-page>
</template>

<script lang="ts" setup>
import PageHeader from './components/page-header.vue';
import PageCalendar from './components/page-calendar.vue';
import { useTransferPage } from '@/hooks/useTransferPage';
import { getStudyPlan, getStudyPlanStats } from '@/api/modules/study';
import { StudyPlan, StudyPlanStats } from '@/types/study';
import { STUDY_PLAN, STUDY_PLAN_STATS } from '@/types/injectionSymbols';

const { prevData, transferTo } = useTransferPage();
let selectDate = ref(uni.$uv.timeFormat(new Date(), 'yyyy-mm-dd'));
const studyPlan = ref<StudyPlan>({} as StudyPlan);
const studyPlanStats = ref<StudyPlanStats>({} as StudyPlanStats);
provide(STUDY_PLAN, studyPlan);
provide(STUDY_PLAN_STATS, studyPlanStats);

const handleEditPlan = () => {
  transferTo('/pagesStudy/pages/study-plan-edit/study-plan-edit', {
    data: {
      ...studyPlan.value
    }
  });
}
const handleChangeMonth = async (e: any) => {
  uni.$ie.showLoading();
  selectDate.value = e.date.slice(0, 7) + '-01';
  await loadStatsData();
  uni.$ie.hideLoading();
}
const handleChangeDate = (e: any) => {
  selectDate.value = e.fullDate;
}
const loadStatsData = async () => {
  const { data } = await getStudyPlanStats({
    reportMonth: selectDate.value
  });
  studyPlanStats.value = data;
}
const loadData = async () => {
  uni.$ie.showLoading();
  const res = await getStudyPlan();
  studyPlan.value = res.data;
  await loadStatsData();
  uni.$ie.hideLoading();
}
onShow(() => {
  loadData();
});
onPageScroll(() => { });
</script>

<style lang="scss" scoped></style>
