<template>
  <div class="main-list" v-show="loaded">
    <ul v-if="list.length">
      <li v-for="item in list" :key="item.course_id" @click="onClick(item)">
        <div class="name">{{item.course_name}}</div>
        <div class="progress">{{item.video_progress | progressText}}</div>
      </li>
    </ul>
    <template v-else>
      <slot name="empty"></slot>
    </template>
  </div>
</template>
<script>
import * as api from '../api'
export default {
  name: 'BuyCourseList',
  data() {
    return {
      loaded: false,
      list: []
    }
  },
  computed: {
    isWeapp() {
      return this.$store.state.isWeapp
    }
  },
  filters: {
    progressText(value) {
      value = parseInt(value)
      return value === 100 ? '已学完' : `${value}%`
    }
  },
  methods: {
    getList() {
      api.getCourseList().then(response => {
        this.loaded = true
        this.list = response
      })
    },
    onClick(data) {
      if (this.isWeapp) {
        wx.miniProgram.navigateTo({
          url: `/pages/web/index?src=${window.location.origin}/course/learn/${data.course_id}`
        })
      } else {
        this.$router.push({ name: 'courseLearnItem', params: { id: data.course_id } })
      }
    }
  },
  beforeMount() {
    this.getList()
  }
}
</script>

<style lang="scss" scoped>
.main-list li {
  display: flex;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid #f1f1f1;
  &:last-child {
    border-bottom: 0;
  }
  .name {
    flex: 1;
    font-size: 15px;
    color: #222;
  }
  .progress {
    margin-left: 20px;
    font-size: 12px;
    color: #999;
  }
}
</style>
