<template>
  <ie-page bg-color="#F6F8FA">
    <ie-navbar title="定制学习计划" />
    <view class="mt-16 bg-white py-30">
      <view class="mx-40 text-32 text-fore-title font-bold">每日学习计划</view>
      <view class="mt-20">
        <uv-cell-group :border="false">
          <uv-cell isLink value="去设置" :border="false" :cellStyle="cellStyle" :rightIconStyle="rightIconStyle"
            @click="handleCourseStudySetting">
            <template #title>
              <text class="text-30 text-fore-subtitle">课程学习</text>
            </template>
            <template #value>
              <text v-if="form.videoTime" class="mr-10 text-30 text-fore-title">{{ form.videoTime }}课时</text>
              <text v-else class="mr-10 text-30 text-fore-placeholder">去设置</text>
            </template>
          </uv-cell>
          <uv-cell isLink value="去设置" :border="false" :cellStyle="cellStyle" :rightIconStyle="rightIconStyle"
            @click="handleQuestionStudySetting">
            <template #title>
              <text class="text-30 text-fore-subtitle">题库练习</text>
            </template>
            <template #value>
              <text v-if="form.questionCnt" class="mr-10 text-30 text-fore-title">{{ form.questionCnt }}题</text>
              <text v-else class="mr-10 text-30 text-fore-placeholder">去设置</text>
            </template>
          </uv-cell>
        </uv-cell-group>
      </view>
    </view>
    <ie-safe-toolbar :height="84" :shadow="false">
      <view class="px-46 pt-24">
        <ie-button type="primary" @click="handleConfirm">确认保存</ie-button>
      </view>
    </ie-safe-toolbar>
    <course-setting ref="courseStudySetting" />
    <question-setting ref="questionStudySetting" />
  </ie-page>
</template>

<script lang="ts" setup>
import { StudyPlan } from '@/types/study';
import CourseSetting from './components/course-setting.vue';
import QuestionSetting from './components/question-setting.vue';
import { saveStudyPlan } from '@/api/modules/study';
import { useTransferPage } from '@/hooks/useTransferPage';
const { prevData } = useTransferPage();
const cellStyle = {
  padding: '30rpx 40rpx'
}
const rightIconStyle = {
  fontSize: '14px'
}
const form = ref({
  questionCnt: 0,
  videoTime: 0
})
const courseStudySetting = ref();
const questionStudySetting = ref();
const handleCourseStudySetting = () => {
  courseStudySetting.value.open(form.value.videoTime, (time: number) => {
    form.value.videoTime = time;
  });
}
const handleQuestionStudySetting = () => {
  questionStudySetting.value.open(form.value.questionCnt, (time: number) => {
    form.value.questionCnt = time;
  });
}
const handleConfirm = async () => {
  const { questionCnt, videoTime } = form.value;
  if (!questionCnt) {
    uni.$ie.showToast('请设置题库练习计划');
    return;
  }
  uni.$ie.showLoading();
  await saveStudyPlan(form.value);
  uni.$ie.hideLoading();
  uni.$ie.showToast('保存成功');
  setTimeout(() => {
    uni.navigateBack();
  }, 800);
}

onLoad(() => {
  form.value = {
    ...prevData.value,
    questionCnt: prevData.value.questionCnt || 0,
    videoTime: prevData.value.videoTime || 0
  }
});
</script>

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