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

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

<template>
  <div class="supply-card-container" @tap="couseDetail">
    <div class="left">
      <img class="item-img" :src="item.courseImage" alt="">
    </div>
    <div class="right">
      <div class="title">
        {{ item.courseName }}
      </div>
      <div class="bottom">
        <div class="teacher">
          <img class="teacher-icon" :src="teacher" alt="">
          <div class="teacher-name">{{ item.coursePeople }}</div>
          <uv-divider />
          <div class="time-long">{{ item.courseTime }}</div>
        </div>
        <div class="option-container">
          <div class="option-btn-one">
            <uv-button
              type="primary"
              size="mini"
              @tap.stop="couseDetail">课程详情</uv-button>
          </div>
         <div>
          <uv-button type="primary" size="mini" @tap.stop="courseLearnRecord">学习记录</uv-button>
         </div>
          
        </div>

      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
  .supply-card-container {
    margin-top: 32rpx;
    padding: 18rpx 16rpx 18rpx 16rpx;
    background-color: #fff;
    overflow: hidden;
    border-radius: 24rpx;
    box-shadow: 0 4rpx 40rpx rgba(64, 103, 251, 0.14);
    display: flex;
}

.supply-card-container .left {
    /* 保持原有样式 */
}

.supply-card-container .left .item-img {
    width: 222rpx;
    height: 144rpx;
    object-fit: cover;
    border-radius: 14rpx;
}

.supply-card-container .right {
    flex: 1;
    margin-left: 16rpx;
}

.supply-card-container .right .title {
    font-size: 32rpx;
    font-weight: 500;
    height: 88rpx;
    color: rgba(37, 37, 37, 1);
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.supply-card-container .right .bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.supply-card-container .right .bottom .teacher {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.supply-card-container .right .bottom .teacher .teacher-icon {
    width: 17.2rpx;
    height: 17.2rpx;
}

.supply-card-container .right .bottom .teacher .teacher-name,
.supply-card-container .right .bottom .teacher .time-long {
    font-size: 20rpx;
    color: rgba(37, 37, 37, 0.45);
}
.option-container {
  display: flex;
  .option-btn-one {
    margin-right: 20rpx;
  }
}
  // :deep(.van-divider){
  //   margin: 0.9rem 0.2rem;
  // }
</style>
