<template>
  <div>
    <van-actionsheet v-model="actionsheetShow" :actions="actions" @select="onSelect"/>
    <div class="course_title" @click="actionsheetShow=true">
      {{secActions.name}}
      <i class="iconfont icon-below-s"></i>
    </div>
    <!--竖屏 课程-->
    <div class="lesson-block">
      <!-- <div v-if="noLesson" class="noLesson">
        <img :src="errorURL">
        <div>暂无课程</div>
      </div>-->
      <div v-if="lessonList1.length" class="card-block">
        <img :src="lessonList1[0].cover+'?imageslim'">
        <!-- {{lessonList1[0].name}} -->
        <div  :class="'card-li cid'+item.id"  v-for="(item,x) in lessonList1" :key="x"  @click="showDia(item,x+1)"  >
          <div :class="{textblock:true,gray:!item.open}">
            <div class="title">{{item.name | substr10}}</div>
            <div class="tips">
              <span v-if="item.open&&x==0">点击看一看 英语启蒙很轻松</span>
              <span v-if="item.open&&x==1">每天10分钟 英语变母语</span>
              <span v-if="item.open&&x==2">抓住宝宝英语启蒙黄金期</span>
              <span v-if="!item.open">学完上节课得2颗星后即可解锁~</span>
            </div>
          </div>
          <div class="star-block">
            <img class="star-img" :src="star_act" v-for="s in item.star_num">
            <img class="star-img" :src="star_def" v-for="s in 3-item.star_num">
          </div>
          <div class="icon-block">
            <i
              :class="{
              map:true,
              right:item.open,
              clock:!item.open
              }"
            ></i>
          </div>
        </div>
      </div>
      <div  class="couponBox"  @click="tobuy"  ref="couponBox"  v-if="couponInfo.coupon_list&&couponInfo.coupon_list.length&&lessonList2.length&&!userCourse.periods_list"  >
        <img class="bg" :src="couponBg" alt>
        <div class="content">
          <div class="top" v-if="couponInfo.coupon_list[0].deadline_at!='0000-00-00 00:00:00'">
            <div class="title">
              恭喜您获得
              <span>{{couponInfo.coupon_list[0].money/100}}元</span> 抵用券
            </div>
            <div class="text-content last">
              剩余
              <span>{{h}}</span>:
              <span>{{m}}</span>:
              <span>{{s}}</span>
              到期
            </div>
          </div>
          <div
            class="top untime"
            v-if="couponInfo.coupon_list[0].deadline_at=='0000-00-00 00:00:00'"
          >
            <div class="title">
              恭喜您获得
              <span>{{couponInfo.coupon_list[0].money/100}}元</span> 抵用券
            </div>
          </div>
          <div class="bottom">
            <img class="logo" :src="couponInfo.goods_desc.img[0].url" alt>
            <div class="center">
              <p class="title">{{couponInfo.goods_desc.course_title}}</p>
              <p class="tip">{{couponInfo.goods_desc.tips}}</p>
              <div class="price">
                券后价
                <span
                  class="now"
                >¥{{(couponInfo.current_price-couponInfo.coupon_list[0].money)/100}}</span>&nbsp;&nbsp;
                <span class="old">¥{{couponInfo.current_price/100}}</span>
              </div>
            </div>
            <div class="btn">立即抢</div>
          </div>
        </div>
      </div>
      <div v-if="lessonList2.length>0&&card2" class="card-block card2">
        <img :src="lessonList2[0].cover+'?imageslim'">
        <!-- 一元解锁,暂不使用 -->
        <div  class="shadowbox"  ref="shadowbox"   @click="goToBuyPage"  v-if="!lessonList2[0].open&&oneGoodinfo.goods_desc">
          <div class="shadow"></div>
          <div class="content">
            <p>更多课程福利</p>
            <div>
              {{oneGoodinfo.goods_desc.tips}}&nbsp;&nbsp;
              <span>1元解锁</span>
            </div>
          </div>
        </div>
        <div  :class="'card-li cid'+item.id"  v-for="(item,x) in lessonList2" @click="showDia(item,x+1)">
          <div :class="{textblock:true,gray:!item.open}">
            <div class="title">{{item.name | substr10}}</div>
            <div class="tips">
              <span v-if="item.open&&x==0">比动画片更有趣哦</span>
              <span v-if="item.open&&x==1">让0基础宝宝开口说英语</span>
              <span v-if="item.open&&x==2">继续坚持 学无止境</span>
              <span v-if="!item.open">学完上节课得2颗星后即可解锁~</span>
            </div>
          </div>
          <div class="star-block" v-if="item.star_num!=null">
            <img class="star-img" :src="star_act" v-for="s in item.star_num">
            <img class="star-img" :src="star_def" v-for="s in 3-item.star_num">
          </div>
          <div class="icon-block">
            <i :class="{
              map:true,
              right:item.open,
              clock:!item.open}"></i>
          </div>
        </div>
      </div>
    </div>
    <!-- <div v-if="!secActions.is_start_course" class="unStart">
      <img :src="mok4" alt>
      <p>您的课程尚未开始</p>
      <div>课程开始时间:{{secActions.start_at}}</div>
    </div>-->
    <van-popup v-model="popupVisible">
      <div v-if="thisLesson" class="popup-block">
        <i class="map close" @click="popupVisible=false"></i>
        <div class="header" :style="{backgroundImage:`url(${diaBGI})`}">
          <div class="title">{{thisLesson.title}}</div>
          <div class="tips" v-if="thisLesson.content.tips">{{thisLesson.content.tips.content}}</div>
          <div class="tips" v-if="!thisLesson.content.tips">DAY {{thisLesson.day}}</div>
        </div>
        <div class="content" v-if="thisLesson.content.tips">
          <div class="tips-title">{{thisLesson.content.tips.title1}}</div>
          <div class="title-content">
            <ul>
              <li style="text-align: center" v-for="data in splitContent">{{data}}</li>
            </ul>
          </div>
          <div class="tips-title">{{thisLesson.content.tips.title2}}</div>
          <div class="title-content">{{thisLesson.content.tips.title2_content}}</div>
        </div>
        <div class="content" v-if="!thisLesson.content.tips">
          <div style="color: #cccccc;padding: 21.3333vw 0;font-size: 5.3333vw;">快去开始课程吧!</div>
        </div>
        <div>
          <i class="map goLesson" @click="goDetail()"></i>
        </div>
      </div>
    </van-popup>
    <van-popup class="liuyudialog" v-model="liuyucoolie" position="top" :overlay="true">
      <div class="content">
        <img class="main" :src="imgUrl.popup_img" alt>
        <div class="textBox">
          <p>儿童节感恩回馈!</p>
          <p>给宝贝送专属心意好礼!</p>
        </div>
        <div @click="toActivity" ref="toActivity" class="btn toActivity">立即参与</div>
      </div>
    </van-popup>
    <div @click="liuyiBtn" v-if="userCourse.goods_id!=null&&userCourse.goods_id>0&&liuyuActivity" ref="liuyiBtn" class="liuyiBtn">
      <img :src="imgUrl.popup_btn" alt>
    </div>
    <bottom-tab></bottom-tab>
  </div>
</template>

<script>
import {
  getCourseListApi,
  getLessonDetailApi,
  getLessonListApi,
  getCourseInfoApi,
  getAutomationApi,
  getAutomationCouponApi,
  payApi,
  getGoodsDetailApi,
  getCouponListApi
} from "../../service/api";
import star_act from "../../assets/newLesson/star_act.png";
import star_def from "../../assets/newLesson/star_def.png";
import diaBGI from "../../assets/newLesson/diaBG.png";
import couponBg from "../../assets/bg_coupon@2x.png";
import mok4 from "../../assets/newLesson/mok4.png";
import { IndexImage } from "../../util/imgUrl";
// import cookie from "../../util/cookie";
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import { Toast, Actionsheet } from "vant";
import localStorageFn from "../../util/localStorage";
import bottomTab from "../public/bottomTab";
import errorURL from "../../assets/error.png";

export default {
  name: "mapDefault",
  components: {
    swiper,
    swiperSlide,
    bottomTab,
    [Actionsheet.name]: Actionsheet
  },
  data() {
    let that = this;
    return {
      liuyucoolie: false,
      imgUrl: IndexImage,
      actions: [],
      secActions: {},
      actionsheetShow: false,
      star_act: star_act,
      star_def: star_def,
      shopType: this.$route.query.course_type,
      diaBGI: diaBGI,
      mok4: mok4,
      goodsID: "",
      themeName: "",
      course_id: "",
      push_time: "",
      course_name: "",
      periods_id: this.$route.query.periods_id,
      parent_category_id: this.$route.query.parent_category_id,
      unitList: [],
      more: false,
      errorURL: errorURL,
      couponBg: couponBg,
      popupVisible: false,
      lessonList: [],
      lessonList1: [],
      lessonList2: [],
      lesson: "",
      classID: "",
      noLesson: false,
      hpLessonList: [],
      thisLesson: null,
      card2: true,
      swiperOption: {
        width: window.innerWidth * 0.25,
        on: {
          slideChangeTransitionStart: function() {
            if (
              this.activeIndex >= that.swiper.slides.length - 4 &&
              that.more
            ) {
              that.swiper.slidePrev();
            }
          },
          resize: function() {
            this.params.width = window.innerWidth * 0.25;
            this.update(true);
          }
        },
        pagination: {
          el: ".swiper-pagination"
        }
      },
      swiperOption2: {
        slidesPerView: 5,
        navigation: {
          nextEl: ".banner-right",
          prevEl: ".banner-left"
        },
        on: {
          slideChangeTransitionStart: function() {
            if (
              this.activeIndex == that.swiper2.slides.length - 5 &&
              that.more
            ) {
              that.swiper2.slidePrev();
            }
          }
        },
        pagination: {
          el: ".swiper-pagination"
        }
      },
      swiperOptionLesson: {
        slidesPerView: "auto",
        spaceBetween: 20
      },
      userCourse: {
        periods_list: []
      },
      couponInfo: {},
      h: 0,
      m: 0,
      s: 0,
      deadline: "",
      oneGoodinfo: {},
      liuyuActivity: true
    };
  },
  created() {
    Toast.loading({
      mask: true,
      message: ""
    });
    if (localStorage.getItem("userCourse")) {
        this.userCourse = JSON.parse(localStorage.getItem("userCourse"));
         this.initPage();
      } else {
        getCourseInfoApi().then(res => {
          localStorage.setItem("userCourse", "");
          this.userCourse = Object.assign({}, res);
          localStorage.setItem("userCourse", JSON.stringify(this.userCourse));
           this.initPage();
        });
      }
    this.$sa.track("viewUnlocklessonpage", {});
  },
  filters: {
    substr10(value) {
      return value.substr(5, 4);
    }
  },
  computed: {
    swiper() {
      if (this.shopType == 0) {
        return this.$refs.mySwiper.swiper;
      } else {
        return "";
      }
    },
    swiper2() {
      if (this.shopType == 0) {
        return this.$refs.mySwiper2.swiper;
      } else {
        return "";
      }
    },
    swiperLesson() {
      return this.$refs.mySwiperLesson.swiper;
    },
    splitContent() {
      let arr = [];
      if (this.thisLesson.content.tips.title1_content) {
        arr = this.thisLesson.content.tips.title1_content.split("\n");
      }
      return arr;
    }
  },
  methods: {
    toActivity() {
      this.$sa.quick('trackHeatMap',this.$refs.toActivity)
      this.$router.push({
        name: "liuyi",
        query: {}
      });
    },
    liuyiBtn() {
      this.$sa.quick('trackHeatMap',this.$refs.liuyiBtn)
      this.$router.push({
        name: "liuyi",
        query: {}
      });
    },
    // 页面初始化
    initPage() {
      if (Date.parse(new Date()) > Date.parse(new Date("2019/6/4 00:00:00"))) {
        this.liuyuActivity = false;
      }
      sessionStorage.setItem("frist", true);
      if (
        this.userCourse.automation_id &&
        this.userCourse.automation_id.length > 0
      ) {
        let item = {};
        item.name = "VIP高效体验营";
        item.id = this.userCourse.automation_id[0];
        this.actions.push(item);
        this.secActions = item;
      }
      if (this.userCourse.periods_list) {
        this.userCourse.periods_list.forEach(el => {
          el.name = el.course_title;
          this.actions.push(el);
        });
      }
      // 高亮
      this.actions.forEach(el => {
        el.className = "";
        if (el.id == this.secActions.id) {
          el.className = "activit";
        }
      });
      console.log(this.userCourse);
      // debugger
      this.getLessonList();
      // 优惠券商品
      if (!this.userCourse.periods_list) {
        this.getAutomationCoupon();
      }
    },
    // 获取课程
    getLessonList(res) {
      if (
        this.userCourse.can_buy_goods_id &&
        this.userCourse.can_buy_goods_id.length
      ) {
        getAutomationApi("goods", this.userCourse.can_buy_goods_id[0]).then(
          res => {
            this.lessonList2 = res.can_watch_list;
            // setTimeout(()=>{
            // let moneyDom = document.getElementsByClassName('card2');
            // if(moneyDom.length>0){
            //   window.scrollTo(0,moneyDom[0].offsetTop-220);
            // }
            // },500)
            // debugger
            Toast.clear();
          }
        );
        getGoodsDetailApi(this.userCourse.can_buy_goods_id).then(res => {
          this.oneGoodinfo = res;
          this.oneGoodinfo.goods_desc = JSON.parse(res.goods_desc);
          // debugger
        });
        if (this.userCourse.periods_list) {
          this.card2 = false;
        }
      }
      if (this.userCourse.automation_id) {
        this.userCourse.automation_id.forEach((el, index) => {
          getAutomationApi("automation", el).then(res => {
            Toast.clear();
            //  debugger
            // if (index == 1) {
            //   // 解锁01元课的情况
            //   this.lessonList2 = res.can_watch_list;
            //   this.lessonList2.forEach(el => {
            //     el.open = true;
            //   });
            // } else {
              // 1元激活后所有课都可以看
              // if (this.userCourse.automation_id.length == 2) {
              //   this.lessonList1 = res.can_watch_list;
              //   this.lessonList1.forEach(el => {
              //     el.open = true;
              //   });
              // } else {
              //   if (res.can_watch_list.length == 6) {
              //     res.can_watch_list.forEach((el, index) => {
              //       if (index == 0) {
              //         el.open = true;
              //       }
              //       if (index < 3) {
              //         this.lessonList1.push(el);
              //         if (el.star_num >= 2 && res.can_watch_list[index + 1]) {
              //           //  debugger
              //           res.can_watch_list[index + 1].open = true;
              //         }
              //         console.log(this.lessonList1);
              //       } else {
              //         this.lessonList2.push(el);
              //       }
              //     });
              //     if (this.lessonList1[2].star_num >= 2) {
              //       this.lessonList2.forEach(el => {
              //         el.open = true;
              //       });
              //     }
              //   } else {
              //     this.lessonList1 = res.can_watch_list;
              //     this.lessonList1.forEach((el, index) => {
              //       if (index == 0) {
              //         el.open = true;
              //       }
              //       if (el.star_num >= 2 && this.lessonList1[index + 1]) {
              //         this.lessonList1[index + 1].open = true;
              //       }
              //     });
              //   }
              // }
              // 关闭锁
            // }
            res.can_watch_list.forEach((el,index)=>{
              if(index<3){
               el.open = true;
               this.lessonList1.push(el)
              }else{
                el.open = true;
               this.lessonList2.push(el)
              }
            })
            // debugger
          });
        });
      }
    },
    tobuy() {
      this.$sa.quick("trackHeatMap", this.$refs.couponBox);
      this.$router.push({
        name: "buyDetail",
        query: {
          shopId: this.couponInfo.id
          //  invite_code: this.bannerData.invite_code,
        }
      });
    },
    getAutomationCoupon() {
      getAutomationCouponApi().then(res => {
        this.couponInfo = res;
        this.couponInfo.goods_desc = JSON.parse(res.goods_desc);
        // debugger
        // console.log(res)
        if (!res.coupon_list.length &&Date.parse(new Date()) < Date.parse(new Date("2019-6-4 00:00:00"))){
          if (localStorageFn.get('liuyi')==0) {
            this.liuyucoolie = 1;
            localStorageFn.set('liuyi',1)
            this.$sa.track("view61window", {
            });
          }
        }
        if (this.couponInfo.coupon_list.length) {
          setTimeout(() => {
            let moneyDom = document.getElementsByClassName("couponBox");
            if (moneyDom.length > 0) {
              // this.scroll_to(moneyDom[0].offsetParent.offsetTop)
              window.scrollTo(0, moneyDom[0].offsetTop - 120);
            }
          }, 500);
          this.leftTimer();
        }
      });
    },
    onSelect(item) {
      this.actionsheetShow = false;
      if (item.id == this.userCourse.automation_id[0]) {
        this.$router.replace({
          name: "secMap",
          query: {}
        });
      } else {
        this.$router.replace({
          name: "map",
          query: {
            item: item
          }
        });
      }
    },
    findUnit(data) {
      return this.unitList.find(i => {
        return i.category_id == data;
      });
    },
    dateParse(dateString) {
      var SEPARATOR_BAR = "-";
      var SEPARATOR_SLASH = "/";
      var SEPARATOR_DOT = ".";
      var 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(compareDateString) {
      var dateTime = new Date().getTime();
      var compareDateTime = compareDateString.getTime();
      if (compareDateTime > dateTime) {
        return 1;
      } else if (compareDateTime == dateTime) {
        return 0;
      } else {
        return -1;
      }
    },
    // 进入课程
    goDetail() {
      // 神策埋点 开始课程
      this.$sa.track("StartCourse", {
        elementID: this.thisLesson.id.toString(),
        dayModule: this.thisLesson.domTitle.slice(0, 9),
        weekName: this.thisLesson.domTitle.slice(
          10,
          this.thisLesson.domTitle.length
        ),
        elementName:
          this.thisLesson.domTitle.slice(0, 9) +
          "-" +
          this.thisLesson.domTitle.slice(10, this.thisLesson.domTitle.length),
        themeID: this.parent_category_id,
        themeName: this.themeName,
        goodsID: this.goodsID,
        classID: this.classID,
        is_view_today:
          !!new Date().setHours(0, 0, 0, 0) ===
          new Date(this.push_time).setHours(0, 0, 0, 0)
      });
      if (this.thisLesson.content.tips) {
        let query = {
          periods_id: "999999999",
          category_id: this.thisLesson.categoryId,
          elementId: this.thisLesson.id,
          // elementId:undefined,
          course_type: this.shopType,
          parent_category_id: this.parent_category_id
        };
        let lessonData = JSON.parse(JSON.stringify(this.thisLesson));
        lessonData.push_time = this.push_time;
        lessonData.themeID = this.parent_category_id;
        lessonData.themeName = this.themeName;
        lessonData.goodsID = this.goodsID;
        lessonData.classID = this.classID;
        lessonData.nowTime = Date.parse(new Date());
        localStorage.setItem("lessonDetail", JSON.stringify(lessonData));
        console.log(query);
        // debugger
        this.$router.push({ name: "newLesson", query: query });
      } else {
        let query = {
          periods_id: "999999999",
          category_id: this.thisLesson.categoryId,
          parent_category_id: this.parent_category_id,
          element_id: this.thisLesson.id,
          course_type: this.shopType,
          type: "1"
        };
        this.$router.push({ name: "lesson", query: query });
      }
    },
    // 显示课程弹窗
    showDia(data, i) {
      console.log(data);
      if (data.open) {
        // debugger
        getLessonDetailApi("999999999", data.id, data.ele_id).then(res => {
          res.content = JSON.parse(res.content);
          this.thisLesson = res;
          this.thisLesson.id = data.ele_id.toString();
          this.thisLesson.categoryId = data.id;
          this.thisLesson.domTitle = data.name;
          this.thisLesson.day = i;
          this.thisLesson.star_num = data.star_num;
          this.popupVisible = true;
          let query = {
            periods_id: "999999999",
            // periods_id:undefined,
            category_id: this.thisLesson.categoryId,
            elementId: this.thisLesson.id,
            course_type: this.shopType,
            parent_category_id: this.parent_category_id
          };
          this.$store.dispatch("setClassQuery", query);
          sessionStorage.setItem("classQuery", JSON.stringify(query));
          // 神策埋点 选择课时
          this.$sa.track("selectElement", {
            elementID: data.ele_id.toString(),
            dayModule: data.name.slice(0, 9),
            weekName: data.name.slice(10, data.name.length),
            elementName:
              data.name.slice(0, 9) +
              "-" +
              data.name.slice(10, data.name.length),
            // themeID: this.parent_category_id.toString(),
            // themeName: this.parent_category_id.toString(),
            goodsID: this.goodsID,
            classID: this.classID,
            courseID: this.course_id.toString()
          });
        });
      } else {
        Toast("课程还未解锁哦");
      }
    },
    scroll_to(offsetTop) {
      let top = offsetTop - 200;
      for (let i = 0; i < 30; i++) {
        let scrollTop =
          document.documentElement.scrollTop | document.body.scrollTop;
        let Dvalue = scrollTop - top;
        let time = i * 10;
        setTimeout(() => {
          document.documentElement.scrollTop = scrollTop - (Dvalue / 30) * i;
          document.body.scrollTop = scrollTop - (Dvalue / 30) * i;
        }, time);
      }
    },
    leftTimer() {
      if (this.couponInfo.coupon_list.length) {
        this.deadline = this.couponInfo.coupon_list[0].deadline_at;
      }
      // console.log(this.deadline)
      let leftTime = new Date(this.deadline.replace(/\-/g, "/")) - new Date(); //计算剩余的毫秒数
      // console.log(leftTime / 1000 / 60 / 60)
      let hours = parseInt(leftTime / 1000 / 60 / 60, 10); //计算剩余的小时
      let minutes = parseInt((leftTime / 1000 / 60) % 60, 10); //计算剩余的分钟
      let seconds = parseInt((leftTime / 1000) % 60, 10); //计算剩余的秒数
      hours = this.checkTime(hours);
      minutes = this.checkTime(minutes);
      seconds = this.checkTime(seconds);
      this.h = hours > 0 ? hours : "00";
      this.m = minutes > 0 ? minutes : "00";
      this.s = seconds > 0 ? seconds : "00";
      window.setTimeout(this.leftTimer, 1000);
    },
    checkTime(i) {
      //将0-9的数字前面加上0,例1变为01
      if (i < 10) {
        i = "0" + i;
      }
      return i;
    },
    goToBuyPage() {
      this.$sa.quick("trackHeatMap", this.$refs.shadowbox);
      let json = { goods_id: this.userCourse.can_buy_goods_id[0] };
      if (window.location.href.indexOf("gdt_vid") > -1) {
        json.gdt_vid = this.$route.query.gdt_vid;
      }
      console.log(this.$route.query.gdt_vid);
      if (window.location.href.indexOf("cct_user_id") > -1) {
        json.cct_user_id = this.$route.query.cct_user_id;
      }
      // this.orderFlag = false;
      payApi(json)
        .then(res => {
          // console.log(res)
          if (res.out_trade_no && !res.appId) {
            if (this.groupDetail.goods_type === 2 && !this.type) {
              this.$router.push({
                name: "success",
                query: {
                  out_trade_no: res.out_trade_no,
                  invite_code: this.invite_code
                }
              });
            } else if (this.groupDetail.goods_type === 4) {
              this.$router.push({
                name: "saleSuccess",
                query: {
                  out_trade_no: res.out_trade_no,
                  invite_code: this.invite_code
                }
              });
            } else {
              this.$router.push({
                name: "buySuccess",
                query: {
                  out_trade_no: res.out_trade_no,
                  invite_code: this.invite_code
                }
              });
            }
          } else {
            let that = this;
            this.orderNo = res.out_trade_no;
            this.jsApiParameters = res;
            wx.miniProgram.getEnv(function(res) {
              if (res.miniprogram) {
                let payParam = encodeURIComponent(JSON.stringify(json));
                wx.miniProgram.navigateTo({
                  url: `pages/wxPay/main?payParam=${payParam}`
                });
              } else if (typeof WeixinJSBridge === "undefined") {
                if (document.addEventListener) {
                  document.addEventListener(
                    "WeixinJSBridgeReady",
                    that.jsApiCall,
                    false
                  );
                } else if (document.attachEvent) {
                  document.attachEvent("WeixinJSBridgeReady", that.jsApiCall);
                  document.attachEvent("onWeixinJSBridgeReady", that.jsApiCall);
                }
              } else {
                that.jsApiCall();
              }
            });
          }
        })
        .catch(res => {
          // alert(res)
          // this.orderFlag = true;
        });
      // this.$nextTick(()=>{
      //   this.payFlag=true;
      // });
    },
    jsApiCall() {
      let that = this;
      WeixinJSBridge.invoke(
        "getBrandWCPayRequest",
        that.jsApiParameters,
        function(res) {
          // that.orderFlag = true;
          if (res.err_msg === "get_brand_wcpay_request:ok") {
            //  支付成功后处理
            Toast("支付成功");
            setTimeout(function() {
              getCourseInfoApi().then(res => {
                localStorage.setItem("userCourse", "");
                that.userCourse = Object.assign({}, res);
                localStorage.setItem(
                  "userCourse",
                  JSON.stringify(that.userCourse)
                );
                that.initPage();
              });
            }, 1000);
            // alert(2)
          }
          if (res.err_msg === "get_brand_wcpay_request:fail") {
          }
          if (res.err_msg === "get_brand_wcpay_request:cancel") {
            // Toast('取消购买')
          }
        }
      );
    }
  }
};
</script>
<style scoped lang="less">
  @import "../../util/public";
  .liuyudialog{
  width: 283* @toVw;
  top: 20vh;
  border-radius: 22* @toVw;
  overflow: hidden;
  text-align: center;
  padding-bottom: 26* @toVw;
  font-size: 14* @toVw;
  .content{
    img{width: 100%;}
    .textBox{
      margin: 20* @toVw 0;
    }
    .btn{
      background: #40A9FF;
      width: 180* @toVw;
      height: 44* @toVw;
      line-height: 44* @toVw;
      color: white;
      display: inline-block;
      border-radius: 22* @toVw;
      font-size: 22* @toVw;
    }
  }
}
  .liuyiBtn{
  position: fixed;
  bottom: 105* @toVw;
  right: 10* @toVw;
  z-index: 2003;
  img{width: 100* @toVw;}
  -webkit-animation-name: swing;
  -webkit-animation-duration: 0.8s;
  -webkit-transform-origin:50% 50%;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count:3;
}
@-webkit-keyframes swing {
    10% {
      transform: rotate(15deg);
    }
    20% {
      transform: rotate(-10deg);
    }
    30% {
      transform: rotate(5deg);
    }
    40% {
      transform: rotate(-5deg);
    }
    50%, 100% {
      transform: rotate(0deg);
    }
  }
  // 精灵图
  .map{background:url('https://static-cdn.changchangenglish.com/new-sing/static/images/map.png')  no-repeat;background-size:136*@toVw 207*@toVw}
  .defultStar{height:20*@toVw;width:20*@toVw;background-position:0 0;;display: inline-block}
  .right{height:20*@toVw;width:20*@toVw;background-position:0 -20*@toVw;display: inline-block}
  .close{position:absolute;top:-11*@toVw;right: -32*@toVw ;height:20*@toVw;width:20*@toVw;background-position:0 -40*@toVw;display: inline-block}
  .actStar{height:20*@toVw;width:20*@toVw;background-position:0 -60*@toVw;display: inline-block}
  .clock{height:28*@toVw;width:28*@toVw;background-position:0 -80*@toVw;display: inline-block}
  .money{height:40*@toVw;width:40*@toVw;background-position:0 -108*@toVw;display: inline-block;animation: dodge 1s infinite;}
  .goLesson{height:59*@toVw;width:136*@toVw;background-position:0 -148*@toVw;display: inline-block;margin-top:15*@toVw;margin-bottom: 10*@toVw }
  .van-actionsheet{
    .activit{color: yellowgreen;}
  }
  .couponBox{padding: 0 19*@toVw;position: relative;
  .bg{width: 100%;}
    .content{
      position: absolute;top: 0;
      color: white;
      width: 339*@toVw;
      .top{
        padding-left: 74*@toVw;
        padding-top: 21*@toVw;
        height: 48*@toVw;
        .text-content{
        // position: absolute;
        // bottom: -8px;
        height: 19*@toVw;
        line-height: 19*@toVw;
        left: 50%;
         margin-top: 7*@toVw;
        font-size: 17*@toVw;
        &.last{
          font-size: 12px;
          span{
            display: inline-block;
            background: #F83534;
            position: relative;
            width:1.6em;
            height: 1.6em;
            line-height: 1.6em;
            border-radius: 3px;
            color: white;
            margin: 0 5px;
            font-size: 12px;
            text-align: center;
          }
        }
      }
     }
     .untime{padding: 32*@toVw 0 40*@toVw 74*@toVw;box-sizing: border-box;}
     .bottom{
       padding: 34*@toVw 9*@toVw 0 17*@toVw;
       display: flex;
       display: -webkit-flex;
       justify-content: space-between;
       .logo{width: 70*@toVw;height: 70*@toVw;  }
       .center{
         width: 135*@toVw;
         p{width: 155*@toVw;overflow: hidden;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
         .tip{font-size: 12*@toVw;line-height: 24*@toVw;}
         .price{font-size:12*@toVw;margin-top: 6*@toVw;
         .now{font-size: 15*@toVw;}
         .old{text-decoration:line-through;font-size: 12*@toVw;}
         }
       }
       .btn{border-radius: 15*@toVw;width: 70*@toVw;height: 30*@toVw;background: #FF4F59;margin-top: 40*@toVw;
       line-height:30*@toVw;text-align: center;font-size: 13*@toVw; }
     }
    }
  }
  .unStart{
    text-align: center;
    img{width:300*@toVw; }
    p{line-height: 22px;font-size: 16px;color: #666666;}
    div{width:250*@toVw;height: 40*@toVw;line-height:40*@toVw;background: #40A9FF;color: white;border-radius: 20*@toVw;margin-top: 72*@toVw }
  }
  // 主题列表
  .noLesson{
    margin: 20*@toVw;
    text-align: center;
    img{
      width: 80%;
    }
  }
  .btn-conntent{
    display: none;
  }
  .line{
    position: absolute;
    right: 0;
    width: 1px;
    background: #eeeeee;
    top: 15*@toVw;
    bottom: 15*@toVw;
  }
  .lesson-block-hp{
    display: none;
  }
  .course_title{font-size: 20px;padding: 10*@toVw 20*@toVw;position: fixed;top: 0;width: 100%;background: white;z-index: 1000;
  border-bottom: 1px solid #eeeeee;}
  .unit-block{
    box-shadow:0*@toVw 1*@toVw 4*@toVw 0*@toVw rgba(204,204,204,0.5);
    width: 100%;
    position: fixed;
    background: white;
    z-index: 2;
    top: 0;
    left: 0;
    .banner2{
      display: none;
    }
    .unit-li{
      width: 68 * @toVw;
      text-align: center;
      margin-top: 2.6666vw;
      height:60 * @toVw;
      border-radius:8 * @toVw 8 * @toVw  0*@toVw 0*@toVw;
      font-size:10* @toVw;
      font-family:PingFangSC-Semibold;
      font-weight:600;
      padding-top: 12 * @toVw;
      color:rgba(102,102,102,1);
      line-height:20* @toVw;
      img{
        width: 28*@toVw;
        height: 28*@toVw;
      }
      &.active{
        background: #60ADF0;
        color: #ffffff;
      }
    }
  }
  // 课包样式
  .lesson-block{
    width: 100%;
    margin-top: 40*@toVw;
    padding-bottom: 50*@toVw;
    overflow: auto;
    -webkit-overflow-scrolling:touch;
    .card-block{
      box-shadow:0* @toVw 2* @toVw 5* @toVw 1* @toVw rgba(153,153,153,0.56);
      margin: 20 * @toVw;
      border-radius: 8*@toVw;
      overflow: hidden;
      position: relative;
      .shadowbox{
        position: absolute;
        top: 0;
        width:100% ;
        height: 140*@toVw;
        .shadow{background:rgba(0,0,0,0.6);position: absolute;width:100% ;border-radius: 8*@toVw 8*@toVw 0 0;
        height: 140*@toVw;}
        .content{position: absolute;width:100% ;z-index: 1;color: white;
        height: 140*@toVw;
          p{font-size: 12 * @toVw;margin-top: 51 * @toVw;margin-left:19 * @toVw;  }
          div{font-size: 17 * @toVw; margin: 10 * @toVw;border: 1px solid white;border-radius: 19 * @toVw;
          width: 313 * @toVw;height: 38 * @toVw;
          line-height:38 * @toVw;  
          text-indent: 9 * @toVw;
            span{display: inline-block;width: 76 * @toVw;
            height: 38* @toVw;background: #FF4F59;
            float: right;
            border-radius: 19*@toVw; 
            }
          }
        }
      }
      img{
        width: 100%;
        height: 140 *@toVw;
        border-radius: 8*@toVw 8*@toVw 0 0 ;
      }
      .card-li{
        display: flex;
        display: -webkit-flex;
        justify-content: space-between;
        margin: auto;
        padding: 10 * @toVw;
        position: relative;
        border-bottom: 1 * @toVw solid #EEEEEE;
        .text-block{
          margin-left: 0;
        }
        .textblock{
          margin-left: 0;
        }
        .star-block{
          img{
            width: 20*@toVw;
            height: 20*@toVw;
            margin-left: 3*@toVw;
          }
        }
        .icon-block{
          margin: auto 0;
          width: 30*@toVw;
          text-align: center;
        }

        .clock-block{
          position: absolute;
          top: 0;
          left: 0;
          bottom: 0;
          right: 0;
          background: rgba(255,255,255,0.8);
          text-align: center;
          font-size:12*@toVw;
          font-family:PingFang-SC-Medium;
          font-weight:500;
          color:rgba(153,153,153,1);
          padding: 10*@toVw;
        }
        .title{
          font-size:16*@toVw;
          font-family:PingFangSC-Semibold;
          font-weight:600;
          color:rgba(0,0,0,1);
          line-height:28*@toVw;

        }
        .tips{
          font-size:14*@toVw;
          font-family:PingFang-SC-Medium;
          font-weight:500;
          min-width: 170 * @toVw;
          overflow: hidden;
          white-space:nowrap;
          text-overflow:ellipsis;
          color:rgba(102,102,102,1);
          line-height:20*@toVw;
        }
      }
      .gray{
        .title{
          color:#999999;
        }
        .tips{
          color:#999999;
        }
      }
    }
  }
  .nounit{
    margin-top: 40*@toVw;
  }
  // 弹窗样式
  .popup-block{
    text-align: center;
    background: white;
    border-radius: 8*@toVw;
    width: 276 * @toVw;
    .header{
      width: 276 * @toVw;
      height: 137 * @toVw;
      padding-top: 36 * @toVw;
      background-size: 100% 100%;
      position: relative;
      .title{
        text-align: center;
        font-size:24*@toVw;
        font-family:Helvetica-Bold;
        font-weight:bold;
        padding: 0 20*@toVw;
        color:rgba(255,255,255,1);
        line-height:26*@toVw;
      }
      .tips{
        width:92*@toVw;
        height:36*@toVw;
        background: rgba(0,0,0,0.2);
        text-align: center;
        border-radius: 4*@toVw;
        position: absolute;
        left: 50%;
        margin-left: -46*@toVw;
        bottom: 20*@toVw;
        line-height: 36 * @toVw;
        font-size:16*@toVw;
        font-family:PingFang-SC-Bold;
        font-weight:bold;
        color:rgba(255,255,255,1);
      }
    }
    .content{
      padding-top: 14*@toVw;
      .tips-title{
        height:25*@toVw;
        width: fit-content;
        margin: 12*@toVw auto 10*@toVw auto;
        font-size:16*@toVw;
        font-family:PingFangSC-Semibold;
        font-weight:600;
        color:rgba(145,237,250,1);
        line-height:25*@toVw;
        display: block;
        border-radius: 1000*@toVw;
        padding: 3*@toVw 18*@toVw;
        border: 2*@toVw solid #91EDFA;
      }
      .title-content {
        word-break: break-all;
        padding: 0 18*@toVw;
        font-size: 14*@toVw;
        font-family: PingFang-SC-Medium;
        font-weight: 500;
        color: #666666;
        line-height: 17*@toVw;
        ul{
          margin: 0;
          padding: 0;
          font-size:14*@toVw;
          height:58*@toVw;
          overflow: hidden;
          font-family:PingFang-SC-Medium;
          font-weight:500;
          color:rgba(102,102,102,1);
          line-height:20*@toVw;
          list-style-type:none;
          &:after{
            content: '';
            display: block;
            clear: both;
          }
          li{
            width: 50%;
            float: left;
            text-align: left;
          }
        }
      }
    }
  }
  @keyframes dodge
  {
    0%{
      transform:scale(0.9,0.9)
    }
    50%{
      transform:scale(1.1,1.1)
    }
    100%{
      transform:scale(0.9,0.9)
    }
  }
  @keyframes dodgehp
  {
    0%{
      transform:scale(0.5,0.5)
    }
    50%{
      transform:scale(0.7,0.7)
    }
    100%{
      transform:scale(0.5,0.5)
    }
  }
</style>