<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.goods_info.goods_desc.img[0].url">
      <div class="content">
        {{data.goods_info.name}}
        <div class="start-time">
          开课时间：{{data.periods_info.start_at}}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {getUserLessonApi} from "../service/api";

  export default {
    name: "myGoodsList",
    data(){
      return {
        goodsList:[]
      }
    },
    mounted(){
      this.initPage()
    },
    methods:{
      initPage(){
        getUserLessonApi().then(res=>{
          res.forEach(i=>{
            i.goods_info.desc = JSON.parse(i.goods_info.desc);
            i.goods_info.share_desc = JSON.parse(i.goods_info.share_desc);
            i.goods_info.goods_desc = JSON.parse(i.goods_info.goods_desc)
          });
          this.goodsList = res
        })
      },
      toMap(data){
        this.$router.push({
          name:'map',
          query:
            {
              periods_id:data.periods_id,
              parent_category_id:data.periods_info.parent_category_id
            }
        })
      }
    }
  }
</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;
    .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>