<template>
  <view class="plan-view-item">
    <view class="order-or-finished">
      <image
        v-if="plan.finished"
        :src="`${OSS_URL}/duxueshi/finished_icon.png`"
        class="finised_icon"
      />
      <text v-else class="order">{{ plan.order < 10 ? `0${plan.order}` : plan.order }}</text>
    </view>
    <view class="plan-view-item-content">
      <view class="plan-view-item-content-info">
        <view>
          <text class="course-name">{{ plan.courseName }}</text>
          <text class="tag" :style="{ backgroundColor: plan.bgColor }">{{ plan.label }}</text>
        </view>
        <view>
          <text :style="{ color: plan.finished ? '#21d17a' : '#FF2828' }">{{
            plan.progressText
          }}</text>
          <text>|</text>
          <text>{{ plan.time }}</text>
        </view>
      </view>
      <view class="content-intro">{{ plan.note }}</view>
    </view>
  </view>
</template>

<script setup lang="ts">
import type { PlanItem } from '@/components/inspector/plan-item';
defineProps<{
  plan: PlanItem;
}>();
const OSS_URL = import.meta.env.VITE_OSS_HOST;
</script>

<style scoped lang="scss">
.plan-view-item {
  display: flex;
  padding: 20rpx 16rpx 0 16rpx;
  //align-items: flex-start;
  // gap: 20rpx;
  //align-self: stretch;

  .order-or-finished {
    width: 46rpx;
    margin-right: 20rpx;
    color: #333;
    text-align: center;
    font-size: 30rpx;
    font-style: normal;
    font-weight: 500;
    line-height: 46rpx; /* 153.333% */

    .finised_icon {
      width: 46rpx;
      height: 46rpx;
    }
    .order {
      display: block;
      width: 46rpx;
    }
  }

  &-content {
    width: 100%;
    width: calc(100% - 66rpx);
    border-bottom: 2rpx solid #ececec;
    padding-bottom: 20rpx;

    .tag {
      display: inline-block;
      padding: 0 10rpx;
      color: #fff;
      font-size: 22rpx;
      font-weight: 500;
      line-height: 30rpx;
      border-radius: 6rpx;
    }

    &-info {
      display: flex;
      justify-content: space-between;
      // gap: 10rpx;

      & > view {
        display: flex;
        gap: 10rpx;
        align-items: center;

        & > text {
          font-size: 24rpx;
          font-style: normal;
          font-weight: 500;
          color: #a9aab5;

          &.course-name {
            font-size: 30rpx;
            font-weight: 500;
            color: #0a1f13;
          }

          &.progress-rate {
            color: #21d17a;
          }
        }
      }
    }

    .content-intro {
      color: #333333;
      font-size: 28rpx;
      margin-top: 10rpx;
      word-wrap: break-word;
    }
  }
}
</style>
