<template>
    <view class="course-table-cell" v-if="info" :class="[info.state, {'disabled': date.disable}]">
      <view class="title">{{modeType[info.mode]}}督学</view>
      <view class="finish" v-if="info.planStatus === 2">已完成</view>
      <view class="pending" v-else-if="info.planStatus === 1">督学中</view>
      <view class="waiting" v-else>{{ info.taskCount }}个计划</view>
    </view>
</template>

<script setup lang=ts>
import {computed} from "vue";

const props = defineProps<{
  date: {
    value: string,
    disable: boolean
  },
  list: {date: string, info: {taskCount: number, planStatus: number, state: number, mode: number}}[]
}>()

const modeType = {1: '1v1', 2: '1vN'}

const info = computed((): {taskCount: number, planStatus: number, state: number, mode: number} => {
  let data = props.list.find(item => item.date === props.date.value)
  if (!data) return null
  return data.info
})
</script>

<style scoped lang="scss">
.course-table-cell {
  .title {
    font-size: 20rpx;
    color: #666;
    line-height: 32rpx;
  }
  .finish {
    font-size: 20rpx;
    line-height: 32rpx;
    color: #333;
  }
  .pending {
    font-size: 20rpx;
    color: #21D17A;
    line-height: 32rpx;
  }
  .waiting {
    font-size: 20rpx;
    color: #FF8D5F;
    line-height: 32rpx;
  }
  &.disabled {
    .title {
      color: #ccc;
    }
    .finish {
      color: #ccc;
    }
  }
}
</style>
