<template>
  <div class="course-catalog">
    <div class="chapter-box" v-for="(chapter, index) in list" :key="index">
      <div class="head">
        <div class="name ellipsis">{{ chapter.chapterNameText }}</div>
        <div class="total" @click="onToggle(index)">
          共{{ chapter.lectureNum }}节
          <img class="arrow" :class="{'arrow-active': chapter.showAll}" src="~@/images/course/arrow_down.png" />
        </div>
      </div>
      <div class="lecture-box" v-show="chapter.showAll">
        <div class="item"
          :class="{'item-active': curtId === lecture.lectureId}"
          v-for="lecture in chapter.lectures"
          :key="lecture.lectureId"
          @click="onSelect(lecture, 1)">
          <img class="icon" src="~@/images/course/icon_play.png" />
          <div class="info-box line">
            <div class="info">
              <p class="subname ellipsis">{{ lecture.lectureNameText }}</p>
              <p class="time">
                时长: {{ lecture.totalTimeText }}
                <span>{{ lecture.statusText }}</span>
              </p>
            </div>
            <div class="btn" v-if="lecture.btnText">{{ lecture.btnText }}</div>
            <img v-else class="lock" src="~@/images/course/lock.png" alt="" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  props: {
    list: {
      type: Array,
      default() {
        return []
      }
    },
    curtId: {
      type: Number,
      default: 0,
    },
    onToggle: {
      type: Function
    },
    onSelect: {
      type: Function
    }
  },
};
</script>

<style lang="less" scoped>
.course-catalog{
  .chapter-box{
    position: relative;
    padding: 0 15px;
    &::after{
      position: absolute;
      content: "";
      left: 0;
      bottom: 0;
      width: 200%;
      height: 0;
      transform: scale(0.5);
      transform-origin: left center;
      border-bottom: 1px solid #E7E8E9;
    }
    .head{
      display: flex;
      height: 50px;
      line-height: 50px;
    }
    .name{
      flex: 1;
      width: 100px;
      font-size: 15px;
    }
    .total{
      position: relative;
      color: #A1A2A3;
      font-size: 14px;
      padding-right: 15px;
    }
    .arrow{
      position: absolute;
      right: 0;
      top: 19px;
      width: 12px;
      height: 12px;
      transition: all 0.3s;
    }
    .arrow-active{
      transform: rotate(180deg);
    }
  }
  .lecture-box{
    .item{
      position: relative;
      padding: 15px 0 0 25px;
    }
    .item-active{
      .subname, .time{
        color: #449284;
      }
    }
    .icon{
      position: absolute;
      left: 0;
      top: 20px;
      width: 12px;
    }
    .info-box{
      position: relative;
      display: flex;
      align-items: center;
      padding-bottom: 15px;
    }
    .info{
      position: relative;
      flex: 1;
      width: 100px;
      padding-right: 5px;
    }
    .line{
      &::after{
        position: absolute;
        content: "";
        left: 0;
        bottom: 0;
        width: 200%;
        height: 0;
        transform: scale(0.5);
        transform-origin: left center;
        border-bottom: 1px solid #E7E8E9;
      }
    }
    .btn{
      position: relative;
      width: 60px;
      height: 26px;
      line-height: 26px;
      color: #449284;
      font-size: 12px;
      text-align: center;
      &::after{
        position: absolute;
        content: "";
        left: -1px;
        top: -1px;
        width: 200%;
        height: 200%;
        border: 1px solid #449284;
        transform: scale(0.5);
        transform-origin: left top;
        border-radius: 26px;
      }
    }
    .lock{
      display: block;
      width: 16px;
      margin: 0 22px;
    }
    .subname{
      color: #676869;
      font-size: 15px;
    }
    .time{
      color: #A3A3A3;
      font-size: 12px;
      margin-top: 8px;
    }
  }
}
</style>
