<template>
  <div class="monit">
    <div class="monit-left">
      <div class="monit-title" @click="isShow = !isShow">
        <el-cascader
          v-model="videoId"
          :options="options"
          size="mini"
          @change="handleChange"
          :props="{value: 'id', label: 'cameraName', children: 'cameraList', expandTrigger: 'hover', disabled: 'runStatus'}"
          :show-all-levels="false"></el-cascader>
      </div>
      <iframe v-if="isVideo" :src="'static/jinm/index.html?'+'1'+','+ cameraOne +','+ cameraTwo + ',' +'100%' + ',' + '0'" style="width: 100%; height: 100%;" frameborder="0"  allowfullscreen="true"></iframe>
    </div>
    <div class="monit-right">
      <swiper style="height: 100%;  margin-top: auto; margin-bottom: auto;" ref="mySwiper" class="swiper" :options="swiperOption">
        <swiper-slide v-for="(item, i) in videoList" :key="i">
          <div class="case">
            <template v-if="num === 0 && (i === 0 || i === 1 || i === 2)">
              <iframe  :src="'static/jinm/index.html?'+'1'+','+ item.wsUrl +','+ item.rtspUrl + ',' +'100%' + ',' + '0'" style="width: 100%; height: 100%;" frameborder="0"  allowfullscreen="true"></iframe>
            </template>
            <template v-else-if="num === 3 && (i ===3 || i === 4 || i === 5)">
              <iframe  :src="'static/jinm/index.html?'+'1'+','+ item.wsUrl +','+ item.rtspUrl + ',' +'100%' + ',' + '0'" style="width: 100%; height: 100%;" frameborder="0"  allowfullscreen="true"></iframe>
            </template>
          </div>
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
import {getVideoAll, getVideo, saveVideo, lastVideo, romVideo} from "@/utils/api";
import axios from "axios";
const c_swiper = document.getElementsByClassName("swiper")

export default {
  name: "Monit",
  components: {
    swiper,
    swiperSlide,
  },
  data() {
    let self = this;
    return {
      swiperOption: {
        direction: 'vertical',
        slidesPerView: 3,
        slidesPerColumn: 1,
        slidesPerGroup: 3,
        // spaceBetween: 30,
        autoplay: {
          delay: 10000,
          disableOnInteraction: false
        },
        on: {
          slideChange() {
            // console.log(c_swiper[0].swiper)
            // this.num = c_swiper[0].swiper.activeIndex
            self.returnNum(c_swiper[0].swiper.activeIndex)
            // console.log(this.num);
            // return this.num
          }
        }
      },
      videoId: '',
      isShow: false,
      isVideo: false,
      options: [],
      cameraOne: '',
      cameraTwo: '',
      videoList: [],
      timer: null,
      num: 0,
      index: true,
    }
  },
  watch: {
    // num(newVal) {
    //   console.log(newVal);
    //   console.log('变了')
    //   // if(newVal === 0) {
    //   //   this.index = 2;
    //   // } else {
    //   //   this.index = 3;
    //   // }
    // },
    num: {
      handler(newVal) {
        if(newVal === 0) {
            this.index = true;
        } else {
            this.index = false;
        }
        console.log('变了' + newVal)
      },
      deep: true
    }
  },
  methods: {
    init() {
      var that = this;
      axios.all([
        getVideoAll({}),
          lastVideo({})
      ]).then(axios.spread(function(res1, res2) {
        if(res1.code === 10000) {
          res1.data.forEach(item => {
            item.cameraList.forEach(items => {
              items.runStatus = !items.runStatus
            })
          })
          that.options = res1.data;
        }
        if(res2.code === 10000) {
          that.isVideo = true;
          that.cameraOne = res2.data.wsUrl;
          that.cameraTwo = res2.data.rtspUrl;
        }
      }))
    },
    handleChange(value) {
      let val = value[value.length - 1];
      let params= {
        cameraIds: [val],
      }
      getVideo(params).then(res =>{
        this.isVideo = true;
        this.cameraOne = res.data[0].wsUrl;
        this.cameraTwo = res.data[0].rtspUrl;
        saveVideo({cameraId: val}).then(res => {
          console.log(res)
        })
      })
    },
    initCrmea() {
      romVideo({}).then(res => {
       if(res.code === 10000) {
         this.videoList = res.data;
       }
      })
    },
    returnNum(val) {
      this.num = val;
    }
  },
  mounted() {
    this.init()
    this.initCrmea();
    var that = this;
    this.timer = setInterval(() => {
     that.initCrmea();
    }, 60000)
  },
  beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
  }
}
</script>

<style scoped>
  .monit {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 20px 0 0 0;
    display: flex;
    justify-content: space-between;
  }
  .monit-left {
    flex: 1;
    height: 100%;
    background: url("../../assets/BioSafety/kuang.png") no-repeat;
    background-size: 100% 100%;
    position: relative;
    box-sizing: border-box;
    padding: 40px 30px 30px 30px;
    display: flex;
    align-items: center;
  }
  .monit-right {
    width: 450px;
    margin-left: 20px;
  }
  .case {
    width: 100%;
    height: 100%;
    background: url("../../assets/BioSafety/kuang.png") no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
    padding: 20px;
  }
  .monit-title {
    width: 300px;
    height: 40px;
    position: absolute;
    top: 0;
    left: 50%;
    line-height: 40px;
    transform: translate(-50% , 0);
    background-color: #031032;
    text-align: center;
    color: white;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
  .icon {
    width: 18px;
    height: 18px;
    display: inline-block;
    background: url("../../assets/Zoology/u5069.svg") no-repeat;
    background-size: 100% 100%;
    margin-top: 10px;
  }
  .monit-content {
    /*width: 1180px;*/
    /*height: 300px;*/
    position: absolute;
    top: 45px;
    left: 50%;
    transform: translate(-50% , 0);
    border: 5px solid #00FFFF;
    border-radius: 10px;
    background-color: #323232;
    display: flex;
    box-sizing: border-box;
    padding: 60px 20px;
  }
  .content-flex {
    flex: 1;
  }
</style>
