<template>
  <div class="CourseCatalogue-box">
    <ul class="list-box">
      <li class="list-item" v-for="(item, index) in 3" :key="index">
        <div class="list-item-title"><span style="margin-right: 10px;">第一章</span>建筑施工安全培训第一期课程学习</div>
        <ul class="sub-list">
          <li @click="handlerItem(j, item)" class="sub-list-item" v-for="(j, k) in 4" :key="`${index}-${k}`">
            <div class="sub-item-info">
              <VideoOne theme="filled" fill="#ccc" style="margin-right: 6px;" size="1.2em"></VideoOne>1.1
              建筑施工安全培训第一期课程学习
            </div>
            <div v-if="`${index}-${k}` === selectedId" 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="#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 },
  data () {
    return {
      selectedId: '1-1'
    }
  },
  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;
  }

  .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>
