<template>
  <div class="my-goods-list">
    <div v-for="data in goodsList" :key="data.id" class="card-block"  @click="toMap(data)">
      <img class="banner" :src="data.imgLesson">
      <div class="content">
        {{data.goods_name}}
        <div class="start-time">
          开课时间：{{data.start_at}}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {getUserLessonApi} from "../service/api";
  import {IndexImage} from "../util/imgUrl";
  import { Toast } from 'vant';
  export default {
    name: "myGoodsList",
    data(){
      return {
        goodsList:[],
        imgUrl:IndexImage
      }
    },
    mounted(){
      this.initPage()
    },
    methods:{
      initPage(){
        getUserLessonApi().then(res=>{
          this.goodsList = res
        })
      },
      dateParse(dateString){
        let SEPARATOR_BAR = "-";
        let SEPARATOR_SLASH = "/";
        let SEPARATOR_DOT = ".";
        let dateArray;
        if(dateString.indexOf(SEPARATOR_BAR) > -1){
          dateArray = dateString.split(SEPARATOR_BAR);
        }else if(dateString.indexOf(SEPARATOR_SLASH) > -1){
          dateArray = dateString.split(SEPARATOR_SLASH);
        }else{
          dateArray = dateString.split(SEPARATOR_DOT);
        }
        return new Date(dateArray[0], dateArray[1]-1, dateArray[2]);
      },
      dateCompare(dateString, compareDateString){
        let dateTime = dateString.getTime();
        let compareDateTime = compareDateString.getTime();
        if(compareDateTime > dateTime){
          return 1;
        }else if(compareDateTime == dateTime){
          return 0;
        }else{
          return -1;
        }
      },
      toMap(data){
        this.$sa.track('buttonClick',{
          tabTitle:'课程列表',
          moduleTitle:'课程',
          buttonType:'课程',
          buttonName:'进入课程'
        });
        if(this.dateCompare(new Date(),this.dateParse(data.start_at))<1) {
          this.$router.push({
            name: 'map',
            query:
              {
                periods_id: data.periods_id,
                parent_category_id: data.parent_category_id,
                course_type: data.course_type
              }
          })
        }else{
          Toast('该课程暂未开始')
        }
      }
    }
  }
</script>

<style scoped lang="less">
  @import "../util/public";
.my-goods-list{
  height: 100%;
  overflow: auto;
  padding: 20*@toVw 0;
  .card-block{
    width: 335* @toVw;
    box-shadow:0px 2px 4px 0px rgba(191,191,191,0.5);
    border-radius:8*@toVw;
    margin-bottom: 10 * @toVw;
    .banner{
      width: 100%;
      height: 236 * @toVw;
      border-radius:8*@toVw;
    }
    .content{
      font-size:20 * @toVw;
      font-family:PingFang-SC-Medium;
      font-weight:normal;
      color:rgba(51,51,51,1);
      padding: 8 * @toVw;
      line-height:28 * @toVw;
      .start-time{
        font-size:12 * @toVw;
        font-family:PingFang-SC-Medium;
        font-weight:normal;
        color:rgba(51,51,51,1);
        line-height:17 * @toVw;
      }
    }
  }
}
</style>