<!--预警详情-->
<template>
  <div class="infoPage">
    <div class="title-box">
      <p>预警详情</p>
      <p></p>
      <p class="add-button-one-90" @click="outButton">返回</p>
    </div>
    <div class="content-box scrollbar-box">
      <div class="info-max-box">
        <p class="title-p">预警信息</p>
        <div class='info-big-box'>
          <div class='info-box'>
            <div>
              <p>预警时间：</p>
              <p>{{infoData.warningTime}}</p>
            </div>
          </div>
          <div class='info-box'>
            <div>
              <p>预警类型：</p>
              <p>{{infoData.warningType==1?'算法识别':(infoData.warningType==2?'化学品':(infoData.warningType==3?'气瓶':'-'))}}</p>
            </div>
          </div>
          <div class='info-box'>
            <div>
              <p>预警内容：</p>
              <p>{{infoData.warningContent}}</p>
            </div>
          </div>
          <div class='info-box'>
            <div>
              <p>通知方式：</p>
              <p><span>{{infoData.warningWay}}</span></p>
            </div>
          </div>
          <div class='info-box'>
            <div>
              <p>位置：</p>
              <p>{{infoData.subName}}-{{infoData.buildName}}{{infoData.floorName}}{{infoData.roomNum}}</p>
            </div>
          </div>
        </div>
        <p class="border-p"></p>
      </div>
      <div class="info-max-box" v-if="infoData.warningType==2">
        <p class="title-p">化学品信息</p>
        <div class='info-big-box'>
          <div class='info-box'>
            <div>
              <p>化学品名称：</p>
              <p>{{infoData.name}}</p>
            </div>
          </div>
          <div class='info-box'>
            <div>
              <p>化学品余量：</p>
              <p>{{infoData.margin}}</p>
            </div>
          </div>
          <div class='info-box'>
            <div>
              <p>化学品规格：</p>
              <p>{{infoData.specification}}</p>
            </div>
          </div>
          <div class='info-box' v-if="infoData.warningSubType==2">
            <div>
              <p>申领人：</p>
              <p>{{infoData.applyUser}}</p>
            </div>
          </div>
          <div class='info-box' v-if="infoData.warningSubType==2">
            <div>
              <p>申领时间：</p>
              <p>{{infoData.applyTime}}</p>
            </div>
          </div>
          <div class='info-box' v-if="infoData.warningSubType==3 || infoData.warningSubType==4">
            <div>
              <p>过期时间：</p>
              <p>{{infoData.expirationTime}}</p>
            </div>
          </div>
          <div class='info-box'>
            <div>
              <p>存放位置：</p>
              <p>{{infoData.deposit}}</p>
            </div>
          </div>
        </div>
        <p class="border-p" v-if="infoData.data15 || infoData.data16 || infoData.data17"></p>
      </div>
      <div class="info-max-box" v-if="infoData.warningType==3">
        <p class="title-p">气瓶信息</p>
        <div class='info-big-box'>
          <div class='info-box'>
            <div>
              <p>气体名称：</p>
              <p>{{infoData.name}}</p>
            </div>
          </div>
          <div class='info-box'>
            <div>
              <p>气体余量：</p>
              <p>{{infoData.margin}}</p>
            </div>
          </div>
          <div class='info-box'>
            <div>
              <p>气瓶规格：</p>
              <p>{{infoData.specification}}</p>
            </div>
          </div>
          <div class='info-box' v-if="infoData.warningSubType==2">
            <div>
              <p>申领人：</p>
              <p>{{infoData.applyUser}}</p>
            </div>
          </div>
          <div class='info-box' v-if="infoData.warningSubType==2">
            <div>
              <p>申领时间：</p>
              <p>{{infoData.applyTime}}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="info-max-for-message-box" v-if="infoData.messageVOList.length>0">
        <p class="title-p">短信通知</p>
        <div class='info-big-box'>
          <p v-for="(item,index) in infoData.messageVOList" :key="index">{{item.name}} - {{item.messageTime}}</p>
        </div>
      </div>
      <div class="info-max-for-img-box" v-if="infoData.warningSubType!=2 && infoData.warningSubType!=3 && infoData.warningSubType!=4">
        <p class="title-p">报警抓拍</p>
        <div class='info-big-box'>
          <div v-if="infoData.warningType!=1" class="for-video-box"  @click="lookVideo(videoUrl+infoData.recordVideo,'')">
            <video :src="videoUrl+infoData.recordVideo" controls="controls"></video>
            <p class="el-icon-video-play positionP"></p>
          </div>
          <div v-if="infoData.warningType==1" class="for-img-box" v-for="(item,index) in infoData.warningDetailList" :key="index" @click="lookImg(infoData.warningDetailList,index)">
            <img :src="item.photoUrl">
          </div>
        </div>
      </div>
    </div>
    <lookImgDialog ref="lookImgDialog"></lookImgDialog>
    <lookVideoDialog ref="lookVideoDialog"></lookVideoDialog>
  </div>
</template>

<script>
  import { warningNoticeLogDetail} from '@/api/laboratory/warningNotice'
  import lookImgDialog from '@/components/lookImgDialog/lookImgDialog.vue'
  import lookVideoDialog from '@/components/lookVideoDialog/lookVideoDialog.vue'
  export default {
    name: 'infoPage',
    components: {
      lookImgDialog,
      lookVideoDialog
    },
    props:{
      pageData: {},
    },
    data(){
      return{
        videoUrl: window.location.href.split('://')[0]+'://' + process.env.VUE_APP_BASE_API,
        infoData:{
          messageVOList:[],
        },
        data17:[
          {fileName:"",fileUrl:"http://192.168.1.43/statics/2023/06/06/baba141f-05b4-4d3a-b4e6-81d67096cfd1.jpg"},
          {fileName:"",fileUrl:"http://192.168.1.43/statics/2023/06/06/0e76d4b5-536e-449b-b8ce-7fa9ff48ced6.jpg"},
        ],

      }
    },
    created(){
    },
    mounted(){
      this.getInfo();
    },
    methods:{
      //查看视屏
      lookVideo(item){
        this.$refs.lookVideoDialog.lookVideoDialogOpen(1,item,'报警抓拍');
      },
      //查看图片
      lookImg(list,index){
        for(let i=0;i<list.length;i++){
          list[i].url = list[i].photoUrl;
        }
        this.$refs.lookImgDialog.lookImgDialogOpen(1,list,index,'报警抓拍');
      },
      /* 详情 */
      getInfo(){
        warningNoticeLogDetail({id:this.pageData.id}).then( response => {
          let res=response.data;
          if(response.code==200){
              this.infoData=res;
              if(this.infoData.warningWay!='' && this.infoData.warningWay!=null){
                this.infoData.warningWay=this.infoData.warningWay.replace(/1/, "系统通知")
                this.infoData.warningWay=this.infoData.warningWay.replace(/2/, "短信通知")
                this.infoData.warningWay=this.infoData.warningWay.replace(/3/, "声光报警")
                this.infoData.warningWay=this.infoData.warningWay.replace(/4/, "语音播报")
                this.infoData.warningWay=this.infoData.warningWay.replace(/5/, "电话通知")
                if (this.infoData.warningWay.endsWith(',')) {
                  this.infoData.warningWay=this.infoData.warningWay.replace(/,/, " ")
                }
                this.infoData.warningWay= this.infoData.warningWay.replace(/,/g, "+");

              }else{
                this.infoData.warningWay='-'
              }
          }
        });

      },
      //返回事件
      outButton(){
        this.$parent.goPage(1);
      },
    }
  }
</script>

<style scoped lang="scss">
  .infoPage{
    font-weight: 500;
    flex: 1;
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
    .title-box{
      display: flex;
      border-bottom:1px solid #dedede;
      p:nth-child(1){
        margin-left:20px;
        line-height: 80px;
        font-size:18px;
        color:#0045AF;
      }
      p:nth-child(2){
        flex:1;
      }
      p:nth-child(3){
        margin:20px;
      }
    }
    .content-box{
      flex:1;
      padding-bottom:40px;
      .info-max-box{
        margin:0 57px;
        .title-p{
          height:60px;
          line-height:70px;
          font-size:18px;
        }
        .info-big-box{
          margin-left:20px;
          .info-box{
            width:450px;
            display: inline-block;
            overflow:hidden;
            margin-right:22px;
            div{
              display: flex;
              line-height:24px;
              padding:16px 0;
              font-size:16px;
              p:nth-child(1){
                width:100px;
                text-align: right;
              }
              p:nth-child(2){
                flex:1;
                overflow: hidden;
                text-overflow:ellipsis;
                white-space:nowrap;
              }
            }
          }
        }
        .border-p{
          height:1px;
          background-color: #D8D8D8;
          margin:0 24px;
        }
      }
      .info-max-for-message-box{
        margin:0 57px;
        .title-p{
          height:60px;
          line-height:70px;
          font-size:18px;
        }
        .info-big-box{
          margin-left:40px;
          p{
            line-height:24px;
            padding:16px 0;
            font-size:16px;
            width:320px;
            display: inline-block;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
            margin-right:30px;
          }
        }
        .border-p{
          height:1px;
          background-color: #D8D8D8;
          margin:0 24px;
        }
      }
      .info-max-for-img-box{
        margin:0 57px;
        .title-p{
          height:60px;
          line-height:70px;
          font-size:18px;
        }
        .info-big-box{
          margin-left:40px;
          .for-video-box{
            cursor: pointer;
            width:150px;
            height:150px;
            border-radius:8px;
            display: inline-block;
            overflow: hidden;
            margin:0 20px 20px 0;
            position: relative;
            .backImg{
              width:150px;
              height:150px;
            }
            .positionP{
              width:150px;
              height:150px;
              line-height:150px;
              text-align: center;
              position: absolute;
              top:0;
              left:0;
              color:#fff;
              font-size:60px;
              z-index: 10;
            }
          }
          .for-img-box{
            cursor: pointer;
            width:150px;
            height:150px;
            border-radius:8px;
            display: inline-block;
            overflow: hidden;
            margin:0 20px 20px 0;
            img{
              width:150px;
              height:150px;
            }
          }
        }
        .border-p{
          height:1px;
          background-color: #D8D8D8;
          margin:0 24px;
        }
      }
    }
  }
</style>
