<template>
  <div @click="goTo(c.courseId)">
    <div class="cDetail">
      <div class="courseImg">
        <img :src="c.cover ? JSON.parse(c.cover)[0].url : require('../../../assets/images/home/wheel.png')" alt="" />
      </div>
      <div class="cRight">
        <div>{{ c.title }}</div>
        <div>创建者：{{ c.uname }}</div>
        <div class="jdBox">
          <div class="jdImg"><img src="../../../assets/images/home/jd.png" alt="" /></div>
          <div>{{ JSON.parse(c.chapters).length }}阶段</div>
        </div>
        <div class="typeCss">{{ c.typename ? c.typename : '暂无分类' }}</div>
      </div>
    </div>
    <div class="cButtonBox" v-show="false">
      <div class="cButton">
        <div class="bImg"><img src="../../../assets/images/home/courseEvaIcon.png" alt="" /></div>
        <div>评课</div>
      </div>
      <div class="cButton">
        <div class="bImg"><img src="../../../assets/images/home/evaIcon.png" alt="" /></div>
        <div>评价</div>
      </div>
      <div class="cButton">
        <div class="bImg"><img src="../../../assets/images/home/analysisIcon.png" alt="" /></div>
        <div>分析</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    c: {
      type: Object
    }
  },
  methods: {
    goTo(cid) {
      // localStorage.setItem('urlType',0)
      // eslint-disable-next-line prettier/prettier
      this.$router.push({ path: '/courseDetail', query: { courseid: cid , urlType: 0 } })
    }
  }
}
</script>

<style lang="scss" scoped>
.cDetail {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  .courseImg {
    width: 120px;
    height: 100px;
    min-width: 120px;
    min-height: 100px;
    > img {
      width: 100%;
      height: 100%;
      border-radius: 5px;
      object-fit: cover;
    }
  }
  .cRight {
    padding: 0 10px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: center;
    > div {
      margin: 4px 0;
      font-size: 14px;
    }
    > div:nth-child(1) {
      font-size: 16.5px;
      font-weight: bold;
      max-width: 220px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-word;
      margin: 0 0 4px 0;
    }
    > div:last-child {
      margin: 0;
    }
    .jdBox {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: flex-start;
      .jdImg {
        width: 20px;
        height: 20px;
        > img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .typeCss {
      display: -webkit-box;
      overflow: hidden;
      white-space: normal !important;
      text-overflow: ellipsis;
      word-wrap: break-word;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }
  }
}
.cButtonBox {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  padding: 10px 0 0 0;
  .cButton {
    width: 100px;
    height: 30px;
    margin: 0 10px 0 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    border: 1px solid #587ff3;
    color: #587ff3;
    border-radius: 5px;
    justify-content: center;
    .bImg {
      width: 20px;
      height: 20px;
      > img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
