<template>
  <van-collapse v-model="activeNames">
    <van-collapse-item :title="item.name" :name="item.id" v-for="item in data" :key="item.id">
      <template #right-icon>
        <van-icon name="arrow" />
        <van-icon name="arrow-down" />
      </template>
      <ul>
        <li v-for="subItem in item.children" :key="subItem.id" @click="$emit('on-click', subItem)">
          <div class="name">
            {{subItem.name}}
            <template v-if="subItem.free">（免费）</template>
          </div>
          <div
            class="progress"
            v-if="showProgress"
          >{{ progressText(subItem.video_progress, subItem.free) }}</div>
        </li>
      </ul>
    </van-collapse-item>
  </van-collapse>
</template>

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

<style lang="scss" scoped>
::v-deep .van-cell {
  padding-left: 0;
  padding-right: 0;
}
::v-deep .van-collapse-item__content {
  padding: 0;
}
::v-deep .van-collapse-item--border::after {
  left: 0;
  right: 0;
}
::v-deep .van-collapse-item__title--expanded::after {
  display: none;
}
li {
  display: flex;
  padding: 10px 0;
  &:first-child {
    padding-top: 0;
  }
  &:last-child {
    padding-bottom: 20px;
  }
  .name {
    flex: 1;
    font-size: 13px;
    overflow: hidden;
  }
  .progress {
    margin-left: 20px;
    font-size: 12px;
    color: #999;
  }
}
</style>
