<template>
  <div
    class="course-item"
    @click="
      router.push(
        `/courseDetail?id=${item.id}&saleUserId=${route.query.saleUserId || ''}`
      )
    "
  >
    <img class="cover" :src="item.coverImage" alt="" />
    <div class="info">
      <h5>{{ item.name }}</h5>
      <p class="remark">
        {{ item.mainPageText ? item.mainPageText : item.remark }}
      </p>
      <p class="price" v-if="item.originalPrice && item.activityPrice">
        ¥{{ item.activityPrice }}<span>¥{{ item.originalPrice }}</span>
      </p>
      <p class="price" v-else-if="item.originalPrice">
        ¥{{ item.originalPrice }}
      </p>
      <p class="blue" v-else>免费</p>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from "vue";
import { useRouter, useRoute } from "vue-router";
/**
 * 路由实例
 */
const router = useRouter();
const route = useRoute();

defineProps({
  item: {
    type: Object,
    default: () => {},
  },
});
</script>
<style scoped lang="scss">
.course-item {
  display: flex;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(235, 236, 237, 1);
  margin-bottom: 16px;
  .cover {
    display: block;
    width: 220px;
    height: 200px;
    border-radius: 16px;
    margin-right: 16px;
  }
  .info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: left;
    font-size: 32px;
    color: rgba(51, 51, 51, 1);
    flex: 1;
    h5 {
      overflow: hidden;
      -webkit-line-clamp: 1;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
    }
    h5,
    .price {
      line-height: 48px;
    }
  }
  .blue {
    color: rgba(46, 120, 250, 1);
    font-size: 28px;
  }
  .remark {
    font-size: 24px;
    line-height: 32px;
    overflow: hidden;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }
  .price {
    font-size: 32px;
    color: rgba(240, 46, 24, 1);
    span {
      font-size: 24px;
      text-decoration: line-through;
      color: rgba(153, 153, 153, 1);
      margin-left: 8px;
    }
  }
}
</style>
