<template>
  <div class="lesson">
    <!--看一看1-->
    <transition name="fade" v-if="nowLesson && nowLesson.key === 'look1'">
      <look1-div :nowLesson="nowLesson" @goNext="goNext"></look1-div>
    </transition>
    <!--玩一玩1-->
    <transition name="fade" v-if="nowLesson && nowLesson.key === 'play1'">
      <video1-div :nowLesson="nowLesson" @goNext="goNext"></video1-div>
    </transition>
    <!--玩一玩音频-->
    <transition name="fade" v-if="nowLesson && nowLesson.key === 'radio1'">
      <audio1-div :nowLesson="nowLesson" @goNext="goNext"></audio1-div>
    </transition>
    <!--秀宝贝1-->
    <transition name="fade" v-if="nowLesson && nowLesson.key === 'show1'">
      <show1-div :nowLesson="nowLesson"  @goNext="goNext"></show1-div>
    </transition>
    <!--加油包1-->
    <transition name="fade" v-if="nowLesson && nowLesson.key === 'refueling1'">
      <refueling1-div :nowLesson="nowLesson" @goNext="goNext"></refueling1-div>
    </transition>
    <!--加油包2-->
    <transition name="fade" v-if="nowLesson && nowLesson.key === 'refueling2'">
      <refueling2-div :nowLesson="nowLesson" @goNext="goNext"></refueling2-div>
    </transition>
  </div>
</template>

<script>
  import {getElemenetDetailApi} from "../../service/api"
  import look1Div from './look1'
  import video1Div from './video1'
  import audio1Div from './audio1'
  import show1Div from './show1'
  import refueling1Div from './refueling1'
  import refueling2Div from './refueling2'
  import Vue from 'vue'
  import MintUI from 'mint-ui'
  import 'mint-ui/lib/style.css'

  Vue.use(MintUI);
  export default {
    name: "index",
    components:{
      look1Div,
      video1Div,
      audio1Div,
      show1Div,
      refueling1Div,
      refueling2Div
    },
    data(){
      return{
        elementId:this.$route.params.id,
        lessonList:[],
        nowLesson:null
      }
    },
    mounted(){
      this.initPage()
    },
    methods:{
      initPage(){
        getElemenetDetailApi(this.elementId).then(res=>{
          this.lessonList = JSON.parse(res.content);
          this.nowLesson = this.lessonList[0]
        })
      },
      goNext(data) {
        if(!this.lessonList[data.i]){
          alert('没有此内容')
        }else{
          this.nowLesson = this.lessonList[data.i];
        }
      },
    }
  }
</script>

<style lang="less">
  html,body,#app,.lesson{
    height: 100%;
  }
  div{
    margin: auto;
  }
</style>
