<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}}
            <template v-if="subItem.free">（免费）</template>
          </div>
          <div class="progress" v-if="showProgress">{{ progressText(subItem.video_progress) }}</div>
        </li>
      </ul>
    </van-collapse-item>
  </van-collapse>
</template>

<script>
export default {
  props: {
    courseId: String,
    data: { type: Array, default: () => [] },
    showProgress: { type: Boolean, default: false }
  },
  data() {
    return {
      activeNames: []
    }
  },
  computed: {
    isWeapp() {
      return this.$store.state.isWeapp
    },
    isVip() {
      return this.$store.state.isVip
    }
  },
  methods: {
    progressText(value) {
      value = parseInt(value)
      if (value === 0) {
        return this.isVip ? '未开始' : '未开通'
      }
      if (value === 100) {
        return '已学完'
      }
      return `已学${value}%`
    },
    onClick(data) {
      if (this.isWeapp) {
        let url = `/pages/course/item?id=${this.courseId}&chapter_id=${data.id}`
        // 未开通
        if (!data.free && !this.isVip) {
          url = `/pages/web/index?src=${window.location.origin}/pay`
        }
        wx.miniProgram.navigateTo({ url })
      } 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>
