<template>
  <div class="index">
    <div class="user-block" v-if="user_id">
      <img :src="user_id.avatar">
      <div class="name">
        <div class="title">{{user_id.nickname}}</div>
        <div>学员号：{{user_id.user_id}}</div>
      </div>
    </div>
    <div class="banner-block">
      <swiper :options="swiperOption" class="banner" v-if="bannerList.length>1" ref="mySwiper">
        <swiper-slide v-for="(data,index) in bannerList"  :key="index">
          <img :src="data.url+'?imageslim'" @click="toBannerUrl(data)">
        </swiper-slide>
      </swiper>
    </div>
    <div class="btn-block">
      <div class="btn" @click="showTeacher()">
        <img :src="imgUrl.record"/>
        <div>
          专属老师
        </div>
      </div>
      <div class="btn" @click="toHear">
        <img :src="imgUrl.listen"/>
        <div>磨耳朵</div>
      </div>
      <div class="btn" @click="toOld($event)">
        <img :src="imgUrl.oldChange"/>
        <div>晚安电台</div>
      </div>
      <div class="btn">
        <img :src="imgUrl.more"/>
        <div>敬请期待</div>
      </div>
    </div>
    <div class="class-block">

      <div class="lesson-block" v-if="!lessonList || lessonList.length < 1" @click="showTeacher()">
          <div class="text">
            <img  class="text-image-no" :src="noLessonTextUrl"/>
          </div>
          <img class="goMap" :src="noLessonIconUrl">
      </div>
      <div class="lesson-block" v-for="(data,index) in lessonList" :key="index">
        <div @click="toMap(data)" v-if="data.lesson_name">
        <img  class="text-image" :src="newLessonUrl"/>
        <div class="text">
          {{data.lesson_name.slice(0,10)}}
          <br>
          {{data.lesson_name.slice(10,data.lesson_name.length)}}
        </div>
        <img class="goMap" :src="goMapUrl">
        </div>
        <div @click="toMap(data)" v-if="!data.lesson_name">
          <div class="noLesson">
            课程尚未开始
          </div>
        </div>
      </div>
    </div>
    <mt-popup v-model="teacherQ2">
      <div class="teacher-block">
        <div class="userNo" v-if="user_id">
          学员号：{{user_id.user_id}}
        </div>
        <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>
    <guide-page></guide-page>
  </div>
</template>

<script>
  import guidePage from './guide/index'
  import 'swiper/dist/css/swiper.css'
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  import {getBannerListApi,getUserLessonApi,getTeacherApi,getNewApi,getRedirectApi} from "../service/api";
  import {IndexImage} from "../util/imgUrl";
  import bottomTab from './public/bottomTab';
  import { Toast } from 'mint-ui';
  import goMapUrl from '../assets/goMap.png'
  import newLessonUrl from '../assets/newLesson.png'
  import noLessonTextUrl from '../assets/noLessonText.png'
  import noLessonIconUrl from '../assets/noLessonIcon.png'
  export default {
    name: "index",
    components:{
      swiper,
      swiperSlide,
      bottomTab,
      guidePage
    },
    data(){
      let that = this;
      return {
        noLessonTextUrl:noLessonTextUrl,
        noLessonIconUrl:noLessonIconUrl,
        bannerList:[],
        newLessonUrl:newLessonUrl,
        goMapUrl:goMapUrl,
        teacherQ2:false,
        teacherDetail:null,
        imgUrl: IndexImage,
        user_id:null,
        newUrl:'',
        swiperOption: {
          loop : true,// 循环
          swiperOptionLesson:{
            slidesPerView:'auto',
          },
          autoplay: {// 自动播放
            disableOnInteraction: false,
          },
          // 3d效果
          effect:'coverflow',
          coverflowEffect: {
            rotate: 0,
            stretch: 0,
            depth: 40,
            modifier: 6,
            slideShadows : false
          },
        },
        lessonList:[]
      }
    },
    methods:{
      showTeacher(){
        this.teacherQ2 = true
        this.$sa.track('buttonClick',{
          tabTitle:'首页',
          moduleTitle:'功能按钮',
          buttonType:'板块按钮',
          buttonName:'我的老师'
        });
      },
      toOld(e){
        this.$sa.track('buttonClick',{
          tabTitle:'首页',
          moduleTitle:'功能按钮',
          buttonType:'板块按钮',
          buttonName:'晚安电台'
        });
        // this.$sa.quick('trackHeatMap',e.srcElement)
        window.location.href = 'https://appanqlfkth3717.h5.xiaoeknow.com/content_page/eyJ0eXBlIjozLCJyZXNvdXJjZV90eXBlIjoiIiwicmVzb3VyY2VfaWQiOiIiLCJwcm9kdWN0X2lkIjoicF81YjE0YjdjMjdjNDZiX2Rvd0xicDc1IiwiYXBwX2lkIjoiYXBwYU5RTGZrdEgzNzE3In0'
      },
      toBannerUrl(data){
        this.$sa.track('adClick',{
          adTitle:data.title,
          adID:data.link,
          adPage:'首页'
        });
        window.location.href = data.link
      },
      toHear(){
        this.$sa.track('buttonClick',{
          tabTitle:'首页',
          moduleTitle:'功能按钮',
          buttonType:'板块按钮',
          buttonName:'磨耳朵'
        });
        this.$router.push({name:'collection'})
      },
      toNewUrl(){
        this.$sa.track('buttonClick',{
          tabTitle:'首页',
          moduleTitle:'课程',
          buttonType:'没课banner',
          buttonName:'没有更多课程'
        });
        window.location.href = this.newUrl
      },
      initPage(){
        getRedirectApi().then(res=>{
          if(res && res !== "" && res !==null){
            window.location.href = res
          }
        });
        this.user_id=JSON.parse(localStorage.getItem('userDesc'));
        getBannerListApi().then(res=>{
          this.bannerList = res.list
        });
        getNewApi().then(res=>{
          this.newUrl = res[0].desc
        });
        getUserLessonApi().then(res=>{
          this.lessonList = res
        });
        getTeacherApi().then(res=>{
          if(res.id){
            this.teacherDetail = res;
            if(localStorage.getItem('qrType') !== 'hidden'){
              localStorage.setItem('qrType','hidden');
              if(window.innerWidth < window.innerHeight ){
                this.teacherQ2 = true
              }
            }
          }
        })
      },
      toGoodsList(){
        this.$sa.track('buttonClick',{
          tabTitle:'首页',
          moduleTitle:'课程',
          buttonType:'板块按钮',
          buttonName:'我的课程'
        });
        this.$router.push({name:'myGoodsList'})
      },
      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('该课程暂未开始')
        }
      }
    },
    mounted(){
      this.initPage()
    }
  }
</script>

<style scoped lang="less">
  @import "../util/public";
  .index{
    background: #eee;
    padding-bottom: 50*@toVw;
  }
  .user-block{
    background: white;
    padding: 10*@toVw;
    .name{
      margin: 10*@toVw 10*@toVw 0 10*@toVw;
      font-size:12*@toVw;
      font-family:PingFang-SC-Regular;
      font-weight:400;
      color:rgba(102,102,102,1);
      .title{
        font-size:16*@toVw;
        font-family:PingFang-SC-Medium;
        font-weight:600;
        color:rgba(0,0,0,1);
        margin-bottom: 5*@toVw;
      }
    }
    img{
      float: left;
      margin: 10*@toVw;
      width: 40*@toVw;
      height: 40*@toVw;
      border-radius: 100*@toVw;
    }
  }
  .banner-block{
    background: white;
    padding: 2*@toVw 0;
    width: 375*@toVw;
    position: relative;
    .notice{
      position: absolute;
      bottom: 0;
      background: rgba(255, 238, 7, 0.8);
      padding: 5*@toVw;
      color: #666;
      font-size: 14*@toVw;
      z-index: 5;

    }
    .banner{
      width: 375*@toVw;
      text-align: center;
      img{
        width: 335*@toVw;
        border-radius: 8*@toVw;
      }
    }
  }
  .teacher-block{
    position: relative;
    width: 74.66666667vw;
    background-color: rgba(0,0,0,0.7);
    .userNo{
      position: absolute;
      top: -40 * @toVw;
      width: 100 * @toVw;
      text-align: center;
      left: 50%;
      margin-left: -50 * @toVw;
      border-radius: 118 * @toVw;
      background: white;
      padding: 8 * @toVw;
    }
    .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:23*@toVw;
      .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;
      text-align: center;
      font-size:14*@toVw;
      font-family:PingFang-SC-Medium;
      font-weight:500;
      color:rgba(102,102,102,1);
      img{
        width: 32*@toVw;
      }
    }
  }
  .lesson-block{
    background: #406254;
    width: 295*@toVw;
    height: 87*@toVw;
    padding: 10*@toVw;
    margin: auto auto 30*@toVw auto;
    border: 6*@toVw solid #B9946E;
    border-radius: 12*@toVw;
    position: relative;
    font-size:14*@toVw;
    font-family:PingFang-SC-Bold;
    font-weight:bold;
    color:rgba(255,255,255,1);
    line-height:20*@toVw;
    .noLesson{
      height: 84*@toVw;
      line-height: 87*@toVw;
      text-align: center;
    }
    .text-image-no{
      margin-top: 20*@toVw;
      width: 280*@toVw;
    }
    .text{
      margin-left: 10*@toVw;
      margin-top: 10*@toVw;
    }
    .text-image{
      width: 67*@toVw;
      margin-left: 10*@toVw;
    }
    .goMap{
      width: 71*@toVw;
      position: absolute;
      bottom: -20*@toVw;
      right: -17*@toVw;
    }
  }
  .class-block{
    background: white;
    padding: 10*@toVw 0 20*@toVw 0;
  }


</style>
