<template lang='pug'>
    div.infopage()
      //- 报警视频联动画面页面
      div.sp(v-if="flag == 1")
        el-button.backBtn(@click='goBack') 返回上一页
        sp(ref="spPage")
      //- 视频回放页
      div.sp(v-if="flag == 3")
        el-button.backBtn(@click='goBack') 返回上一页
        playback(ref="pbPage")
      //- 截图页面
      div.sp(v-show="flag == 4")
        el-button.backBtn(@click='flag = 0') 返回上一页
        pics(ref="PicPage")
      div.sp(v-show="flag == 0")
        div.hander()
          p {{warning.area||'第二防区'}}电子围栏报警信息详情
          div.testbtn()
            el-button.backBtn(@click='testBtn(1)' style="background-color: rgb(81, 100, 134);") 测试预警
            el-button.backBtn(@click='testBtn(2)' style="background-color: rgb(81, 100, 134)") 测试设备

        div.content()
          div.left()
            div.spBox()
              img.bg(src="@/assets/images/cameraBg.png")
              div.equ(v-show='visiableEqu' @click="demo2(1)")
                img.camera-big(v-show='visiableBig' src="@/assets/images/camera.png" :style='styleBig')
                img.camera-mid(v-show='visiableMid' src="@/assets/images/camera.png" :style='styleMid')
                img.camera-lit(v-show='visiableLit' src="@/assets/images/camera.png" :style='styleLit')
          div.right()
            div.wanginfo()
              h3 报警信息
              p 报警地点：{{warning.area||''}}
              p 报警时间：{{warning.warningTime||''}}
              p 报警设备：{{equipment.cameraName||''}}
            div.operate()
              div.liand(@click="test1") 联动操作
              div.btns()
                div.Bitem(@click="demo2")
                  div.pic()
                    img(src="@/assets/images/icon22x.png")
                  p 摄像头联动调用
                div.Bitem(@click="getLocation")
                  div.pic()
                    img(src="@/assets/images/icon12x.png")
                  p 最近摄像头定位显示
                div.Bitem(@click="toPlayBack")
                  div.pic()
                    img(src="@/assets/images/icon32x.png")
                  p 最近2分钟视频回放
                div.Bitem(@click="toPics")
                  div.pic()
                    img(src="@/assets/images/icon42x.png")
                  p 图片截取(4张)

</template>

<script>
import sp from './sp.vue'
import pics from './pictures.vue'
import playback from './playBack.vue'

export default {
  components: {
    sp,
    pics,
    playback
  },
  data() {
    return {
      flag: 0,
      warningId: '',
      equipment: {},
      warning: {},
      interval: '',
      visiableEqu: true,
      visiableBig: false,
      visiableMid: false,
      visiableLit: false,
      top: 0.0,
      left: 0.0,
      styleBig: '',
      styleMid: '',
      styleLit: ''
    }
  },
  // 监听,当路由发生变化的时候执行
  watch: {
    $route(to, from) {
      if (!to.query.flag) {
        this.goBack()
      }
    }
},
  created() {
    this.flag = this.$route.query.flag || 0
    if (this.$route.query.warningId) {
      this.warningId = this.$route.query.warningId
    }
    this.init()
  },
  methods: {
    testBtn(v) {
      let Tapi = ''
      if (v === 1) {
        Tapi = '/eWaring/yujing'
      } else {
        Tapi = '/ eWaring/shebei'
      }
      this.$http({
        url: this.$http.adornUrl(Tapi),
        method: 'GET'
      }).then((data) => {
        this.$message.success(data.time)
      })
    },
    test1() {
      this.$http({
        url: this.$http.adornUrl('/eWarning/test?remark=112test'),
        method: 'POST'
      }).then((data) => {
        this.$message.success('模拟数据发送成功')
      })
    },
    goBack() {
      this.flag = 0
      this.$refs.spPage.clickStopRealPlay()
      this.$refs.pbPage.clickStopRealPlay()
    },
    init() {
      console.log(this.warningId, 1111)

      this.initStyle()
      if (this.warningId) {
        this.$http({
            url: this.$http.adornUrl(`/eWarning/getId/${this.warningId}`),
            method: 'get'
        }).then((data) => {
            if (data && data.code === 0) {
              // console.log('预警信息：', data)
              this.warning = data.warning
              this.equipment = data.equipment
              this.getLocation()
            }
        })
      } else {
        this.$http({
          url: this.$http.adornUrl('/eWarning/list'),
          method: 'POST',
          params: this.$http.adornParams({
            page: 1,
            rows: 1
          })
        }).then((data) => {
          if (data && data.code === 0) {
            this.warning = data.page.records[0]
            this.equipment.cameraCode = this.warning.cameraCode
            this.equipment.cameraName = this.warning.equName
            this.getLocation()
          }
        })
      }
    },
    initStyle() {
      this.styleBig = 'top: ' + this.top + '%;left: ' + this.left + '%;'
      this.styleMid = 'top: ' + (this.top + 2) + '%;left: ' + (this.left + 1) + '%;'
      this.styleLit = 'top: ' + (this.top + 3) + '%;left: ' + (this.left + 1.7) + '%;'
    },
    getLocation() {
      if (this.equipment.cameraCode) {
        this.visiableEqu = true
        this.visiableBig = true
        if (this.equipment.cameraCode === '101') {
          this.top = 21.0
          this.left = 29.4
        } else if (this.equipment.cameraCode === '102') {
          this.top = 56.6
          this.left = 78.7
        } else if (this.equipment.cameraCode === '103') {
          this.top = 85.5
          this.left = 18.6
        }
        this.initStyle()
        clearInterval(this.interval)
        //设置倒计时时间，0.2s变换一次
        this.interval = setInterval(function () {
          this.switchImgShow()
        }.bind(this), 200)
      }
    },
    switchImgShow() {
      if (this.visiableBig) {
        this.visiableBig = false
        this.visiableMid = true
        this.visiableLit = false
      } else if (this.visiableMid) {
        this.visiableBig = false
        this.visiableMid = false
        this.visiableLit = true
      } else if (this.visiableLit) {
        this.visiableBig = true
        this.visiableMid = false
        this.visiableLit = false
      }
    },
    demo2(single) {
      // sessionStorage.clear();
      this.flag = 1
       this.$nextTick(() => {
       this.$refs.spPage.init()
      })
      this.$router.push({
        path: '/sys/log',
        query: { flag: 1, single: single }
      })
    },
    toPlayBack() {
      this.flag = 3
      this.$router.push({
        path: '/sys/log',
        query: { flag: 3 }
      })
      this.$nextTick(() => {
       this.$refs.pbPage.init(this.warning)
      })
    },
    toPics() {
      this.flag = 4
      this.$router.push({
        path: '/sys/log',
        query: { flag: 4 }
      })
      this.$nextTick(() => {
       this.$refs.PicPage.init(this.warning)
      })
    }
  }
}
</script>
<style scoped lang="scss">
.d2-theme-container-main-body{
  overflow: auto;
}
.infopage{
  margin:0 20px 0 24px;
  .sp{
    overflow: auto;
    padding-bottom: 100px;
  }

  .backBtn{
    margin-left: 24px;
    width: 120px;
    height: 40px;
    background-color: #021B45;
    color: #fff;
    border: none;
  }
  .hander{
    padding-top:1px;
    width:100%;
    height:83px;
    background-color:#011C45;
    position: relative;
    p {
      text-align:center;
      color: #fff;
      font-size:24px;
      font-family:Microsoft YaHei;
      font-weight:bold;
      opacity:0.75;
    }
    .testbtn{
      position: absolute;
      top: 20px;
      right: 20px;
      display: flex;
      justify-content: space-around;
    }
  }
  .content {
    margin-top:24px;
    display:flex;
    justify-content: space-between;
    .left{
      width: 70%;
      height: 630px;
      background-color:#041B41;
      display: flex;
      justify-content: space-around;
      align-items: center;
      opacity:1;
      border:2px solid;
      border-image:linear-gradient(90deg, rgba(255, 255, 255, 0.5), rgba(213, 213, 213, 0.5), rgba(255, 255, 255, 0.5), rgba(218, 218, 218, 0.5), rgba(255, 255, 255, 0.5)) 2 2;
      border-radius:10px;
      overflow: hidden;
      .spBox{
        width: 95%;
        height: 93%;
        opacity:1;
        border:2px solid;
        border-image:linear-gradient(90deg, rgba(255, 255, 255, 0.5), rgba(213, 213, 213, 0.5), rgba(255, 255, 255, 0.5), rgba(218, 218, 218, 0.5), rgba(255, 255, 255, 0.5)) 2 2;
        // border-radius:10px;
        overflow: hidden;
        position: relative;
        .equ{
          cursor: pointer;
        }
        .bg{
          width: 100%;
          height: 100%;
        }
        .camera-big{
          width: 50px;
          height: 50px;
          position: absolute;
        }
        .camera-mid{
          width: 25px;
          height: 25px;
          position: absolute;
        }
        .camera-lit{
          width: 10px;
          height: 10px;
          position: absolute;
        }
      }
    }
    .right{
      width: 30%;
      margin-left:24px;
      color: #fff;
      .wanginfo{
        padding: 1px 20px 0 20px;
        height:235px;
        background-color:#041B41;
        font-size:16px;
        font-family:Microsoft YaHei;
        font-weight:400;
        line-height:36px;
        border:2px solid;
        border-image:linear-gradient(90deg, rgba(255, 255, 255, 0.5), rgba(213, 213, 213, 0.5), rgba(255, 255, 255, 0.5), rgba(218, 218, 218, 0.5), rgba(255, 255, 255, 0.5)) 2 2;
        opacity:0.5;
        border-radius:10px;
        overflow: hidden;
        h3 {
          text-align:center;
          font-size:18px;
        }
        p {
          text-align:left;
          padding-left: 30px;
        }
      }
      .operate{
        margin-top:24px;
        background-color:#041B41;
        height:366px;
        border:2px solid;
        border-image:linear-gradient(90deg, rgba(255, 255, 255, 0.5), rgba(213, 213, 213, 0.5), rgba(255, 255, 255, 0.5), rgba(218, 218, 218, 0.5), rgba(255, 255, 255, 0.5)) 2 2;
        opacity:0.5;
        border-radius:10px;
        overflow: hidden;
        .liand {
          height: 30px;
          text-align: center;
          font-size: 18px;
          padding: 20px;
        }
        .btns{
          display: flex;
          justify-content: space-around;
          align-items:center;
          flex-wrap: wrap;
          .Bitem {
            width: 50%;
            margin-bottom: 30px;
            .pic {
              width: 84px;
              height: 84px;
              margin: 0 auto;
              img {
                width: 100%;
                height: 100%;
                cursor: pointer;
              }
            }
            p{
              text-align: center;
              font-size: 12px;
            }
          }
        }
      }
    }
  }
}
</style>
<style lang='scss'>

.d2-theme-container-main-body{
  overflow: auto;

}
.d2-theme-container-main-body::-webkit-scrollbar {
  // display: none
}
.infopage{
  .el-input__inner{
      // background-color: rgba(7, 58, 116, 0.596) !important;
      border-color: rgb(2, 79, 131);
      // border-color: rgb(8, 109, 177);
      color: #fff;
    }
    .el-range-input {
      // background-color: rgba(7, 58, 116, 0.596) !important;
      color: #fff
    }
    .el-table{
      // background-color: rgba(7, 58, 116, 0.596) !important;
    }
    .el-range-separator{
      color: #fff
    }
    .el-form-item__label {
      color: #fff;
    }
}

</style>
