<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="sensor_list">
                   <ul class="main_m_t_c_n">
                       <li v-for="(item,index) in weather" :key="index">
                         <img src="@/assets/image/subject/icon_bj_wd.png" v-if="item.funNum == 'wendu'">
                         <img src="@/assets/image/subject/icon_bj_sd.png" v-if="item.funNum == 'shidu'">
                         <img src="@/assets/image/subject/icon_bj_eyht.png" v-if="item.funNum == 'co'">
                         <img src="@/assets/image/subject/icon_bj_jwnd.png" v-if="item.funNum == 'jiawan'">
                         <img src="@/assets/image/subject/icon_sy_yqnd.png" v-if="item.funNum == 'o2'">
                         <img src="@/assets/image/subject/icon_bj_yg.png" v-if="item.funNum == 'yanwu'">
                         <img src="@/assets/image/subject/icon_sy_dqy.png" v-if="item.funNum == 'daqiya'">
                         <img src="@/assets/image/subject/icon_syspz_voc.png" v-if="item.funNum == 'voc'">
                         <img src="@/assets/image/subject/icon_syspz_tvoc.png" v-if="item.funNum == 'tvoc'">
                         <img src="@/assets/image/subject/icon_sy_mcnd.png" v-if="item.funNum == 'so2'">
                         <img src="@/assets/image/subject/icon_bj_yyhd.png" v-if="item.funNum == 'no1'">
                         <img src="@/assets/image/subject/icon_bj_dqy.png" v-if="item.funNum == 'fenchen'">
                         <img src="@/assets/image/subject/icon_bj_qq.png" v-if="item.funNum == 'H2'">
                         <img src="@/assets/image/subject/guangqi.png" v-if="item.funNum == 'guangqi'">
                         <img src="@/assets/image/subject/lvqi.png" v-if="item.funNum == 'lvqi'">
                         <img src="@/assets/image/subject/icon_syspz_jiaquan.png" v-if="item.funNum == 'jiaquan'">
                         <img src="@/assets/image/subject/icon_syspz_hwcw.png" v-if="item.funNum == 'hwcwy'">
                           <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>{{item.sensorJsonDescribe}}：<i>{{item.sensorJsonValue}} {{item.sensorJsonUnit}}</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">
                        </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 $ from 'jquery'
import {
  abnormalLogOrderByList, bigviewFunctionList, bigviewSub, bigviewWarnMessage,
  controllerList,

  startListDeviceIds
} from "../../api/http"
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:[],

    }
  },
  mounted() {
    let self=this
    this.codeData=this.$route.query.key
    this.subjectId=this.$route.query.subjectId
   // self.switchStateFun();
    //self.getAjaxData();

  },
  methods: {
    /**
     * 横向拖动触发滚动条拖动
     * container：jquery选择器
     */
    dragMoveX(container){
      var flag;
      var downX;
      var scrollLeft;
      //鼠标按下
      $(document.body).on("mousedown", container, function (event) {
        // console.log('mousedown')
        flag = true;
        downX = event.clientX;
        scrollLeft = $(this).scrollLeft();
      });
      //鼠标移动
      $(document).on("mousemove", function (event) {
        // console.log('mousemove')
        if (flag) {
          var moveX = event.clientX;
          var scrollX = moveX - downX;
          // console.log("moveX" + moveX);
          // console.log("scrollX" + scrollX);
          if (scrollX < 0 && scrollLeft > 0) {
            $(container).scrollLeft(scrollLeft - scrollX)
          }
          else {
            $(container).scrollLeft(scrollLeft - scrollX)
          }
        }
      });
      //鼠标释放
      $(document).on("mouseup", function () {
        // console.log('mouseup')
        flag = false;
      });
      /**
       * 注意：与 mouseout 事件不同，mouseleave 事件只有在鼠标指针离开被选元素时被触发，mouseout 事件在鼠标指针离开任意子元素时也会被触发。参见页面底部演示实例。
       * 所以：如果mouseout的子元素存在溢出，并添加了超出加滚动，那么刚进入也会触发该事件，所以这里就不能使用。
       * */
      //鼠标移出元素
      $(container).on("mouseleave", function (event) {
        // console.log('mouseleave')
        if (event.pageX < 0 || event.pageX > document.body.offsetWidth) {
          flag = false;
        }
      });
    },
    back(){
        this.$router.push('/home')
    },
    leftVideoFunction:function(){
      //videoElement
      let self = this;
      //本地视频数据
      self.leftVideoList = [];

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

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

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

          obj.flvPlayer = flvjs.createPlayer(
              {
                // isLive: true, //=> 是否为直播流
                // hasAudio: false, //=> 是否开启声音
                type: 'flv', //媒体类型 flv 或 mp4
                url:self.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 指示在执行自动清理时为后向缓冲区保留的持续时间（以秒为单位）。
              }
          );

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

        }
      }

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

          self.leftVideoList[i].flvPlayer.attachMediaElement(self.leftVideoListOne[i].player);
          self.$forceUpdate();
          self.leftVideoList[i].flvPlayer.load(); //加载
          self.leftVideoList[i].flvPlayer.play(); //播放
        }
      },2000);
    },

    //获取开关状态
    switchStateFun(){
      let self=this;
      controllerList(this.subjectId).then((res) =>{
        if(res.code==200){
          let data=res.data;
          self.switchList=data
        }
      })
    },
    //获取摄像头列表
    cameraListFun(){
      let self=this;
      let obj = {
        count:"2",
        deviceIds:self.tvIds,
        //deviceIds:'440102004920000000010013',
        page:"1",
      };

      startListDeviceIds(obj).then((res) =>{
        if(res.code==200){
          let list = [];
          for(let i=0;i<res.data.length;i++){
            let text = localStorage.getItem('cameraUrl');
            let url = res.data[i].fmp4;
            url = url.split("rtp/");
            let newUrl = text+'rtp/'+url[1];
            let obj = {
              name:"楼道监控"+(i+1),
              id:res.data[i].deviceID,
              url:newUrl,
            }
            list.push(obj)
          }
          this.urlList = list;
          console.log(this.urlList)
        }
      })
    },
    //视屏全屏方法
    videoFullScreen(index){
      this.$refs.videoRef[index].webkitRequestFullScreen();
    },
    getAjaxData: function () {
      let self = this;
      //获取报警详情

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

          for(let i=0;i< self.planAxis.length;i++){
            if( self.planAxis[i].sensorJson){
              self.planAxis[i].sensorJsonValue = JSON.parse(self.planAxis[i].sensorJson)[0].value;
              self.planAxis[i].sensorJsonDescribe = JSON.parse(self.planAxis[i].sensorJson)[0].describe;
              self.planAxis[i].sensorJsonUnit = JSON.parse(self.planAxis[i].sensorJson)[0].unit;

            }
          }

        }
      })

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

          self.tvIds=list

          self.cameraListFun();

        }
      })

      //传感器信息
      bigviewFunctionList(this.subjectId).then((res) =>{
        if(res.code==200){
          let data=res.data;
          self.weather=data
        }
      })
      //消息推送记录
      bigviewWarnMessage(this.codeData).then((res) =>{
        if(res.code==200){
          let data=res.data;
          self.msgsPush=data
        }
      })
    }
  },

  beforeMount() {
    this.dragMoveX('.sensor_list')
  }
}
</script>
<style lang="scss" scoped>
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    .main {
        width: 1920px;
        height: 1080px;
        /*  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: 0px;
            top: 0px;
            z-index: 100;
            display: flex;
            justify-content: flex-start;

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

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

                }
            }
            /*时间轴*/
            .main_m_b{
                height: 278px;
                margin-top: 10px;
                .time-box{

                    width: 100%;
                    overflow-y: auto;
                    >ul{


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


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

                .main_b_l_t{


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

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