<template>
  <div class="index">
    <div class="banner-block">
    <swiper :options="swiperOption" class="banner" ref="mySwiper">
      <swiper-slide v-for="(data,index) in bannerList" :key="index">
        <img class="banner" :src="data.url">
      </swiper-slide>
    </swiper>
    </div>
    <div class="btn-block">
      <div class="btn" @click="teacherQ2 = true">
        <img :src="imgUrl.record"/>
      </div>
      <div class="btn">
        <img :src="imgUrl.money"/>
      </div>
      <div class="btn">
        <img :src="imgUrl.listen"/>
      </div>
      <div class="btn">
        <img :src="imgUrl.more"/>
      </div>
    </div>
    <div class="class-block">
      <div class="title" @click="toGoodsList()">
        我的课程
        <img class="more" :src="imgUrl.indexMore"/>
      </div>
      <div class="lesson-block">
        <swiper :options="swiperOption2">
          <swiper-slide v-for="(data,index) in lessonList" :key="index">
            <div class="goods-block" @click="toMap(data)">
              <span class="tips" v-if="data.periods_info">
                开课时间：{{data.periods_info.start_at}}
              </span>
              <img :src="data.goods_info.goods_desc.img[0].url">
            </div>
          </swiper-slide>
          <swiper-slide>
            <div class="goods-block" @click="toMap(data)">
              <img :src="imgUrl.noMore">
            </div>
          </swiper-slide>
        </swiper>
      </div>
    </div>
    <mt-popup v-model="teacherQ2">
      <div class="teacher-block">
        <img :src="imgUrl.teacherBg" class="teacher-bg"/>
        <img :src="teacherDetail.qr" class="qr" v-if="teacherDetail">
        <img :src="imgUrl.qr" class="qr" v-if="!teacherDetail">
        <div class="content-text">
          <div class="title" v-if="teacherDetail">
            请长按识别图中二维码添加老师
          </div>
          <div class="title" v-if="!teacherDetail">
            请长按识别图中二维码关注公众号
          </div>
          以便我们能及时为您提供更好的学习体验
        </div>
        <div class="closeBtn" @click="teacherQ2 = false"></div>
      </div>
    </mt-popup>
    <bottom-tab></bottom-tab>
  </div>
</template>

<script>
  import 'swiper/dist/css/swiper.css'
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  import {getBannerListApi,getUserLessonApi,getTeacherApi} from "../service/api";
  import {IndexImage} from "../util/imgUrl";
  import bottomTab from './public/bottomTab';
  import { Toast } from 'mint-ui';
  export default {
    name: "index",
    components:{
      swiper,
      swiperSlide,
      bottomTab
    },
    data(){
      return {
        bannerList:[],
        teacherQ2:false,
        teacherDetail:null,
        imgUrl: IndexImage,
        swiperOption: {
          pagination: {
            el: '.swiper-pagination'
          }
        },
        swiperOption2:{
          width: window.innerWidth*0.95,
        },
        lessonList:[]
      }
    },
    methods:{
      initPage(){
        getBannerListApi().then(res=>{
          this.bannerList = res.list
        });
        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.lessonList = res
        });
        getTeacherApi().then(res=>{
          this.teacherDetail = res;
          this.teacherQ2 = true
        })
      },
      toGoodsList(){
        this.$router.push({name:'myGoodsList'})
      },
      toMap(data) {
        if (data.periods_info) {

          this.$router.push({
            name: 'map',
            query:
              {
                periods_id: data.periods_id,
                parent_category_id: data.periods_info.parent_category_id,
                course_type:data.goods_info.course_type
              }
          })
        }else{
          Toast('该课程暂无期数')
        }
      }
    },
    mounted(){
      this.initPage()
    }
  }
</script>

<style scoped lang="less">
@import "../util/public";
  .index{
    background: #eee;
    padding-bottom: 80px;
  }
  .banner-block{
    width: 375*@toVw;
    height: 200*@toVw;
    .banner{
      width: 375*@toVw;
      height: 200*@toVw;
    }
  }
  .teacher-block{
    position: relative;
    width: 74.66666667vw;
    background-color: rgba(0,0,0,0.7);
    .teacher-bg{
      width: 280*@toVw;
    }
    .qr{
      width: 138*@toVw;
      height: 138*@toVw;
      position: absolute;
      top:65 * @toVw;
      left: 70 * @toVw;
    }
    .content-text{
      width: 100%;
      text-align: center;
      position: absolute;
      top: 315 * @toVw;
      font-size:12 * @toVw;
      font-family:PingFang-SC-Medium;
      font-weight:500;
      color:rgba(153,153,153,1);
      line-height:23px;
      .title{
        color: #333;
        font-family:PingFang-SC-Medium;
        font-weight:500;
        margin-bottom: 5 * @toVw;
        font-size: 17*@toVw;
      }
    }
    .closeBtn{
      position: absolute;
      width: 30*@toVw;
      height: 30*@toVw;
      right: 8*@toVw;
      top: 8*@toVw;
    }
  }

  .btn-block{
    display: flex;
    padding: 12*@toVw 8*@toVw;
    background: white;
    justify-content: space-around;
    .btn{
      width: 68*@toVw;
      height: 68*@toVw;
      img{
        width: 100%;
      }
    }
  }
  .lesson-block{
    padding-bottom: 20px;
    .goods-block{
      position: relative;
      width: 335*@toVw;
      .tips{
        display: inline-block;
        font-size:12px;
        font-family:PingFang-SC-Bold;
        font-weight:normal;
        color:rgba(255,255,255,1);
        line-height:17px;
        padding: 2px 5px;
        position: absolute;
        right: 10px;
        top: 12px;
        background:rgba(245,166,35,1);
        border-radius:10px;
      }
      img{
        width: 335*@toVw;
        height: 236*@toVw;
        border-radius: 8px;
      }
    }

  }
  .class-block{
    margin-top: 10px;
    font-family: PingFang-SC-Medium;
    font-size: 18px;
    color: #333333;
    text-align: center;
    background: white;
    .title{
      padding: 8*@toVw;
      position: relative;
      .more{
        position: absolute;
        width: 30*@toVw;
        bottom: 10px;
        right: 20px;
      }
    }
  }
</style>
