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


</script>

<template>
  <div class="supply-card-container">
    <div class="left">
      <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.sectionType}}
        </div>
      </div>
    </div>
    <div class="right">
      <van-button
        :disabled="status === '1'"
        type="primary"
        size="mini"
        @click="startLearn">开始学习</van-button>
    </div>


  </div>
</template>

<style lang="less" scoped>
  .supply-card-container {
    margin-top: 32rpx; /* 1.6rem = 32rpx */
    padding: 18rpx 16rpx 18rpx 16rpx; /* 0.9rem = 18rpx, 0.8rem = 16rpx */
    background-color: #fff;
    overflow: hidden;
    border-radius: 24rpx;
    box-shadow: 0 4rpx 40rpx rgba(64, 103, 251, 0.14);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.supply-card-container .left {
    flex: 1;
}
.supply-card-container .content-item {
    display: flex;
    align-items: center;
    margin-top: 8rpx; /* 0.4rem = 8rpx */
}
.supply-card-container .content-item .label {
    font-size: 28rpx; /* 1.4rem = 28rpx */
    font-weight: 500;
    color: rgba(37, 37, 37, 1);
    width: 160rpx; /* 8rem = 160rpx */
}
.supply-card-container .content-item .value {
    flex: 1;
}
  // :deep(.van-divider){
  //   margin: 0.9rem 0.2rem;
  // }
</style>
