<template>
  <view>
    <view class="finish-title">督学计划完成情况</view>
    <view class="plan-view">
      <isp-plan-item v-for="item in showTasks" :key="item" :plan="item" />
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import dayjs from 'dayjs';
import { formatTaskTypeNotePrefix, TASK_TYPE } from '@/components/inspector/plan-item';

const props = defineProps({
  tasks: {
    type: Array,
    default: () => [],
  },
});
const showTasks = computed(() => {
  return props.tasks.map((task: any, index) => {
    const _type = TASK_TYPE[task.taskType];
    return {
      order: index + 1,
      courseName: task.subjectName,
      label: _type.label,
      bgColor: _type.bgColor,
      finished: task.taskType === 0 ? Number(task.progress) > 0.8 : task.finishedNum >= task.num,
      progressText:
        task.taskType === 0
          ? Number(task.progress) > 0.8
            ? '1/1'
            : '0/1'
          : `${task.finishedNum}/${task.num}`,
      time: `${dayjs(task.inspectorTimeStart).format('HH:mm')}-${dayjs(
        task.inspectorTimeEnd,
      ).format('HH:mm')}`,
      note: formatTaskTypeNotePrefix(_type.notePrefix, task),
    };
  });
});

// const plans = [
//     {
//         order: 1,
//         finished: false,
//         courseName: '数学',
//         label: '自由学',
//         progressText: '100%',
//         time: '19:00-19:20',
//         note: '观看学习视频：《第一章 空间向量与立体几何》',
//     },
//     {
//         order: 1,
//         finished: true,
//         courseName: '语文',
//         label: '自由学',
//         progressText: '100%',
//         time: '19:00-19:20',
//         note: '观看学习视频：《第一章 空间向量与立体几何》',
//     },
// ];
</script>

<style scoped lang="scss">
.finish-title {
  margin: 70rpx 0 30rpx 0;
  color: #000;
  text-align: center;
  font-size: 32rpx;
  font-style: normal;
  font-weight: 500;
  line-height: 48rpx; /* 150% */
}

.plan-view {
  background-color: white;
  border-radius: 20rpx;
  border: 1rpx solid #ececec;
  box-sizing: border-box;
  :deep(.plan-view-item:last-child) {
    .plan-view-item-content {
      border-bottom: none;
    }
  }
}
</style>
