<template>
  <div>
    <div class="unit-block">
      <swiper :options="swiperOption" class="banner" v-if="$route.query.course_type==0" ref="mySwiper">
        <swiper-slide v-for="a in 3" :key="a*10">
          <div class="unit-li">
            <div>
            </div>
          </div>
        </swiper-slide>
        <swiper-slide v-for="(data,index) in unitList" :key="index">
          <div :class="{'unit-li':true,active:data.category_id == parent_category_id}" @click="changeCateGory(data)">
            <div>
              Unit
            </div>
            {{data.category_name}}
          </div>
        </swiper-slide>
      </swiper>
    </div>
    <div class="lesson-block">
      <div v-if="noLesson">
        <img :src="errorURL"/>
        <div>
          暂无课程
        </div>
      </div>
      <div class="card-block" v-for="(data,index) in lessonList">
        <img :src="data[0].cover"/>
        <div class="card-li" v-for="(item,x) in data" @click="showDia(item,x+1)">
          <div>
            <div class="title">
              {{item.title | substr10}}
            </div>
            <div class="tips">
             {{item.ele_list[0].title}}
            </div>
          </div>
          <div>
            <i class="map actStar" v-for="i in item.ele_list[0].star_num"></i>
            <i class="map defultStar" v-for="a in 3-item.ele_list[0].star_num"></i>
          </div>
          <div>
            <i :class="{map:true,right:index !== item.length-1,money:index === lessonList.length-1 && x === data.length-1}"></i>
          </div>
        </div>
        <div v-if="data.length < 5">
          <div class="card-li"  v-for="a in 5- data.length">
            <div class="clock-block">
              <div class="map clock">
              </div>
              <br>
              课程还未开始
            </div>
          </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 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} from 'mint-ui'
  import bottomTab from '../public/bottomTab';
  import errorURL from '../../assets/error.png'
  export default {
    name: "mapDefault",
    components:{
      swiper,
      swiperSlide,
      bottomTab,
      guidePage,
      guideContent
    },
    data() {
      return {
        shopType:this.$route.query.course_type,
        diaBGI:diaBGI,
        periods_id:this.$route.query.periods_id,
        parent_category_id:this.$route.query.parent_category_id,
        unitList:[],
        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,14)
      }
    },
    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:{
      // 进入课程
      goDetail(){
        if(this.thisLesson.content.tips){
          let query = {
            periods_id:this.periods_id,
            category_id:this.thisLesson.category_id,
            elementId:this.thisLesson.id,
            course_type:this.$route.query.course_type,
            parent_category_id:this.parent_category_id,
          };
          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){
        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()
      },
      // 显示课程弹窗
      showDia(data,i){
        Indicator.open({
          spinnerType: 'triple-bounce'
        });
        getLessonDetailApi(this.periods_id,data.category_id,data.ele_list[0].id).then(res=>{
          res.content = JSON.parse(res.content);
          this.thisLesson = res;
          this.thisLesson.day = i;
          this.popupVisible=true;
          Indicator.close();
        })
      },
      // 页面初始化
      initPage(){
        this.getLessonList();
        if (this.$route.query.course_type == 0){
          this.getUnitList()
        }
      },
      getUnitList(){
        this.unitList = [];
        getCourseListApi(this.periods_id).then(res=>{
          this.unitList = res;
          this.$nextTick(()=>{
            let index=null;
            this.unitList.forEach((i,x)=>{
              if(i.category_id ==this.parent_category_id){
                index=x
              }
            });
            this.swiper.slideTo(index, 300, false)
          })
        })
      },
      getLessonList(){
        this.lessonList=[];
        getLessonListApi(this.periods_id,{category_id:this.parent_category_id}).then(res=>{
          let n = this.$route.query.course_type==0 ? 5: res.list.length;
          if(res.list.length<1){
            this.noLesson = true
          }else{
            this.noLesson = false
          }
          for(let i = 0; i < res.list.length; i += n ){
            let list = [];
            for (let j = i;j < i + n && j < res.list.length; j++){
              list.push(res.list[j])
            }
            this.lessonList.push(list)
          }
        });
      }
    }
  }
</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 }
  // 主题列表
  .unit-block{
    box-shadow:0*@toVw 1*@toVw 4*@toVw 0*@toVw rgba(204,204,204,0.5);
    .unit-li{
      width: 68 * @toVw;
      text-align: center;
      margin: 10 * @toVw 10 * @toVw 0 10*@toVw;
      height:52 * @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;
      &.active{
        background: #60ADF0;
        color: #ffffff;
      }
    }
  }
  // 课包样式
  .lesson-block{
    padding-bottom: 60*@toVw;
    .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;
        margin: auto;
        padding: 10 * @toVw;
        border-bottom: 1 * @toVw solid #EEEEEE;
        .clock-block{
          text-align: center;
          font-size:12*@toVw;
          font-family:PingFang-SC-Medium;
          font-weight:500;
          color:rgba(153,153,153,1);
          line-height:17*@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%;
      .title{
        text-align: center;
        font-size:24*@toVw;
        font-family:Helvetica-Bold;
        font-weight:bold;
        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;
        margin-top: 16*@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: rgba(136, 136, 136, 1);
        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>