<template>
  <div class="home" v-if="showPage">
    <headComponent :headData="headData"></headComponent>
    <div class="home-page" v-show="pageType == 1">
      <div class="top-max-big-box">
        <!--<videoComponent ref="videoComponent"></videoComponent>-->
        <div class="videoComponent">
          <p class="title-p">视频监控</p>
          <!--<p class="full-screen-button" @click="fullScreen"></p>-->
          <!--<img v-if="!videoType" class="video-max-big-box" src="@/assets/ZDimages/video_img.png">-->
          <div class="video-max-big-box" id="videoData" ref="videoData"></div>
          <img class="position-left-bottom" src="@/assets/ZDimages/img_min_icon.png">
          <img class="position-right-bottom" src="@/assets/ZDimages/img_min_icon.png">
        </div>
        <overviewComponent></overviewComponent>
        <usageRateComponent></usageRateComponent>
      </div>
      <div class="bottom-max-big-box">
        <mapComponent ref="mapComponent"></mapComponent>
        <subComponent ref="subComponent"></subComponent>
      </div>
    </div>
    <mediaAnnouncementComponent v-if="pageType == 2"
                                :mediaAnnouncementComponentData="mediaAnnouncementComponentData"
                                ref="mediaAnnouncementComponent">
    </mediaAnnouncementComponent>
  </div>
</template>
<script>
  import { login } from '@/api/login'
  import { getConfigByType } from '@/api/index'
  import { setToken } from '@/utils/auth'
  import { Encrypt, Decrypt } from '@/utils/secret'
  //首页组件
  import headComponent from './components/headComponent.vue'
  import videoComponent from './components/videoComponent.vue'
  import overviewComponent from './components/overviewComponent.vue'
  import usageRateComponent from './components/usageRateComponent.vue'
  import mapComponent from './components/mapComponent.vue'
  import subComponent from './components/subComponent.vue'
  //通知公告
  import mediaAnnouncementComponent from './components/mediaAnnouncementComponent.vue'

  export default {
    name: 'home',
    components: {
      headComponent,
      videoComponent,
      overviewComponent,
      usageRateComponent,
      mapComponent,
      subComponent,
      mediaAnnouncementComponent
    },
    data() {
      return {
        //页面开关
        showPage: false,
        //展示状态
        pageType: 1,
        headData: {
          name: ''
        },
        mediaAnnouncementComponentData: null,
        videoData:{},
      }
    },
    created() {

    },
    mounted() {
      this.login()
    },
    methods: {
      login() {
        let self = this
        Promise.all([
          this.getToken()
        ]).then((result) => {
            setTimeout(function() {
              self.getExploitConfig();
            },500)
        }).catch((error) => {
        })
      },
      //获取token
      getToken() {
        login().then(res1 => {
          setToken(res1.data.token)
        })
      },
      //获取开发配置
      getExploitConfig() {
        let self = this;
        getConfigByType({ category: 2, configType: 5 }).then(response => {
          let obj = JSON.parse(response.data.configValue)
          //判定http或者https
          let urlText = window.location.href.split('://')[0] + '://'
          let outerNet = window.location.href.indexOf(obj.ipIdentify) == -1//true外网 false 内网
          if (outerNet) {//外网
            //MQTT地址
            localStorage.setItem('mqttUrl', 'wss://' + Decrypt(obj.mqttExtranetUrl))
            //MQTT账号
            localStorage.setItem('mqttUser', Decrypt(obj.mqttExtranetUser))
            //MQTT密码
            localStorage.setItem('mqttPassword', Decrypt(obj.mqttExtranetPassword))
            //文件浏览环境
            localStorage.setItem('fileBrowseEnvironment', window.location.href.split('://')[0] + '://' + Decrypt(obj.fileBrowseEnvironmentExtranet))
          } else {
            //MQTT地址
            localStorage.setItem('mqttUrl', 'ws://' + Decrypt(obj.mqttIntranetUrl))
            //MQTT账号
            localStorage.setItem('mqttUser', Decrypt(obj.mqttIntranetUser))
            //MQTT密码
            localStorage.setItem('mqttPassword', Decrypt(obj.mqttIntranetPassword))
            //文件浏览环境
            localStorage.setItem('fileBrowseEnvironment', window.location.href.split('://')[0] + '://' + Decrypt(obj.fileBrowseEnvironment))
          }
          this.$set(this, 'showPage', true)
          setTimeout(function() {
            self.initH5Player(1);
          },500)
        })
      },
      //通知组件数据给予
      setNoticeData(item, type) {
        let self = this
        if (type == 1) {
          this.$set(this, 'pageType', 1)
        }
        if (type == 2) {
          this.$set(this, 'mediaAnnouncementComponentData', item)
          setTimeout(function() {
            //获取报警信息
            self.$set(self, 'pageType', 2)
          }, 500)
        }
        if (type == 3) {
          this.$set(this, 'pageType', 2)
        }
      },
      //head数据MAP名称给予
      setMapName(name) {
        this.$set(this.headData, 'name', name)
      },
      //房间组件数据给予
      setRoomData(item) {
        this.$refs.subComponent.getSubData(item)
      },
      //视频组件数据给予
      setVideoData(item) {
        this.$set(this, 'videoData', {
          id: 'videoData',
          width: 737,
          height: 417,
          url: item.videoList[0].url
        })
        this.videoOff();
        // this.$refs.videoComponent.initialize(item)
      },
      //视频组件初始化
      initH5Player(split) {
        this.myPlugin = new window.JSPlugin({
          szId: 'videoData', //需要英文字母开头，唯一性，必填
          // szId: this.videoData.id, //需要英文字母开头，唯一性，必填
          szBasePath: '/h5player/', // 必填,与h5player.min.js的引用目录一致 填写的是pulblic下的路径！！！
          mseWorkerEnable:true,
          bSupporDoubleClickFull: false,//是否支持双击全屏，默认true
          // 当容器div#play_window有固定宽高时，可不传iWidth和iHeight，窗口大小将自适应容器宽高
          iWidth: 737,
          iHeight: 417,
          // 分屏播放，默认最大分屏4*4
          iMaxSplit: split,
          iCurrentSplit: split,
          openDebug: false,
          oStyle: {
            borderSelect: '#000'
          },
        })
        let iWndNum = 1;
        let InterruptTime = 5;
        //设置断流时间回调
        this.myPlugin.JS_SetInterruptTime(iWndNum, InterruptTime).then(
          () => {
            // console.info('JS_SetInterruptTime success');
            // do you want...
          },
          (err) => {
            // console.info('JS_SetInterruptTime failed');
            // do you want...
          }
        );
        // 事件回调绑定
        this.myPlugin.JS_SetWindowControlCallback({
          // windowEventSelect: function (iWndIndex) {  //插件选中窗口回调
          //   // console.log('windowSelect callback: ', iWndIndex)
          // },
          // pluginErrorHandler: function (iWndIndex, iErrorCode, oError) {  //插件错误回调
          //   // console.log('pluginError callback: ', iWndIndex, iErrorCode, oError)
          // },
          // windowEventOver: function (iWndIndex) {  //鼠标移过回调
          //   //console.log(iWndIndex);
          // },
          // windowEventOut: function (iWndIndex) {  //鼠标移出回调
          //   //console.log(iWndIndex);
          // },
          // windowEventUp: function (iWndIndex) {  //鼠标mouseup事件回调
          //   //console.log(iWndIndex);
          // },
          // windowFullCcreenChange: function (bFull) {  //全屏切换回调
          //   // console.log('fullScreen callback: ', bFull)
          // },
          // firstFrameDisplay: function (iWndIndex, iWidth, iHeight) {  //首帧显示回调
          //   // console.log('firstFrame loaded callback: ', iWndIndex, iWidth, iHeight)
          // },
          performanceLack: function () {  //性能不足回调
            console.log('performanceLack callback: 性能不足')
          }
        })
      },
      //调用播放
      initPlayer(url, index,type) {
        this.myPlugin.JS_Play(url,
          {
            playURL: url, // 流媒体播放时必传
            mode: type?type:0 // 解码类型：0=普通模式; 1=高级模式 默认为0
            // ...
          },
          index //当前窗口下标
        ).then(
          () => {
            // this.$set(this,'playType',true);
            console.info('JS_Play success')
            // do you want...
          },
          (err) => {
            // this.$set(this,'playType',false);
            console.info('JS_Play failed', err)
            // do you want...
          }
        )
      },
      //全屏
      fullScreen(){
        this.myPlugin.JS_FullScreenSingle(1).then(
          () => {
            // console.info('JS_FullScreenSingle success');
          },
          (err) => {
            // console.info('JS_FullScreenSingle failed');
          }
        );
      },
      videoOff() {
        this.myPlugin.JS_StopRealPlayAll().then(
          () => {
            console.info('JS_StopRealPlayAll success')
            // do you want...
            let type = this.videoData.url.indexOf('wss') !== -1?1:0;
            this.initPlayer(this.videoData.url, 0,type)
          },
          (err) => {
            console.info('JS_StopRealPlayAll failed')
            // do you want...
          }
        )
      },
      //实验室详情开启
      setSubInfoType() {
        this.$refs.mapComponent.subInfoTypeFunction()
      },
      // 关闭map组件报警
      setOffAlarm() {
        this.$refs.mapComponent.offAlarm()
      },
      setOffSubAlarm() {
        this.$refs.subComponent.setOffAlarm()
      },
      //生成随机ID
      generateRandomString() {
        let chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
        let randomString = ''
        for (let i = 0; i < 24; i++) {
          let randomIndex = Math.floor(Math.random() * chars.length)
          randomString += chars.charAt(randomIndex)
        }
        return randomString
      },
    },
    beforeDestroy() {

    },
    destroyed() {

    }
  }
</script>
<style scoped lang="scss">
  .home {
    height: 100%;
    background: no-repeat;
    background-color: #002055;
    .home-page {
      height: 100%;
      .top-max-big-box {
        height: 543px;
        display: flex;
        .videoComponent{
          width:890px;
          height:512px;
          margin:20px 0 0 30px;
          background-image: url("../assets/ZDimages/img_spjk_bg@1x.png");
          background-size: 100% 100%;
          position: relative;
          .full-screen-button {
            background: url("../assets/ZDimages/icon_0.png");
            background-size: 100%;
            position: absolute;
            font-size: 20px;
            height: 30px;
            width: 30px;
            line-height: 30px;
            text-align: center;
            top: 80px;
            right: 80px;
            z-index: 1;
            cursor: pointer;
          }
          .title-p{
            height:47px;
            line-height: 47px;
            color:#fff;
            font-size:20px;
            font-weight: 700;
            font-family: Source Han Sans, Source Han Sans;
            padding-left:24px;
            text-align: center;
          }
          .video-max-big-box{
            width:739px;
            height:419px;
            margin: 24px 0 0 76px;
            border: 1px solid #0183FA;
          }
          .position-left-bottom{
            position: absolute;
            left:-15px;
            bottom:-15px;
            width:42px;
            height:42px;
            z-index:1;
            transform: rotate(270deg);
          }
          .position-right-bottom{
            position: absolute;
            right:-15px;
            bottom:-15px;
            width:42px;
            height:42px;
            z-index:1;
            transform: rotate(180deg);
          }
        }
      }
      .bottom-max-big-box {
        height: 467px;
        display: flex;
      }
    }
  }
</style>
