<template>
  <div>
    <div class="unit-block">
      <swiper :options="swiperOption" class="banner" v-if="$route.query.course_type==0" ref="mySwiper">
        <swiper-slide v-for="(data,index) in unitList" :key="index">
          <div class="line"></div>
          <div :class="{'unit-li':true,active:data.category_id == parent_category_id}" @click="changeCateGory(data,data.category_id == parent_category_id)">
            <div>
              <img :src="data.category_cover">
            </div>
            {{data.category_name}}
          </div>
        </swiper-slide>
        <swiper-slide v-if="more">
          <div class="line"></div>
          <div class="unit-li">
            <div>
              <img :src="nextUnitUrl">
            </div>
            <span style="color: #cccccc">敬请期待</span>
          </div>
        </swiper-slide>
          <swiper-slide v-for="a in 3-unitList.length > 0 ? 3-unitList.length : 0" :key="a*10">
            <div class="unit-li">
              <div>
              </div>
            </div>
          </swiper-slide>
      </swiper>
    </div>
    <div class="lesson-block">
      <div v-if="noLesson" class="noLesson">
        <img :src="errorURL" />
        <div>
          暂无课程
        </div>
      </div>
      <div class="card-block" v-for="(data,index) in lessonList">
        <img :src="data[0].cover+'?imageslim'"/>
        <div :class="'card-li cid'+item.id" v-for="(item,x) in data" @click="showDia(item,x+1)">
          <div class="text-block">
            <div class="title">
              {{item.name | substr10}}
            </div>
            <div class="tips">
              <span v-if="item.push_time !== '0000-00-00'"> 开课时间：{{item.push_time}}</span>
              <span v-if="item.push_time === '0000-00-00'">课程还未开始哦</span>
            </div>
          </div>
          <div>
          </div>
          <div class="icon-block">
            <i
              :class="{
              map:true,
              right:index !== item.length-1 && item.push_time !== '0000-00-00',
              money:item.push_time !== '0000-00-00' && ((data[x+1] && data[x+1].push_time === '0000-00-00' || ( x === data.length-1 && lessonList[index+1] && lessonList[index+1][0].push_time === '0000-00-00'))|| ($route.query.course_type == 0 &&  findUnit(parent_category_id) && findUnit(parent_category_id).status === 2 || $route.query.course_type ==1 ) && x===data.length-1 && index == lessonList.length-1),
              clock:item.push_time === '0000-00-00'
              }"></i>

          </div>
        </div>
      </div>
    </div>
    <guide-content v-if="popupVisible && thisLesson"/>
    <mt-popup
      v-model="popupVisible" style="background: transparent">
      <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>
    </mt-popup>
    <bottom-tab></bottom-tab>
    <guide-page></guide-page>
  </div>
</template>

<script>
  import {getCourseListApi,getLessonDetailApi,getLessonListApi} from "../../service/api";
  import guidePage from '../guide/map'
  import guideContent from '../guide/content'
  import diaBGI from '../../assets/newLesson/diaBG.png'
  import 'swiper/dist/css/swiper.css'
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  import {Indicator,Toast} from 'mint-ui'
  import bottomTab from '../public/bottomTab';
  import errorURL from '../../assets/error.png'
  import nextUnitUrl from '../../assets/newLesson/nextUnit.png'
  export default {
    name: "mapDefault",
    components:{
      swiper,
      swiperSlide,
      bottomTab,
      guidePage,
      guideContent
    },
    data() {
      return {
        shopType:this.$route.query.course_type,
        diaBGI:diaBGI,
        nextUnitUrl:nextUnitUrl,
        periods_id:this.$route.query.periods_id,
        parent_category_id:this.$route.query.parent_category_id,
        unitList:[],
        more:false,
        errorURL:errorURL,
        popupVisible:false,
        lessonList:[],
        lesson:'',
        noLesson:false,
        thisLesson:null,
        swiperOption: {
          slidesPerView:4,
          pagination: {
            el: '.swiper-pagination'
          }
        },
      }
    },
    mounted(){
      this.initPage();
    },
    filters:{
      substr10(value){
        return value.substr(0,10)
      }
    },
    computed: {
      swiper() {
        if(this.$route.query.course_type == 0){
          return this.$refs.mySwiper.swiper
        }else {
          return ''
        }
      },
      splitContent(){
        let arr = [];
        if(this.thisLesson.content.tips.title1_content){
          arr = this.thisLesson.content.tips.title1_content.split('\n');
        }
        return arr
      },
    },
    methods:{
      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(){
        if(this.thisLesson.content.tips){
          let query = {
            periods_id:this.periods_id,
            category_id:this.thisLesson.id,
            elementId:this.thisLesson.id,
            course_type:this.$route.query.course_type,
            parent_category_id:this.parent_category_id,
          };
          localStorage.setItem('lessonDetail',JSON.stringify(this.thisLesson));
          this.$router.push({name:'newLesson',query:query})
        }else{
          let query = {
            periods_id:this.periods_id,
            category_id:this.thisLesson.category_id,
            parent_category_id:this.parent_category_id,
            element_id:this.thisLesson.id,
            course_type:this.$route.query.course_type,
            type:'1'
          };
          this.$router.push({name:'lesson',query:query})
        }
      },
      // 切换主题
      changeCateGory(data,flag){
        if(!flag){
          this.parent_category_id = data.category_id;
          this.$router.push({name:'map',query:{periods_id:this.periods_id,course_type:this.shopType,parent_category_id: this.parent_category_id}});
          this.getLessonList(true)
        }
      },
      // 显示课程弹窗
      showDia(data,i){
        if(data.push_time !== '0000-00-00'){
          Indicator.open({
            spinnerType: 'triple-bounce'
          });
          getLessonDetailApi(this.periods_id,data.id,data.ele_id).then(res=>{
            res.content = JSON.parse(res.content);
            this.thisLesson = res;
            this.thisLesson.id = data.id;
            this.thisLesson.domTitle = data.name;
            this.thisLesson.day = i;
            this.popupVisible=true;
            Indicator.close();
          })
        }else{
          Toast('课程还未开始哦')
        }
      },
      // 页面初始化
      initPage(){
        this.getLessonList();
        if (this.$route.query.course_type == 0){
          this.getUnitList()
        }
      },
      getUnitList(){
        getCourseListApi(this.periods_id).then(res=>{
          this.unitList = [];
          res.forEach(i=>{
            if(i.status === 1 || i.status === 2 ){
              this.unitList.push(i)
            }
          });
          if(res.find(i=>{return i.status === 0})){
            this.more = true
          }
          this.$nextTick(()=>{
            let index=null;
            this.unitList.forEach((i,x)=>{
              if(i.category_id ==this.parent_category_id){
                if(x>3){
                  index=x-3
                }else{
                  index = x
                }
              }
            });
            this.swiper.slideTo(index, 300, false)
          })
        })
      },
      getLessonList(data){
        getLessonListApi(this.periods_id+'/v2',{category_id:this.parent_category_id}).then(res=>{
          this.lessonList=[];
          if(res.list.length<1){
            this.noLesson = true
          }else{
            this.noLesson = false
          }
          let list = [];
          for(let i = 0; i < res.list.length; i ++ ){
           if(res.list[i].name.indexOf('Day1')>-1 && list.length > 0){
             this.lessonList.push(list);
             list = [];
             list.push(res.list[i]);
           }else{
             list.push(res.list[i]);
             if(i==res.list.length-1){
               this.lessonList.push(list);
             }
           }
          }
          if(!data){
            this.$nextTick(()=>{
              if(this.$route.query.category_id){
                let dom = document.getElementsByClassName('cid'+this.$route.query.category_id);
                if(dom.length>0){
                  this.scroll_to(dom[0].offsetTop);
                  let data = null ;
                  let index = 0;
                  this.lessonList.forEach(i=>{
                    i.forEach((x,i)=>{
                      if(x.id == this.$route.query.category_id){
                        data = x;
                        index = i+1
                      }
                    })
                  });
                  this.showDia(data,index)
                }
              }else if(this.$route.query.back_id){
                let dom = document.getElementsByClassName('cid'+this.$route.query.back_id);
                if(dom.length>0){
                  this.scroll_to(dom[0].offsetTop)
                }
              }else{
                let moneyDom = document.getElementsByClassName('money');
                if(moneyDom.length>0){
                  this.scroll_to(moneyDom[0].offsetParent.offsetTop)
                }
              }
            })
          }else{
            this.scroll_to(0)
          }
        });
      },
      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);
        }
      }
    }
  }
</script>
<style scoped lang="less">
  @import "../../util/public";
  // 精灵图
  .map{background:url('/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 }
  // 主题列表
  .noLesson{
    margin: 20*@toVw;
    text-align: center;
    img{
      width: 80%;
    }
  }
  .line{
    position: absolute;
    right: 0;
    width: 1px;
    background: #eeeeee;
    top: 15*@toVw;
    bottom: 15*@toVw;
  }
  .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;
    .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:12* @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: 80*@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;
      img{
        width: 100%;
        height: 140 *@toVw;
        border-radius: 8*@toVw 8*@toVw 0 0 ;
      }
      .card-li{
        display: flex;
        justify-content: space-between;
        margin: auto;
        padding: 10 * @toVw;
        position: relative;
        border-bottom: 1 * @toVw solid #EEEEEE;
        .text-block{
          margin-left: 0;
        }
        .icon-block{
          margin: auto 0;
        }

        .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;
          max-width: 170 * @toVw;

          overflow: hidden;
          white-space:nowrap;
          text-overflow:ellipsis;
          color:rgba(102,102,102,1);
          line-height:20*@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: 12*@toVw;
        font-family: PingFang-SC-Regular;
        font-weight: 400;
        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)
    }
  }
</style>