<template>
  <div class="CourseCatalogue-box">
    <ul class="list-box">
      <li class="list-item" v-for="(item, index) in catalogueList" :key="index">
        <div class="list-item-title">
          <span style="margin-right: 10px;">第{{ capitalizeNumber[index] }}章</span>
          {{ item.name }}
        </div>
        <ul class="sub-list">
          <li
            @click="handlerItem(j, item)"
            class="sub-list-item"
            v-for="(j, k) in item.courseList"
            :key="`${index}-${k}`"
          >
            <div
              :class="[
                'sub-item-info',
                { 'sub-item-info-success': j.status === 1 },
                {
                  'sub-item-info-active': j.id === curVideo.id,
                },
              ]"
            >
              <VideoOne
                theme="filled"
                :fill="j.id === curVideo.id ? '#1890ff' : j.status === 1 ? '#26bd71' : '#ccc'"
                style="margin-right: 6px;"
                size="1.2em"
              ></VideoOne>
              {{ index + 1 }}.{{ k + 1 }}
              {{ j.name }}
            </div>
            <!--  0-未学 1-已学 -->
            <div v-if="j.id === curVideo.id" class="sub-item-status">
              正在学习中
              <History
                theme="filled"
                tyle="margin-left: 10px;"
                size="1.2em"
                style="margin-left: 10px;"
              ></History>
            </div>
            <div v-else class="sub-item-status">
              <Round
                theme="filled"
                strokeWidth="6"
                :fill="j.status === 1 ? '#26bd71' : '#666'"
                style="margin-left: 10px;"
              ></Round>
            </div>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
import { VideoOne, Round, History } from '@icon-park/vue'
export default {
  components: { VideoOne, Round, History },
  props: {
    catalogueList: {
      type: Array,
      default: () => []
    },
    curVideo: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      capitalizeNumber: ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一'],
      data: []
    }
  },
  mounted () {},
  methods: {
    handlerItem (item, pItem) {
      this.$emit('changeVideo', { item, pItem })
    }
  }
}
</script>

<style lang="less" scoped>
.learn-detail {
  display: flex;
}

.learn-detail-video {
  flex: 1;
}

.learn-detail-list {
  flex: 220px;
}

.list-box,
.sub-list {
  margin: 0;
  padding: 0;
}

.list-item-title {
  color: 16px;
  font-weight: bold;
  color: #333;
  padding: 10px 0;
}

.sub-list-item {
  color: #666;
  padding-bottom: 10px;
  &:hover {
    color: #1890ff;
  }
}

.sub-list {
  padding-left: 20px;
}

.sub-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  .sub-item-info {
    flex: 1;
    display: flex;
    line-height: 2;
  }

  .sub-item-info-active {
    color: #1890ff !important;
  }

  .sub-item-info-success {
    color: #26bd71;
  }

  .sub-item-status {
    flex: 0 0 200px;
    font-size: 12px;
    text-align: right;
    color: #1890ff;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}

.list-item {
  width: 100%;
}
</style>
