<script setup lang="ts" name="courseCard">
import { ref, reactive, computed, onMounted } from 'vue'
// import teacher from '@/assets/image/train/teacher.png'
const props = defineProps<{
  item: any
}>()
// const emit = defineEmits<{
//   'course-learn': [val: any],
//   'course-learn-record': [val: any]
// }>()
// function courseLearn() {
//   emit('course-learn', props.item)
// }

// function courseLearnRecord() {
//   emit('course-learn-record', props.item)
// }
</script>

<template>
  <div class="supply-card-container">
    <div class="content-item">
      <div class=label>
        小节名称：
      </div>
      <div class="value">
        {{item.sectionName}}
      </div>
    </div>
    <div class="content-item">
      <div class=label>
        开始学习时间：
      </div>
      <div class="value">
        {{item.recordStrTime}}
      </div>
    </div>
    <div class="content-item">
      <div class=label>
        结束学习时间：
      </div>
      <div class="value">
        {{item.recordEndTime}}
      </div>
    </div>
    <div class="content-item">
      <div class=label>
        学习进度：
      </div>
      <div class="value">
        <van-progress :percentage="item.recordDuration" />
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
  .supply-card-container{
    margin-top: 1.6rem;
    padding: 0.9rem 0.8rem 0.9rem 0.8rem;
    background-color: #fff;
    overflow: hidden;
    border-radius: 24rpx;
    box-shadow: 0 4rpx 40rpx  rgba(64, 103, 251, 0.14);
    .content-item {
      display: flex;
      align-items: center;
      margin-top: 0.4rem;
      .label {
        font-size: 1.4rem;
        font-weight: 500;
        color: rgba(37, 37, 37, 1);
        width: 12rem;
      }
      .value {
        flex: 1;
      }
    }


  }
  // :deep(.van-divider){
  //   margin: 0.9rem 0.2rem;
  // }
</style>
