<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+'?imageslim'" @click="toBannerUrl(data)">
        </swiper-slide>
      </swiper>
    </div>
    <div class="btn-block">
      <div class="btn" @click="showTeacher()">
        <img :src="imgUrl.record">
      </div>
      <div class="btn" @click="toOld($event)">
        <img :src="imgUrl.oldChange">
      </div>
      <div class="btn" @click="toHear">
        <img :src="imgUrl.listen">
      </div>
      <div class="btn">
        <img :src="imgUrl.more">
      </div>
    </div>
    <div class="class-block">
      <div class="title" @click="toGoodsList()" v-if="lessonList.length > 0">
        我的课程
        <img class="more" :src="imgUrl.indexMore">
      </div>
      <div class="title" v-if="lessonList.length < 1">我的课程</div>
      <div class="lesson-block">
        <swiper :options="swiperOption2" ref="mySwiper2">
          <swiper-slide v-for="(data,index) in lessonList" :key="index">
            <div class="goods-block" @click="toMap(data)">
              <span class="tips" v-if="data.start_at">开课时间:{{data.start_at}}</span>
              <img :src="data.imgLesson+'?imageslim'">
            </div>
          </swiper-slide>
          <swiper-slide>
            <div class="goods-block">
              <img :src="imgUrl.noMore">
            </div>
          </swiper-slide>
        </swiper>
      </div>
    </div>
    <mt-popup v-model="teacherQ2">
      <div class="teacher-block">
        <div class="userNo">学员号:{{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>
  </div>
</template>

<script>
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 'vant';
export default {
  name: "index2",
  components: {
    swiper,
    swiperSlide,
    bottomTab
  },
  data() {
    let that = this;
    return {
      bannerList: [],
      teacherQ2: false,
      teacherDetail: null,
      imgUrl: IndexImage,
      user_id: null,
      newUrl: "",
      swiperOption: {
        pagination: {
          el: ".swiper-pagination"
        }
      },
      swiperOption2: {
        width: window.innerWidth * 0.95,
        on: {
          resize: function() {
            this.params.width = window.innerWidth * 0.95;
            this.update();
          }
        }
      },
      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")).user_id;
      getBannerListApi().then(res => {
        this.bannerList = res.list;
      });
      getNewApi().then(res => {
        this.newUrl = res[0].desc;
      });
      getUserLessonApi().then(res => {
        let is_view_course = "没有课程";
        if (res && res.length > 0) {
          is_view_course = "体验课";
          for (let i = 0; i < res.length; i++) {
            if (res[i].course_type === 0) {
              is_view_course = "正式课";
            }
          }
          this.$sa.track("viewHomepage", {
            is_view_course: is_view_course
          });
        }
        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;
}
.banner-block {
  width: 375 * @toVw;
  height: 200 * @toVw;
  position: relative;
  .notice {
    position: absolute;
    bottom: 0;
    background: rgba(255, 238, 7, 0.8);
    padding: 5px;
    color: #666;
    font-size: 14px;
    z-index: 5;
  }
  .banner {
    width: 375 * @toVw;
    height: 200 * @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: 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>