<template>
  <div class="device">
    <svg-icon icon-class="pop-cross" class="close" @click="changePage"/>
    <div style="height: 48%">
      <div :style="{backgroundImage:'url('+titleAll+')'}" class="title" style="padding-left: 50px;">
        设备详情
      </div>
      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">
        基本信息
      </div>
      <div class="name">
        设备名称：<span class="value">{{ device.devName }}</span>
      </div>
      <div class="name">
        设备类型：<span class="value">{{ device.devTypeName }}</span>
      </div>
      <div class="name">
        设备状态：
        <span v-if="device.statusName==='在线'" class="value" style="margin-left:-2px;color: #08f102">{{ device.statusName }}</span>
        <span v-else-if="device.statusName==='离线'" class="value" style="margin-left:-2px;color: #9b9b9b">{{ device.statusName }}</span>
        <span v-else class="value" style="margin-left:-2px;color: red">{{ device.statusName }}</span>
      </div>
      <div class="name">
        所在楼栋：<span class="value">{{ device.positionName }}</span>
      </div>
      <div class="name">
        所在楼层：<span class="value">{{ device.areaName }}</span>
      </div>
      <div class="name" :style="{height:'55px'}">
        设备位置：<span class="value">{{ device.detailLocation }}</span>
      </div>
    </div>
    <div id="dev-video" class="block">
      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">
        监控视频
      </div>
      <iframe id="playHK" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html" />
    </div>
  </div>
</template>

<script>
import { repostSocket } from '@/api/common'
import { getDrawNoDevice } from '@/api/pop'
export default {
  name: 'Device',
  data() {
    return {
      isShow: true,
      titleImg: require('@/assets/popup/title.png'), // 背景图片
      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
      item: require('@/assets/popup/item.png'), // 背景图片
      device: {
        area: '',
        areaName: '',
        createTime: '',
        detailLocation: '',
        devCode: '',
        devName: '',
        devType: '',
        devTypeName: '',
        id: '',
        ids: '',
        indexCode: '',
        installTime: '',
        ip: '',
        isKeyArea: '',
        isKeyAreaName: '',
        position: '',
        positionName: '',
        remarks: '',
        sn: '',
        status: '',
        statusName: '',
        updateTime: ''
      }
    }
  },
  mounted() {
    this.initData()
    // const that = this
    // window.addEventListener('resize', function() {
    //   that.reload()
    // })
  },
  watch: {
    $route(val) {
      this.initData()
    }
  },
  methods: {
    async initData() {
      if (this.$route.query && this.$route.query.message) {
        getDrawNoDevice(this.$route.query.message.slice(7)).then(async response => {
          if (response.code === 200) {
            this.device = response.data
            await this.$nextTick()
            setTimeout(() => {
              try {
                document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 - 40)
              } catch (e) {
              } finally {
                setTimeout(() => {
                  document.getElementById('playHK').contentWindow.play(this.device.indexCode)
                }, 1000)
              }
            }, 1000)
          }
        })
      }
    },
    async reload() {
      // this.isShow = false
      await this.$nextTick()
      document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 - 40)
      // this.isShow = true
    },
    changePage() {
      const params = {
        type: 'menu',
        message: 'show'
      }
      repostSocket(params).then(response => {
        if (response.code === 200) {
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.iframe-body{
  height: 90%;
  width: 100%;
  frameBorder: 0;
  scrolling: no;
  border: 0;
  vspale: 0;
  z-index: -1;
  padding:0 !important;
}
.device{
  background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
  border-radius: 5px;
  width: 500px;
  height: 100%;
  margin-left: 10px;
  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
  border-color: rgba(0, 0, 0, .05);
  .block{
    height: 48%;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }
  .title{
    text-shadow: 0 0 5px #d1ffff;
    width: 500px;
    height: 35px;
    background-repeat: no-repeat;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    color: white;
    font-weight: bold;
    padding-top: 8px;
    padding-left: 30px;
    font-family: 黑体;
    letter-spacing: 1px;
  }
  .name{
    width: 480px;
    height: 30px;
    line-height: 25px;
    color: white;
    font-weight: bold;
    padding-left: 15px;
    margin-top: 5px;
    margin-left: 10px;
    padding-top: 2px;
    font-size: 15px;
    border-radius: 5px;
    font-family: 黑体;
    font-weight: normal;
    background: linear-gradient(to left, #efc58733, #39a0d333);
    //border-left: 5px solid #219cfa;
    // border-bottom: 5px solid linear-gradient(to left, #efc58733, #39a0d333);
  }
  .value{
    margin-left: 5px;
    color: white;
    font-weight: bold;
  }
  .area-map-image{
    margin-right: 10px;
    margin-left: 5px;
    width: 100%;
    height: 80%;
  }
  .item{
    flex: 1;
    font-weight: bold;
    text-align: center;
    font-size: 15px;
  }
  .close{
    position: absolute;
    right: 20px;
    top:5px;
    color:white;
    background: #fc2323cc;
    width: 25px;
    height:25px;
    border-radius: 5px;
    padding: 3px;
  }
}
</style>