<!--预警详情-->
<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.data1}}</p>
            </div>
          </div>
          <div class='info-box'>
            <div>
              <p>预警类型：</p>
              <p>{{infoData.data2}}</p>
            </div>
          </div>
          <div class='info-box'>
            <div>
              <p>预警内容：</p>
              <p>{{infoData.data3}}</p>
            </div>
          </div>
          <div class='info-box'>
            <div>
              <p>通知方式：</p>
              <p>{{infoData.data4}}</p>
            </div>
          </div>
          <div class='info-box'>
            <div>
              <p>位置：</p>
              <p>{{infoData.data5}}</p>
            </div>
          </div>
        </div>
        <p class="border-p"></p>
      </div>
      <div class="info-max-box">
        <p class="title-p">化学品信息</p>
        <div class='info-big-box'>
          <div class='info-box'>
            <div>
              <p>化学品名称：</p>
              <p>{{infoData.data6}}</p>
            </div>
          </div>
          <div class='info-box'>
            <div>
              <p>化学品余量：</p>
              <p>{{infoData.data7}}</p>
            </div>
          </div>
          <div class='info-box'>
            <div>
              <p>化学品规格：</p>
              <p>{{infoData.data8}}</p>
            </div>
          </div>
          <div class='info-box'>
            <div>
              <p>存放位置：</p>
              <p>{{infoData.data9}}</p>
            </div>
          </div>
        </div>
        <p class="border-p" v-if="infoData.data15 || infoData.data16 || infoData.data17"></p>
      </div>
      <div class="info-max-box">
        <p class="title-p">气瓶信息</p>
        <div class='info-big-box'>
          <div class='info-box'>
            <div>
              <p>气体名称：</p>
              <p>{{infoData.data10}}</p>
            </div>
          </div>
          <div class='info-box'>
            <div>
              <p>气体余量：</p>
              <p>{{infoData.data11}}</p>
            </div>
          </div>
          <div class='info-box'>
            <div>
              <p>气瓶规格：</p>
              <p>{{infoData.data12}}</p>
            </div>
          </div>
          <div class='info-box'>
            <div>
              <p>申领人：</p>
              <p>{{infoData.data13}}</p>
            </div>
          </div>
          <div class='info-box'>
            <div>
              <p>申领时间：</p>
              <p>{{infoData.data14}}</p>
            </div>
          </div>
        </div>
        <p class="border-p" v-if="infoData.data15 || infoData.data16 || infoData.data17"></p>
      </div>
      <div class="info-max-for-message-box">
        <p class="title-p">短信通知</p>
        <div class='info-big-box'>
          <p v-for="(item,index) in infoData.data15" :key="index">{{item.name}} - {{item.time}}</p>
        </div>
        <p class="border-p" v-if="infoData.data16 || infoData.data17"></p>
      </div>
      <div class="info-max-for-img-box">
        <p class="title-p">报警抓拍</p>
        <div class='info-big-box'>
          <div class="for-video-box" v-for="(item,index) in infoData.data16" :key="index" @click="lookVideo(item,index)">
            <img class="backImg" :src="item.fileUrl">
            <p class="el-icon-video-play positionP"></p>
          </div>
          <div class="for-img-box" v-for="(item,index) in infoData.data17" :key="index" @click="lookImg(infoData.data17,index)">
            <img :src="item.fileUrl">
          </div>
        </div>
      </div>
    </div>
    <lookImgDialog ref="lookImgDialog"></lookImgDialog>
    <lookVideoDialog ref="lookVideoDialog"></lookVideoDialog>
  </div>
</template>

<script>
  import lookImgDialog from '@/components/lookImgDialog/lookImgDialog.vue'
  import lookVideoDialog from '@/components/lookVideoDialog/lookVideoDialog.vue'
  export default {
    name: 'infoPage',
    components: {
      lookImgDialog,
      lookVideoDialog
    },
    data(){
      return{
        infoData:{
          data1:"2023-01-01  12:00:01",
          data2:"化学品",
          data3:"化学品违规带离",
          data4:"系统通知",
          data5:"实验室名称-楼栋楼层房间号",
          data6:"",
          data7:"",
          data8:"",
          data9:"",
          data10:"",
          data11:"",
          data12:"",
          data13:"",
          data14:"",
          data15:[{name:"姓名(实验室负责人)",time:"2023-10-10 12:10:01"},{name:"姓名(实验室负责人)",time:"2023-10-10 12:10:01"},{name:"姓名(实验室负责人)",time:"2023-10-10 12:10:01"},{name:"姓名(实验室负责人)",time:"2023-10-10 12:10:01"},{name:"姓名(实验室负责人)",time:"2023-10-10 12:10:01"},{name:"姓名(实验室负责人)",time:"2023-10-10 12:10:01"},{name:"姓名(实验室负责人)",time:"2023-10-10 12:10:01"},{name:"姓名(实验室负责人)",time:"2023-10-10 12:10:01"},],
          data16:[
            {
              fileUrl:"http://192.168.1.43/statics/2023/06/06/baba141f-05b4-4d3a-b4e6-81d67096cfd1.jpg",
              url:"http://192.168.1.43/labSystem/admin/statics/bigFile/2023051914/2dc29572-bac3-444c-bde9-b5b75988cc6b.mp4"
            },
            {
              fileUrl:"http://192.168.1.43/statics/2023/06/06/0e76d4b5-536e-449b-b8ce-7fa9ff48ced6.jpg",
              url:"http://192.168.1.43/labSystem/admin/statics/bigFile/2023051914/2dc29572-bac3-444c-bde9-b5b75988cc6b.mp4"
            },
          ],
          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(){

    },
    methods:{
      //查看视屏
      lookVideo(item){
        this.$refs.lookVideoDialog.lookVideoDialogOpen(1,item.url,'报警抓拍');
      },
      //查看图片
      lookImg(list,index){
        for(let i=0;i<list.length;i++){
          list[i].name = list[i].fileName;
          list[i].url = list[i].fileUrl;
        }
        this.$refs.lookImgDialog.lookImgDialogOpen(1,list,index,'报警抓拍');
      },
      //返回事件
      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>
