<template>
  <el-collapse v-model="activeNames">
    <el-collapse-item :title="item.name" :name="item.id" v-for="item in data" :key="item.id">
      <ul>
        <li v-for="subItem in item.children" :key="subItem.id" @click="$emit('on-click', subItem)">
          <div class="name">{{ subItem.name }}</div>
          <div class="progress" v-if="showProgress">{{ progressText(subItem.video_progress) }}</div>
        </li>
      </ul>
    </el-collapse-item>
  </el-collapse>
</template>

<script>
export default {
  props: {
    courseId: { type: String },
    data: { type: Array, required: true, default: () => [] },
    showProgress: { type: Boolean, default: false }
  },
  data() {
    return {
      activeNames: []
    }
  },
  methods: {
    progressText(value) {
      value = parseInt(value)
      if (value === 0) {
        return '未开始'
      }
      if (value === 100) {
        return '已学完'
      }
      return `已学${value}%`
    }
  }
}
</script>

<style lang="scss" scoped>
.el-collapse {
  border: 0;
}
::v-deep .el-collapse-item__header {
  font-size: 14px;
  font-weight: 600;
  color: #222;
}
::v-deep .el-collapse-item__content {
  padding-bottom: 10px;
}
li {
  display: flex;
  padding: 5px 0;
  cursor: pointer;
  color: #666;
  &:hover {
    color: #c01540;
  }
  .name {
    flex: 1;
    overflow: hidden;
  }
  .progress {
    margin-left: 20px;
    color: #999;
  }
}
</style>
