<template>
  <div class="index">
    <div class="banner-block">
      <div class="unBanner" ref="toShopD" @click="toShop()" v-if="userCourse.start_periods_id<0">
        <img class="bgimg" :src="imgUrl.indexBanener1" alt="">
        <div class="content">
          <div class="title">
            <p style="font-size:20px;">唱唱启蒙英语</p>
            <p style="font-size:36px;">{{bannerData.course_title}}</p>
          </div>
          <div class="date" >
            <p style="font-size:12px;text-decoration:line-through;">原价：{{bannerData.original_price/100}}元</p>
            <p style="font-size:18px;">限时{{bannerData.current_price/100}}元领取</p>
          </div>
          <div class="triangle">
            <span >专属福利</span>
          </div>
        </div>
      </div>
      <div class="Banner" v-if="userCourse.start_periods_id>-1">
        <img class="bgimg" :src="imgUrl.indexBanener2" alt="">
        <div class="content">
          <img v-if="bannerData.qr" class="qr" :src="bannerData.qr" alt="">
          <div class="date">
            <p>开课时间：{{bannerData.start_at}}</p>
            <p v-if="bannerData.active_start_at">全勤打卡活动开始时间：{{bannerData.active_start_at}}</p>
          </div>
          <div class="triangle">
            <span v-if="bannerData.is_start_active==1">已开课</span>
            <span v-if="bannerData.is_start_active==0">待开课</span>
          </div>
        </div>
      </div>
    </div>
    <div class="btn-block">
      <div class="btn toPreview" ref="preview" @click="toPreview">
        <div v-if="!unlook" class="nolook">1</div>
        <img alt="课前预习" :src="imgUrl.nindexBtn3">
      </div>
      <div class="btn toBbda" ref="bbda" v-if="!userCourse.is_start_active" @click="toBbda($event)">
        <img alt="宝宝档案" :src="imgUrl.nindexBtn2">
      </div>
      <div class="btn toCollection" ref="collection" v-if="userCourse.is_start_active==1" @click="toCollection">
        <img alt="收藏夹" :src="imgUrl.nindexBtn1">
      </div>
      <div class="btn toTeacher" ref="teacher" @click="toTeacher">
        <img alt="名师介绍" :src="imgUrl.nindexBtn4">
      </div> 
    </div>
    <div class="contentBox med" v-if="medList.length>0">
      <div class="commonTitle">
        <span class="line"></span>
        <span class="title">磨耳朵</span>
        <span class="tip">每天10分钟 成长看得见</span> 
        <div @click="toHear" ref="med" class="more med">更多 <i class="iconfont icon-jiantouyou"></i> </div>
      </div>
      <div class="content">
        <div class="contentItem"  v-for="(item,index) in medList"  @click="goMed(index)">
          <img  :src="item.url" alt="">
          <div class="white"></div>
          <div class="text">
            <div class="title">{{item.title}}</div>
            <div class="enTitle">{{item.sub_title}}</div>
            <div class="lookData"><i class="iconfont icon-yanjing"></i>{{item.watch_num}}人</div>
          </div>
        </div>
      </div>
    </div>
    <div class="contentBox qm"  v-if="qmList.length>0" >
      <div class="commonTitle">
        <span class="line"></span>
        <span class="title">启蒙小课堂</span>
        <span class="tip">听名师传授英语启蒙方法</span> 
        <a href="https://appanqlfkth3717.h5.xiaoeknow.com/homepage/10" class="more">更多 <i class="iconfont icon-youjiantou"></i> </a>
      </div>
      <div class="content">
        <div class="contentItem" v-for="item in qmList" @click="goLink(item.link)">
          <img  :src="item.url"  alt="">
          <div class="text">
            <div class="title">{{item.title}}</div>
            <div class="line"></div>
            <div class="enTitle">{{item.sub_title}}</div>
            <div class="lookData"><i class="iconfont icon-yanjing"></i>{{item.watch_num}}人</div>
          </div>
        </div>
      </div>
    </div>
    <div class="contentBox mxxy" v-if="mxxyList.length>0">
      <div class="commonTitle">
        <span class="line"></span>
        <span class="title">明星学员</span>
        <span class="tip">百万家庭力荐</span> 
        <a href="https://mp.weixin.qq.com/mp/homepage?__biz=MzU2ODM5NjA5OA==&hid=4&sn=bb876d6313345925e86913bfe42671c6" class="more">更多 <i class="iconfont icon-youjiantou"></i> </a>
      </div>
      <div class="content">
        <div class="contentItem" v-for="item in mxxyList" @click="goLink(item.link)">
          <img v-lazy="item.url" alt="">
          <div class="text">
            <div class="title">{{item.title}}</div>
            <div class="lookData"><i class="iconfont icon-yanjing"></i>{{item.watch_num}}人</div>
          </div>
          <div class="tip">{{item.sub_title}}</div>
        </div>
      </div>
    </div>
    <bottom-tab ref="bottomTab"></bottom-tab>
    <audio-page ref="audioPage" v-if="showObj.audio.length>0" sc="1" v-show="showObj.show" :showObj="showObj"/>
  </div>
</template>

<script>
import {
  bannerListApi,
  getUserLessonApi,
  getTeacherApi,
  getCourseInfoApi
} from "../service/api";
import { IndexImage } from "../util/imgUrl";
import bottomTab from "./public/bottomTab";
import audioPage from './collection/audio'
import { Toast } from 'vant';
export default {
  name: "index",
  components: {
    bottomTab,
    audioPage
  },
  data() {
    let that = this;
    return {
      bannerList: [],
      teacherQ2: false,
      teacherDetail: null,
      imgUrl: IndexImage,
      user_id: null,
      newUrl: "",
      lessonList:[],
      medList:[],
      qmList:[],
      mxxyList:[],
      userCourse:{
        start_periods_id:'-1'
      },
      bannerData:{
        qr:"",
        start_at:'',
        active_start_at:'',
        is_start_active:''
      },
      showObj:{
        audio:[],
        audioIndex:0,
        show:false
      },
      unlook:false
    };
  },
  created() {
    // console.log(this.imgUrl)
    this.initPage();
  },
  mounted() {
    this.unlook = localStorage.getItem('unlook');
  },
  methods: {
    toShop(){
      this.$sa.quick('trackHeatMap',this.$refs.toShopD)
      this.$router.push({name:'buyDetail', query: {
         shopId: this.bannerData.goods_id,
        }},
     )
    },
    goMed(index){
      this.showObj.audioIndex = index;
      this.showObj.show = true
      this.$refs.audioPage.onPlay()
    },
    goLink(link){
      window.location.href = link
    },
    getBannerListApi() {
      let json = {
          limit: 4,
          page: 1
        };
      bannerListApi(2,{limit: 99,page: 1}).then(res=>{
        for(let i=0;i<2;i++){
          this.medList.push(res.list[i])
        }
        // this.medList = res.list
        this.showObj.audio = res.list
        bannerListApi(4,json).then(res=>{
        this.mxxyList = res.list
       })
      })
      bannerListApi(3,{limit:2,page:1}).then(res=>{
        this.qmList = res.list
      })
    },
    initPage() {
      this.getBannerListApi()
      getCourseInfoApi().then(res =>{
        localStorage.setItem('userCourse','');
        // debugger
        if(res.goods_id){
          // 无课
            this.getBannerListApi()
            this.userCourse = Object.assign({},res)
            this.userCourse.start_periods_id='-1'
            localStorage.setItem('userCourse',JSON.stringify(this.userCourse));
            this.bannerData = res
            this.$refs.bottomTab.setBtn()
        }else{
          if(res.is_start_active==1){
            // 已开课
            if(res.teacher_qr){
              this.bannerData.qr = res.teacher_qr
            }
              this.bannerData.start_at = res.periods_list[0].start_at
              this.bannerData.active_start_at = res.periods_list[0].active_start_at
              this.bannerData.is_start_active = res.is_start_active
            this.userCourse = Object.assign({},res)
             localStorage.setItem('userCourse',JSON.stringify(this.userCourse));
              this.$refs.bottomTab.setBtn()
            //  debugger
             if(!sessionStorage.getItem('frist')){
               sessionStorage.setItem('frist',true)
               this.$router.push({
                name: "map",
                query: {
                    periods_id: res.start_periods_id,
                    course_type: res.start_periods_course_type
                  }
                });
             }
          }else if(res.is_start_active==0){
             if(res.teacher_qr){
              this.bannerData.qr = res.teacher_qr
            }
              this.bannerData.start_at = res.periods_list[0].start_at
              this.bannerData.active_start_at = res.periods_list[0].active_start_at
              this.bannerData.is_start_active = res.is_start_active
            this.userCourse = Object.assign({},res)
             localStorage.setItem('userCourse',JSON.stringify(this.userCourse));
              this.$refs.bottomTab.setBtn()
            //  debugger
          }
        }
      })
    },
    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("该课程暂未开始");
      }
    },
    toHear(){
      // this.$sa.track("buttonClick", {
      //   tabTitle: "首页",
      //   moduleTitle: "功能按钮",
      //   buttonType: "板块按钮",
      //   buttonName: "磨耳朵"
      // });
      this.$sa.quick('trackHeatMap',this.$refs.med)
      this.$router.push({ name: "med" });
    },
    toCollection(){
      this.$sa.quick('trackHeatMap',this.$refs.collection)
      // debugger
      this.$router.push({ name: "collection" });
    },
    toTeacher(){
      this.$sa.quick('trackHeatMap',this.$refs.teacher)
      window.location.href = "https://www.changchangenglish.com/m-home.html"
    },
    toPreview(){
      this.$sa.quick('trackHeatMap',this.$refs.preview)
      localStorage.setItem('unlook','1');
       this.$router.push({ name: "preview" });
    },
    toBbda(){
      this.$sa.quick('trackHeatMap',this.$refs.bbda)
      this.$router.push({name:'bbda'})
    },
  }
};
</script>

<style scoped lang="less">
@import "../util/public";
.index {
  background: #eee;
  padding-bottom: 50 * @toVw;
}
.banner-block {
  width: 335 * @toVw;
  height: 246 * @toVw;
  position: relative;
  background: white;
  padding:14*@toVw 20*@toVw 20*@toVw;
  margin: 0;
  // box-sizing: border-box;
  .bgimg {
    position: absolute;
    width: 335 * @toVw;
    z-index: 0;
  }
  .content {
    position: absolute;
    z-index: 1;
    height: 246 * @toVw;
    width:335 * @toVw;
    border-radius: 16px;
    overflow: hidden;
  }
  .Banner{
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    background: white;
    height: 246 * @toVw;
    width:335 * @toVw;
    box-shadow: 1px 2px 5px 0px rgba(0,0,0,0.2);
    .qr{width: 126 * @toVw;
     position: absolute;left: 104* @toVw;top:20* @toVw ;
    }
    .date{color: white;text-align: center;position: absolute;bottom: 8*@toVw;width: 100%;font-size: 12px;}
    .triangle{background: #FFC53D;width:104* @toVw ;height: 104* @toVw;position: absolute;right: -46* @toVw; top: -62* @toVw; transform:rotate(-50deg);
      span{color: white;font-size: 14px;transform:rotate(50deg);position: absolute;top: 44* @toVw;font-size: 13px;}
     }
  }
  .unBanner{
    border-radius: 25px;
    overflow: hidden;
    height: 246 * @toVw;
    width:335 * @toVw;
    position: relative;
    box-shadow: 1px 2px 5px 0px rgba(0,0,0,0.2);
    .title{position: absolute;color: white;top: 35* @toVw;left: 20* @toVw;}
    .date{color: white;text-align: center;position: absolute;bottom: 30*@toVw;padding-top: 10* @toVw;border-radius:28 * @toVw;
    box-sizing: border-box;background:#FFC53D; animation:myfirst 3s linear infinite;
    left: 20* @toVw;font-size: 14px;width: 152* @toVw;height:56* @toVw ;
    @keyframes myfirst
    {
        0%   {transform:scale(1)}
        50% {transform:scale(1.1)}
        100% {transform:scale(1)}
    }
    }
    .triangle{background: #FFC53D;width:104* @toVw ;height: 104* @toVw;position: absolute;right: -46* @toVw; top: -62* @toVw; transform:rotate(-50deg);
      span{color: white;font-size: 14px;transform:rotate(85deg);position: absolute;top: 54* @toVw;font-size: 13px;bottom: 74* @toVw;}
     }
  }
}
.contentBox{
  padding: 10 * @toVw 20 * @toVw;
  background: white;
  margin: 10px 0;
  .commonTitle{
    display: flex;
    vertical-align: top;
    .line{height: 20px;width: 4px;border-radius:2px;margin-right: 10px;margin:auto 10px auto 0;}
    .more{height: 33px;line-height:43px;font-size: 12px;color: #666666;flex:1;text-align:right;overflow: hidden;
    .iconfont{font-size: 14px;color: #666666;}
     }
    .title{font-size: 24px;height: 33px;line-height: 33px;display: inline-block;margin-right: 10px;font-weight: bold;}
    .tip{font-size: 12px;color: #999999;height: 33px;display: inline-block;line-height: 43px;overflow: hidden;}
  }
  .lookData{font-size: 12px;
  .iconfont{font-size: 12px;}
  }
}
.med{
  .commonTitle{
    .line{
    background: #4A90E2;
   }
  }
  .content{
    display: flex;
    text-align: center;
    flex-wrap:wrap;
    .contentItem{
    width: 50%;
    height: 191 * @toVw;
    margin-top: 18px;
    position: relative;
    img{width: 107 * @toVw;height:107 * @toVw;position: absolute;top: 0;left: 27 * @toVw;border-radius:53 * @toVw ; }
    .white{position: absolute;background: white;width: 20px;height: 20px;border-radius: 10px;top:43.5 * @toVw ; left: 70.5 * @toVw;}
    .text{
      width: 161 * @toVw;
      height: 161 * @toVw;
      margin-top: 30 * @toVw;
      color: #999999;
      padding-top: 90 * @toVw;
      box-shadow: 1px 2px 5px 0px rgba(0,0,0,0.2);
      border-radius:16px;
      box-sizing: border-box;
      .title{font-size: 14px;color: black;}
      .enTitle{font-size: 12px;line-height: 17px;}
    }
    }
  }
}
.qm{
  .commonTitle{
    .line{
    background: #FF7875;
   }
  }
  .content{
    text-align: center;
    .contentItem{
    margin-top: 18px;
    position: relative;
    box-shadow: 1px 2px 5px 0px rgba(0,0,0,0.2);
    border-radius:16px;
    overflow: hidden;
    img{width: 335 * @toVw;height:150 * @toVw;  }
      .text{
        display: flex;
        width: 335 * @toVw;
        color: #999999;
        padding: 19 * @toVw 15 * @toVw;
        box-sizing: border-box;
        .title{font-size: 12px;color: black;}
        .line{border-right:1px solid #999999;height: 20px;margin: 0 10px; }
        .lookData{flex: 1;text-align: right;}
        .enTitle{font-size: 12px;}
      }
    }
  }
}
.mxxy{
  .commonTitle{
    .line{
    background: #4A90E2;
   }
  }
  .content{
    display: flex;
    text-align: center;
    flex-wrap:wrap;
    justify-content: space-between;
    .contentItem{
    width: 162*@toVw;
    margin-top: 18px;
    position: relative;
    box-shadow: 1px 2px 5px 0px rgba(0,0,0,0.2);
    border-radius:16px;
    overflow: hidden;
    padding-bottom: 18px;
    img{width:100%;  }
    .text{
      color: #999999;
      box-sizing: border-box;
      padding: 10px 15px 0;
      display: flex;
      justify-content: space-between;
      .title{font-size: 14px;color: black;text-align: left;width: 50%;}
      .lookData{}
    }
    .tip{color: #999999;padding: 0 15px ;text-align: left;margin-top: 4px;font-size: 12px;}
    }
  }
}
.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: 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: 0 20 * @toVw 12 * @toVw;
  background: white;
  justify-content: space-around;
  width: 335 * @toVw;
  .btn {
    // width: 160 * @toVw;
    height:44 * @toVw;
    border-radius: 12px;
    box-shadow: 1px 2px 5px 0px rgba(0,0,0,0.2);
    position: relative;
    .nolook{position: absolute;top: -5px;left: -5px; background: #ff4d4f;width: 16px;height: 16px;color: white;border-radius: 8px;text-align: center;font-size: 12px;line-height: 16px;}
    img {
      width: 105* @toVw;
      height: 44* @toVw;
    }
  }
}
.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;
    }
  }
}
*{margin: 0;}
</style>