<template>
  <view class="study-plan">
    <view class="study-plan-content">
      <view class="change-time">
        <wd-icon name="arrow-left" size="30rpx" :color="isCanPrev ? '#666' : '#ddd'" @click="prevTime"></wd-icon>
        <view class="time-text">{{ currentDate.format('MM月DD日') }}</view>
        <wd-icon name="arrow-right" size="30rpx" :color="isCanNext ? '#666' : '#ddd'" @click="nextTime"></wd-icon>
      </view>

      <wd-skeleton v-if="isLoading" animation="gradient" theme="paragraph" style="padding-bottom: 30rpx"></wd-skeleton>

      <view class="plan-list" v-else>
        <view v-for="(item, index) in planList" :key="index" class="plan-item">
          <view class="serial-number">
            <view v-if="item.progress === 100" class="finished-icon">
              <wd-icon name="check-bold" size="30rpx"></wd-icon>
            </view>
            <template v-else>{{ (++index).toString().padStart(2, '0') }}</template></view>
          <view class="plan-item-info">
            <view class="plan-item-title">
              <view class="title-type">
                <view class="title">{{ item.subjectName }}</view>
                <view class="type" :style="{backgroundColor: type[item.taskType].color}">{{ type[item.taskType].text }}</view>
              </view>
              <view class="plan-item-time">
                <view class="total-progress">
                  <text class="success" v-if="item.progress > 0">{{item.progress}}%</text>
                  <text class="progress" v-else>{{item.finishedNum}}/{{item.num}}</text>
                </view>
                <view class="time">{{ dayjs(item.startTime).format("HH:mm") }} - {{ dayjs(item.endTime).format("HH:mm") }}</view>
              </view>
            </view>
            <view class="plan-desc">{{ item.plan }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import {computed, ref} from 'vue';
import dayjs from 'dayjs';
import {onLoad} from "@dcloudio/uni-app";
import {getInspectorPlan} from "@/api";

const type = {
  0: {text: "自由学", color: '#FFA65D',},
  1: {text: "自由学", color: '#FFA65D',},
  2: {text: "精准学", color: '#4fd6ee',},
  3: {text: "语感训练", color: '#ff91a1',},
  4: {text: "错题本", color: '#ff91a1',}
}

const currentDate = ref(dayjs());
const planList = ref<{
  subjectName: string,
  taskType: number | string,
  startTime: string,
  endTime: string,
  num: number,
  finishedNum: number,
  plan: string,
  progress: number,
}[]>([]);

const allPlan = ref([])

const isLoading = ref(true)
const loadData = async () => {
  let plan = allPlan.value.find(item => item.date === currentDate.value.format('YYYY-MM-DD'))
  isLoading.value = true
  getInspectorPlan({inspectorPlanId: plan.id}).then(({data}) => {
    planList.value = data.taskList.map(item => {
      let data = JSON.parse(item.taskInfoJson)
      let plan = {
        startTime: data.inspectorTimeStart,
        endTime: data.inspectorTimeEnd,
        subjectName: data.subjectName,
        taskType: data.taskType,
        num: data.num,
        finishedNum: data.finishedNum,
        progress: data.progress,
        plan: ""
      }
      switch (plan.taskType) {
        case "0":
          plan.plan = `观看学习视频：《${data.chapterName}》章节《${data.courseTimeName}》视频`
          break
        case "1":
          plan.plan = `完成章节练习：《${data.chapterName}》`
          break
        case "2":
          plan.plan = `AI精准学习${plan.num}次`
          break
        case "3":
          plan.plan = `语感训练${plan.num}次`
          break
        case "4":
          plan.plan = `  订正错题本${plan.num}道`
          break
      }
      return plan
    })
  }).finally(() => {
    isLoading.value = false
  })
}

const isCanPrev = computed(() => {
  return allPlan.value.findIndex(item => item.date === currentDate.value.format('YYYY-MM-DD')) > 0
})
const isCanNext = computed(() => {
  return allPlan.value.findIndex(item => item.date === currentDate.value.format('YYYY-MM-DD')) < allPlan.value.length - 1
})
const prevTime = () => {
  let index = allPlan.value.findIndex(item => item.date === currentDate.value.format('YYYY-MM-DD'))
  if (isCanPrev.value) {
    currentDate.value = dayjs(allPlan.value[index - 1].date)
    loadData()
  }
};
const nextTime = () => {
  let index = allPlan.value.findIndex(item => item.date === currentDate.value.format('YYYY-MM-DD'))
  if (isCanNext.value) {
    currentDate.value = dayjs(allPlan.value[index + 1].date)
    loadData()
  }
};


onLoad((option) => {
  allPlan.value = uni.getStorageSync("plan")
  currentDate.value = dayjs(option.d);
  loadData()
})
</script>

<style scoped lang="scss">
.study-plan {
  padding: 30rpx;
  .study-plan-content {
    border-radius: 20rpx;
    background-color: #fff;
    padding: 0 30rpx;
    .change-time {
      padding: 30rpx 0;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10rpx;
      .time-text {
        font-size: 34rpx;
        font-weight: 500;
      }
    }
    .plan-list {
      .plan-item {
        display: flex;
        align-items: flex-start;
        .serial-number {
          width: 46rpx;
          margin-right: 20rpx;
          height: 46rpx;
          line-height: 46rpx;
          padding: 20rpx 0;
          font-size: 30rpx;
          font-weight: 500;
          flex-shrink: 0;
          text-align: center;
          .finished-icon {
            width: 46rpx;
            height: 46rpx;
            line-height: 46rpx;
            background-color: #efefff;
            color: #615dff;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
        .plan-item-info {
          border-bottom: 1px solid #f2f2f2;
          padding: 20rpx 0;
          flex: 1 0;
          .plan-item-title {
            display: flex;
            justify-content: space-between;
            height: 46rpx;
            align-items: center;
            margin-bottom: 10rpx;
            .title-type {
              display: flex;
              align-items: center;
              .title {
                font-size: 30rpx;
                font-weight: 500;
              }
              .type {
                margin-left: 8rpx;
                padding: 0 10rpx;
                box-sizing: border-box;
                height: 30rpx;
                color: #fff;
                border-radius: 6rpx;
                font-size: 22rpx;
                font-weight: 500;
              }
            }
            .plan-item-time {
              font-size: 24rpx;
              display: flex;
              align-items: center;
              .total-progress {
                padding-right: 10rpx;
                border-right: 1px solid #f2f2f2;
                margin-right: 10rpx;
                .success {
                  color: #21D17A;
                }
                .progress {
                  color: #FF2828;
                }
              }
              .time {
                color: #A9AAB5;
              }
            }
          }
          .plan-desc {
            font-size: 28rpx;
            line-height: 42rpx;
          }
        }
        &:last-child {
          .plan-item-info {
            border-bottom: none;
          }
        }
      }
    }
  }
}
</style>
