<template>
  <div class="case">
    <svg-icon icon-class="pop-cross" class="close" @click="changePage"/>
    <el-image :src="alarm.eventPicture ? `${alarm.eventPicture}`: defaultPhoto" v-if="isbig" class="bigpic" @error="errorImg" @click="isbig=false"/>
    <div style="height: 58%;display: flex;flex-wrap: wrap">
      <div :style="{backgroundImage:'url('+titleAll+')'}" class="title" style="padding-left: 50px;">事件详情</div>
      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">基本信息</div>
<!--      v-if="alarm.eventPicture!==''" -->
      <div class="pic">
        <el-image :src="alarm.eventPicture ? `${alarm.eventPicture}`: defaultPhoto" width="210px" height="210px" style="width: 210px; height: 210px;margin-left: 20px" @error="errorImg" @click="isbig=true"/>
      </div>
      <div class="pic">
        <div class="name" style="width: 100%">事件描述：<span class="value">{{alarm.description}}</span></div>
        <div class="name" style="width: 100%">发生时间：<span class="value">{{alarm.updateTime}}</span></div>
        <div class="name" style="width: 100%">事件类别：<span class="value">{{alarm.typeName}}</span></div>
        <div class="name" style="width: 100%">危险级别：
          <span v-if="alarm.levelName==='较大'" class="value" style="margin-left:-2px;color: #ff9933">{{alarm.levelName}}</span>
          <span v-else-if="alarm.levelName==='一般'" class="value" style="margin-left:-2px;color: #9b9b9b">{{alarm.levelName}}</span>
          <span v-else class="value" style="margin-left:-2px;color: red">{{alarm.levelName}}</span>
        </div>
        <div class="name" style="width: 100%;display: flex;justify-content: space-between;">
          <span>事件操作：</span>
          <el-select v-model="alarm.status" size="small" style="flex: 1;margin-top: -2px;" placeholder="事件状态" @change="edit()">
            <el-option label="未解决" value="1"/>
            <el-option label="解决中" value="2"/>
            <el-option label="已解决" value="3"/>
          </el-select>
        </div>
      </div>
      <div class="name" style="width: 100%">识别设备：<span class="value">{{alarm.devName}}</span></div>

      <div class="name" >所在楼栋：<span class="value">{{alarm.positionName}}</span></div>
      <div class="name" >所在楼层：<span class="value">{{alarm.areaName}}</span></div>
      <div class="name" :style="{width:'100%'}">事件位置：<span class="value">{{alarm.detailLocation}}</span></div>
    </div>
    <div class="block" id="case-video">
      <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 {getDrawNoCase} from '@/api/pop'
import { repostSocket } from '@/api/common'
import { updateCase } from '@/api/case'

export default {
  name: 'Case',
  data() {
    return {
      titleImg: require('@/assets/popup/title.png'), // 背景图片
      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
      defaultPhoto: require('@/assets/global_images/photo.png'),
      errorImg: require('@/assets/global_images/photo_error.png'),
      item: require('@/assets/popup/item.png'), // 背景图片
      statusList: [],
      isbig: false,
      alarm: {
        area: '',
        areaName: '',
        categoryLevelCode: '',
        createTime: '',
        description: '',
        detailLocation: '',
        devName: '',
        deviceCode: '',
        drawNo: '',
        eventPicture: '',
        happenTime: '',
        hazardLevelCode: '',
        hikEventType: '',
        id: '',
        indexCode: '',
        isKeyArea: '',
        isKeyAreaName: '',
        levelName: '',
        position: '',
        positionName: '',
        status: '',
        statusName: '',
        typeName: '',
        updateTime: ''
      }
    }
  },
  mounted() {
    this.initData()
    // const that = this
    // window.addEventListener('resize', function() {
    //   that.reload()
    // })
  },
  watch: {
    $route(val) {
      this.initData()
    }
  },
  methods: {
    async reload() {
      await this.$nextTick()
      document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 + 30)
    },
    async initData() {
      if (this.$route.query && this.$route.query.message) {
        this.isbig = false
        getDrawNoCase(this.$route.query.message.slice(7)).then(async response => {
          if (response.code === 200) {
            this.alarm = response.data
            await this.$nextTick()
            setTimeout(() => {
              try {
                document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 + 30)
              } catch (e) {
              } finally {
                setTimeout(() => {
                  document.getElementById('playHK').contentWindow.play(this.alarm.indexCode)
                }, 1000)
              }
            }, 1000)
          }
        })
      }
    },
    changePage() {
      const params = {
        type: 'menu',
        message: 'show'
      }
      repostSocket(params).then(response => {
        if (response.code === 200) {}
      })
    },
    edit() {
      this.$confirm(
        '确定要修改该事件状态吗？',
        '确认操作',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        const data = {
          id: this.alarm.id,
          status: this.alarm.status
        }
        updateCase(data).then(response => {
          if (response.code === 200) {
            this.$message.success('修改成功')
            this.fetchData()
          }
        })
      })
    },
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.bigpic{
  position: absolute;
  top: 20px;
  left: 20px;
  width: 480px;
  z-index: 999999999;
}
.pic{
  width: 48%;
}
.iframe-body{
  height: 90%;
  width: 100%;
  frameBorder: 0;
  scrolling: no;
  border: 0;
  vspale: 0;
  z-index: -1;
  padding:0 !important;
}
.case{
  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: 40%;
    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: 48%;
    height: 34px;
    line-height: 25px;
    color: white;
    font-weight: bold;
    padding-left: 15px;
    margin: 5px;
    padding-top: 4px;
    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>