<template>
  <div class="course-wrap">
  <van-list
      v-model="options.isLoading"
      :finished="options.finished"  
      :finished-text="finishedText"
      @load="load"
      :offset="5"
    >
    <Card class="card-container" v-for="(item, index) in videoData" @click.native="handleClick(item.ID)">
      <div class="left-wrap">
        <img 
        v-lazy="item.CoverMap"
        lazy-load
        alt="">
      </div>
      <div class="right-wrap">
        <p class="course-title ellips2">
          {{item.CurriculumName}}
        </p>
        <div class="course-middle">
          <span>{{item.VideoList.length}} 课程&nbsp;&nbsp;</span>
          <p>课程时长：{{item.result}}</p>
        </div>
        <div class="course-bottom">
          <span class="course-type">{{item.IsCharge===false?'免费':'￥'+(item.Price/100).toFixed(2)}}</span>
          <span>已有{{item.PurchasesSum + item.OrderSum}}人学习</span>
        </div>
      </div>
    </Card>
    </van-list>
  </div>
</template>

<script>
import Card from '../components/common/Card'
export default {
  name: "CourseList",
  components: {
    Card
  },
  props: {
    videoList: {
      type: Array,
      required: true
    },
    options: {
      type: Object,
      default: {
        finished: false,
        isLoading: false
      },
      required: true
    },
    finishedText: {
      type: String,
      default: "没有更多了~"
    }
  },
  data() {
    return {
      videoData: []
    }
  },
  methods: {
    handleClick(item){
      // 点击事件
      this.$emit('click', item);
    },

    load(){
      console.log("触发触底事件!");
      this.$emit('load');
    },

    formatSeconds(value) {
  　　let result = parseInt(value)
  　　let h = Math.floor(result / 3600) < 10 ? '0' + Math.floor(result / 3600) : Math.floor(result / 3600)
  　　let m = Math.floor((result / 60 % 60)) < 10 ? '0' + Math.floor((result / 60 % 60)) : Math.floor((result / 60 % 60))
  　　let s = Math.floor((result % 60)) < 10 ? '0' + Math.floor((result % 60)) : Math.floor((result % 60))
  　　result = `${h}:${m}:${s}`
  　　return result
   }
  },


  mounted(){

  },
  watch: {
    videoList: {
      handler: function(newValue, oldValue) {
        let testList = newValue.map((item)=>{
          item.Duration = 0;
          return item;
        })
        testList = newValue.map((item)=>{
          item.VideoList.forEach(item2=>{
            item.Duration += item2.Duration
          })
          // 计算视频时分秒并拓展到对象的属性上
          item.result = this.formatSeconds(item.Duration);
          console.log(item.result);
          return item;
        })
        this.videoData = newValue;
        console.log("this.videoData: ", this.videoData);
      },
      deep: true,
      immediate: true
    }
  }
}
</script>

<style lang="less" scoped>
 .course-wrap {
   .card-container {
     display: flex;
     padding: .34rem .2rem .26rem;
     min-height: 1.82rem;
     border-bottom: 1px solid #ebebeb;
     &:last-child {
       border-bottom: none;
     }
   }
   .left-wrap {
     margin-right: .4rem;
     img {
       display: block;
       width: 1.32rem;
       height: 1.32rem;
       border-radius: .2rem;
     }
   }

   .right-wrap {
     flex: 1;
     .course-title {
       line-height: .4rem;
       font-size: .3rem;
       color: #000;
     }
     .course-middle {
       margin-top: .1rem;
       font-size: .28rem;
       p {
         margin-top: .2rem;
       }
       
     }
     .course-bottom {
       display: flex;
       justify-content: space-between;
       margin-top: .2rem;
       font-size: .3rem;
       .course-type {
         color: #ec2f2f;
         font-size: .32rem;
       }
     }
   }
 }
</style>