<template>
<div class="main">
        <Header/>
        <div class="main_t">
            <div class="main_t_t">
                <i class="main_t_t_l">当前位置：首页 &gt;</i>
                <i>风险预案详情</i>
            </div>
        </div>
        <div class="main_m">
            <div class="main_m_t">
                <div class="main_m_t_l">首次报警时间 {{firstTime}}</div>
                <div class="dowebok">
                   <ul class="main_m_t_c_n">
                       <li v-for="(item,index) in weather" :key="item.index">
                           <!--<img src="static/img/img/index_icon6.png"/>-->
                           <img  v-if="item.funNum == 'wendu'" src="@/assets/image/img/index_icon6.png">
                           <img  v-if="item.funNum == 'shidu'" src="@/assets/image/img/index_icon7.png">
                           <img  v-if="item.funNum == 'yanwu'" src="@/assets/image/img/index_icon8.png">
                           <img  v-if="item.funNum == 'daqiya'" src="@/assets/image/img/index_icon11.png">
                           <img  v-if="item.funNum == 'co'" src="@/assets/image/img/index_icon10.png">
                           <img  v-if="item.funNum == 'o2'" src="@/assets/image/img/index_icon9.png">
                           <img  v-if="item.funNum == 'fenchen'" src="@/assets/image/img/index_icon13.png">
                           <img  v-if="item.funNum == 'voc'" src="@/assets/image/img/index_icon17.png">
                           <img  v-if="item.funNum == 'jiawan'" src="@/assets/image/img/index_icon12.png">
                           <img  v-if="item.funNum == 'so2'" src="@/assets/image/img/index_icon14.png">
                           <img  v-if="item.funNum == 'no1'" src="@/assets/image/img/index_icon17.png">
                           <i>{{item.funcName}}</i>
                           <i>{{item.formatVal}}</i>
                       </li>
                   </ul>
                </div>
                <div class="main_m_t_r">
                </div>

            </div>
            <div class="main_m_b">
                <div class="time-box">
                    <ul  >
                        <li class="active" v-for="(item,index2) in planAxis" :key="index2">
                          <p>发生风险：{{item.riskPlanName}}</p>
                          <p>甲烷传感器浓度：<i>{{item.sensorJsonValue}}</i></p>
                          <p>时间：{{item.createTime}}</p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="main_b">
            <div class="main_b_l" v-if="personInfo">
                <div class="main_b_l_t">
                    <li>{{personInfo.subName}}</li>
                    <i>所属院系:{{personInfo.deptName}}</i>
                    <i>实验室负责人:{{personInfo.adminName}}</i>
                    <i>联系方式:{{personInfo.adminPhone}}</i>
                    <i></i>
                    <li>消息推送记录</li>
                </div>
                <div class="main_b_l_b">
                    <div class="main_b_l_b_t">
                        <i>推送方式</i>
                        <i>推送目标</i>
                    </div>
                    <div class="main_b_l_b_b">
                        <li v-for="(item,index3) in msgsPush" :key="index3">
                            <i>{{item.pushType.code==0?'语音播报':'短信推送'}}</i>
                            <i>{{item.showInfo}}</i>
                        </li>
                        <!--<li>
                            <i>语音播报</i>
                            <i>甲烷监测实验室</i>
                        </li>-->
                    </div>
                </div>
            </div>
            <div class="main_b_r">
                <li   v-for="(item,index) in urlList" :key="index" >
                    <div class="main_b_r_li_t" v-if="personInfo">
                        <i>{{personInfo.subName}}</i>
                        <img src="@/assets/image/img/index_icon15.png" @click="videoFullScreen(index)"/>
                    </div>
                    <div class="main_b_r_li_b">
                        <video
                            ref="videoRef"
                           :id="urlList.id" :src="item.url"
                            :custom-cache='false' :autoplay="true" :controls="true"
                            :enable-danmu="false" :muted="true" :show-fullscreen-btn="true"
                            :show-center-play-btn="false" :show-play-btn="false"
                            @error="videoErrorCallback" >
                        </video>
                    </div>
                </li>
                <li v-if="urlList.length<=0">
                    <div class="main_b_r_li_t">
                        <i>暂无视频数据</i>
                        <img src="@/assets/image/img/index_icon15.png"/>
                    </div>
                    <div class="main_b_r_li_b">
                        <video  autoplay controls  muted width="600px" height="410px"></video>
                    </div>
                </li>
                <li v-if="urlList.length<=0">
                    <div class="main_b_r_li_t">
                        <i>暂无视频数据</i>
                        <img src="@/assets/image/img/index_icon15.png"/>
                    </div>
                    <div class="main_b_r_li_b">
                        <video  autoplay controls  muted width="600px" height="410px"></video>
                    </div>
                </li>
            </div>
        </div>

    </div>
</template>

<script>
import flvjs from "flv.js"
import {
  abnormalLogOrderByList, bigviewFunctionList, bigviewSub, bigviewWarnMessage,
  controllerList,
  listCollegeApplyColumn,
  mangerControl,
  requestUrl,
  startListDeviceIds
} from "../api/http"

import $ from 'jquery'
import * as echarts from 'echarts'
import Header from '@/components/header.vue'
export default {
  components: {
    Header
  },
  data() {
    return {
      value: true,
      firstTime:'',
      weather:[],
      planAxis:[],
      msgsPush:[],
      switchList:[],//开关控制
      tvIds:'',

      leftVideoList:[],
      leftVideoListOne:[],

      videoList:[],//视频流对象

      personInfo:null,
      codeData:'',
      subjectId:'',
      urlList:[],

    }
  },
  methods: {
    back(){
      this.$router.push('/')
    },
    leftVideoFunction:function(){
      //videoElement
      let _this = this;
      //本地视频数据
      _this.leftVideoList = [];

      for(let i=0;i<_this.videoList.length;i++){

        if(_this.videoList[i].videoUrl){

          let obj = {
            player :{},
            flvPlayer:{}
          };
          console.log(document.getElementById(_this.videoList[i].divId))
          obj.player = document.getElementById(_this.videoList[i].divId);

          obj.flvPlayer = flvjs.createPlayer(
              {
                // isLive: true, //=> 是否为直播流
                // hasAudio: false, //=> 是否开启声音
                type: 'flv', //媒体类型 flv 或 mp4
                url:_this.videoList[i].videoUrl,
              },
              {
                enableStashBuffer: true,//启用 IO 存储缓冲区。 如果您需要实时流播放（最小延迟），请设置为 false，但如果存在网络抖动，则可能会停止。
                stashInitialSize: 128,//IO 存储缓冲区初始大小。 默认值为 384KB。 指示合适的大小可以改善视频加载/搜索时间。
                isLive: true,//是否是直播
                lazyLoadRecoverDuration: 30,//指示以秒为单位的lazyLoad 恢复时间边界。
                autoCleanupSourceBuffer: true,//进行自动清理
                autoCleanupMaxBackwardDuration: 3 * 60,//3 * 60 当向后缓冲持续时间超过这个值（以秒为单位）时，对 SourceBuffer 进行自动清理
                autoCleanupMinBackwardDuration: 2 * 60,//2 * 60 指示在执行自动清理时为后向缓冲区保留的持续时间（以秒为单位）。
              }
          );

          _this.leftVideoList.push(obj);
          _this.leftVideoListOne.push(obj);

        }
      }

      setTimeout(function(){
        for(let i=0;i<_this.leftVideoList.length;i++){

          _this.leftVideoList[i].flvPlayer.attachMediaElement(_this.leftVideoListOne[i].player);
          _this.$forceUpdate();
          _this.leftVideoList[i].flvPlayer.load(); //加载
          _this.leftVideoList[i].flvPlayer.play(); //播放
        }
      },2000);
    },
    //开关
    switchFun:function (item){
      let _this=this
      if(item.state.code==3 || item.state.code==4){
        let text = item.state.code==3?'关闭':(item.state.code==4?'开启':'');
        this.$confirm('确定要'+text+'该设备吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          _this.mangerControl(item);
        }).catch(() => {

        });
      }
    },
    //开关给后台传输返回结果 需要MQTT监听是否成功
    mangerControl:function (item){
      let _this=this;

      let id=item.id
      let command=item.state.code==3?'close':(item.state.code==4?'open':'')
      let obj={
        id:item.id,
        command:item.state.code==3?'close':(item.state.code==4?'open':'')
      }
      mangerControl({obj}).then((res) =>{
        if(res.code==200){
          let data=res.data;
          _this.$message({
            message: '操作成功',
            type: 'error'
          });
          _this.switchStateFun()
        }else{
          _this.$message({
            message: res.msg,
            type: 'error'
          });
        }
      })
    },
    //获取开关状态
    switchStateFun(){
      let _this=this;
      controllerList(this.subjectId).then((res) =>{
        if(res.code==200){
          let data=res.data;
          _this.switchList=data
        }
      })
    },
    //获取摄像头列表
    cameraListFun(){
      let _this=this;
      let obj = {
        count:"2",
        deviceIds:_this.tvIds,
        //deviceIds:'440102004920000000010013',
        page:"1",
      };

      startListDeviceIds(obj).then((res) =>{
        if(res.code==200){
          let data=res
          // for(let i=0;i<data.data.length;i++){
          //   let list = {
          //     divId:'divId'+i,
          //     hasAudio:false,
          //     height:false,
          //     videoError:"",
          //     videoUrl:data.data[i].result.body.data.flv,
          //   }
          //   _this.videoList.push(list)
          //   _this.$forceUpdate();
          //   setTimeout(function(){
          //     _this.leftVideoFunction();
          //   },2000);
          // }
          let list = [];
          for(let i=0;i<data.data.length;i++){
            let text = 'https://lab.sxitdlc.com/jinandaxue/stream/';
            let url = data.data[i].result.body.data.fmp4;
            url = url.split("rtp/");
            let newUrl = text+'rtp/'+url[1];
            let obj = {
              name:"楼道监控"+(i+1),
              id:data.data[i].result.body.data.deviceID,
              url:newUrl,
            }
            list.push(obj)
          }
          this.urlList = list;
          console.log(this.urlList)
        }
      })
    },
    //视屏全屏方法
    videoFullScreen(index){
      this.$refs.videoRef[index].webkitRequestFullScreen();
    },
    getAjaxData: function () {
      let _this = this;
      //获取报警详情

      abnormalLogOrderByList({'groupId':this.codeData}).then((res) =>{
        if(res.code==200){
          let data=res.data;
          _this.firstTime=data[0].createTime
          _this.planAxis=data;

          for(let i=0;i< _this.planAxis.length;i++){
            if( _this.planAxis[i].sensorJson){
              _this.planAxis[i].sensorJsonValue = JSON.parse(_this.planAxis[i].sensorJson)[0].value;

            }
          }

        }
      })

      //实验室简要信息
      bigviewSub(this.subjectId).then((res) =>{
        if(res.code==200){
          let data=res.data;
          let list='';
          _this.personInfo=data
          for(let i=0;i<data.tvIds.length;i++){
            list +=data.tvIds[i]+",";
          }

          _this.tvIds=list

          _this.cameraListFun();

        }
      })

      //传感器信息
      bigviewFunctionList(this.subjectId).then((res) =>{
        if(res.code==200){
          let data=res.data;
          _this.weather=data
        }
      })
      //消息推送记录
      bigviewWarnMessage(this.codeData).then((res) =>{
        if(res.code==200){
          let data=res.data;
          _this.msgsPush=data
        }
      })
    }
  },
  mounted() {
    let _this=this
    this.codeData=this.$route.query.key
    this.subjectId=this.$route.query.subjectId
    _this.switchStateFun();
    _this.getAjaxData();
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>

@function rw($px){

  @return $px*100/1920 *1vw;
}
@function rh($px){

  @return $px*100/1080 *1vh;
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.main {
  width: rw(1920);
  height: rh(1080);
  /*  background: url("../img/index_icon17.png") no-repeat;
    background-size: 100% 100%;*/
  position: relative;
  left: 0;
  top: 0;
  z-index: 50;

  background: #062338;

  .header {
    width: 100%;
    position: absolute;
    left: rw(0);
    top: rh(0);
    z-index: 100;
    display: flex;
    justify-content: flex-start;

    .header_l {
      width: rw(182);
      height: rh(44);
      margin: rh(10) 0 0 rw(40);
    }
    .header_c {
      width: rw(1180);
      height: rh(152);
      margin-left: rw(136);
      background: url("~@/assets/image/index_icon2.png") no-repeat;
      background-size: 100% 100%;
      font-size: rh(30);
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #FFFFFF;
      line-height: rh(30);
      text-align: center;
      padding-top: rh(26);
    }
    .header_r {
      margin-left: rw(264);
      width: rw(82);
      height: rh(32);
      margin-top: rh(18);
    }
  }
  .main_t{
    width: rw(1852);
    height: rh(352);
    position: absolute;
    left: rw(34);
    top: rh(86);
    z-index: 200;
    .main_t_t{
      margin: rh(20) 0 0 rw(18);
      >i{
        font-size: rh(16);
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #FFFFFF;
        line-height: rh(16);
      }
      >i:nth-of-type(1){

      }
      >i:nth-of-type(2){
        color: #1ED0F8;
      }
    }
  }
  .main_m{
    width: rw(1852);
    position: absolute;
    left: rw(34);
    top: rh(152);
    z-index: 200;
    .main_m_t{
      width: 100%;
      height: rh(80);
      background: rgba(9, 55, 81, 0.6);
      display: flex;
      justify-content: space-between;
      align-items: center;
      overflow: hidden;
      .main_m_t_l{
        width: rw(386);
        font-size: rh(18);
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #E01622;
        line-height: rh(18);
        margin-left: rw(24);
      }
      .dowebok{
        width: rw(1370);
        height: rh(80);
        background: 0;
        .main_m_t_c_n{
          /* width: rw(2000);
           display: flex;
           justify-content: flex-start;
           align-items: center;*/
          >li{
            width: rw(202);
            height: 100%;
            display: inline-block;
            margin-left: rw(8);
            >img{
              width: rw(20);
              height: rh(26);
            }
            >i{
              font-size: rh(16);
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #FFFFFF;
              line-height: rh(80);
              display: inline-block;
            }
            >i:nth-of-type(1){
              margin:0 rw(16);
            }
            >i:nth-of-type(2){
              color: #01E7E9;
            }
          }
        }
      }
      .main_m_t_r{
        display: flex;
        justify-content: space-between;
        /* width: rw(360);*/
        >li{
          width: rw(120);
          >i{
            display: block;
            font-size:rh(14);
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #FFFFFF;
            line-height: rh(14);
            margin-bottom: rh(8);
          }
          .main_m_t_r_li_r{
            width: rw(60);
            height: rh(26);
            margin-left: rw(12);
          }
        }
      }
      .close_btn{
        width: rw(18);
        height: rh(18);
        margin-right: rw(20);

      }
    }
    /*时间轴*/
    .main_m_b{
      height: rh(278);
      margin-top: rh(10);
      .time-box{
        width: 100%;margin: 0 auto;overflow: hidden;
        >ul{
          overflow: hidden;position: relative;height:rh(255);
          >li{
            width:rw(242);
            height: rh(98);
            float: left;
            position: relative;
            cursor: pointer;
            background: rgba(9, 55, 81, 0.6);
            border-radius: rw(10);
            >p{
              font-size: rh(14);
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #FFFFFF;
              line-height: rh(14);
              text-align: center;
              >i{
                color: #FF6060;
              }
            }
            >p:nth-of-type(1){
              margin: rh(12) 0 rh(14) 0;
            }
            >p:nth-of-type(2){
              margin-bottom: rh(14);
            }
            >p:nth-of-type(3){}
          }
          >li:after{
            content: "";
            width: rw(32);
            height: rh(32);
            background: url("~@/assets/image/img/index_icon16.png") no-repeat;
            position: absolute;
            left:50%;margin-left:rw(-7);
            bottom: 0;
            bottom: rh(-48);
            z-index: 1;}
          >li:nth-child(2n):after{
            bottom: auto;top:rh(-46);
          }
          >li:nth-child(2n){
            margin-top:rh(160);
          }
        }
        >ul:after{content: "";background: #d2d2d2;height: 1px;width: 100%;position: absolute;left:0;top:50%;}


      }
    }
  }
  .main_b{
    width: rw(1852);
    height: rh(550);
    position: absolute;
    left: rw(34);
    top: rh(508);
    z-index: 200;
    background: rgba(9, 55, 81, 0.6);
    display: flex;
    justify-content: flex-start;
    .main_b_l{
      width: rw(370);
      margin-left: rw(24);
      // border: 1px solid #486CC2;

      .main_b_l_t{


        >li{
          font-size: rh(18);
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #486CC2;
          line-height: rh(18);
        }
        >i{
          display: block;
          font-size: rh(14);
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #FFFFFF;
          line-height:rh(14);
          margin-top: rh(20);
          margin-left: rw(32);
        }
        >i:nth-of-type(4){
          margin-left: 0;
          border: 1px solid #486CC2;
        }
        >li:nth-of-type(1){
          margin-top: rh(42);
        }
        >li:nth-of-type(2){
          margin-top: rh(22);
        }
      }
      .main_b_l_b{
        margin-top: rh(14);
        height: rh(268);
        overflow-y: hidden;
        .main_b_l_b_t{
          height: rh(40);
          background: rgba(72, 108, 194, 0.2);
          display: flex;
          justify-content: flex-start;
          >i{
            display: inline-block;
            font-size: rh(16);
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #FFFFFF;
            line-height: rh(40);
            white-space:nowrap;overflow:hidden;text-overflow:ellipsis;

          }
          >i:nth-of-type(1){
            width: rw(166);
            margin-left: rw(32);
          }
          >i:nth-of-type(2){
            width: rw(174);
          }
        }
        .main_b_l_b_b{
          >li{
            height: rh(30);
            display: flex;
            justify-content: flex-start;
            >i{
              display: inline-block;
              font-size: rh(14);
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #FFFFFF;
              line-height: rh(30);
              white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
            }
            >i:nth-of-type(1){
              width: rw(166);
              margin-left: rw(32);
            }
            >i:nth-of-type(2){
              width: rw(174);
            }
          }
          >li:nth-of-type(even){
            background: rgba(72, 108, 194, 0.2);
          }
        }
      }
    }
    .main_b_r{
      width: rw(1338);
      display: flex;
      justify-content: space-between;
      margin-top: rh(40);
      margin-left: rw(54);
      overflow: hidden;
      >li{
        width: rw(650);
        height: rh(488);
        padding: 0 rw(24);
        box-sizing: border-box;
        border: 1px solid #486CC2;
        .main_b_r_li_t{
          height: rh(52);
          display: flex;
          justify-content: space-between;
          align-items: center;
          >i{
            display: inline-block;
            font-size:rh(16);
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #FFFFFF;
            line-height: rh(16);
          }
          >img{
            width: rw(24);
            height: rh(24);
          }
        }
        .main_b_r_li_b{
          width: rw(600);
          height: rh(410);
          >video{
            width: rw(600);
            height: rh(410);
          }
        }
      }
    }
  }
}
</style>
<style lang="scss">
li{list-style:none}
i,em,b{font-style:normal;font-weight:100;}
body{margin: 0}
</style>
