<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="onClick(subItem)">
          <div class="name">{{subItem.name}}</div>
          <div class="progress">{{subItem.video_progress | progressText}}</div>
        </li>
      </ul>
    </van-collapse-item>
  </van-collapse>
</template>

<script>
export default {
  props: {
    courseId: String,
    data: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      activeNames: []
    }
  },
  computed: {
    isWeapp() {
      return this.$store.state.isWeapp
    }
  },
  filters: {
    progressText(value) {
      value = parseInt(value)
      return value === 100 ? '已学完' : `${value}%`
    }
  },
  methods: {
    onClick(data) {
      if (this.isWeapp) {
        wx.miniProgram.navigateTo({
          url: `/pages/course/item?id=${this.courseId}&chapter_id=${data.id}`
        })
      } else {
        window.alert('请在微信小程序中打开')
      }
    }
  }
}
</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 {
    font-size: 12px;
  }
}
</style>
