<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>
        <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 { loginYiLi } from '@/api/yiLi'
  import { getConfigByType } from '@/api/index'
  import { setToken, setTokenYiLi } 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
      }
    },
    created() {

    },
    mounted() {
      this.login()
    },
    methods: {
      login() {
        let self = this
        Promise.all([
          this.getToken(),
          this.getTokenYiLi()
        ]).then((result) => {
            setTimeout(function() {
              self.getExploitConfig()
            },500)
        }).catch((error) => {
        })
      },
      //获取token
      getToken() {
        login().then(res1 => {
          setToken(res1.data.token)
        })
      },
      //获取YiLi-token
      getTokenYiLi() {
        loginYiLi().then(res2 => {
          setTokenYiLi(res2.access_token)
        })
      },
      //获取开发配置
      getExploitConfig() {
        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)
        })
      },
      //通知组件数据给予
      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.$refs.videoComponent.initialize(item)
      },
      //实验室详情开启
      setSubInfoType() {
        this.$refs.mapComponent.subInfoTypeFunction()
      },
      // 关闭map组件报警
      setOffAlarm() {
        this.$refs.mapComponent.offAlarm()
      },
      setOffSubAlarm() {
        this.$refs.subComponent.setOffAlarm()
      }
    },
    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;
      }
      .bottom-max-big-box {
        height: 467px;
        display: flex;
      }
    }
  }
</style>
