<template>
  <div class="infoPage">
    <div class="title-box">
      <p>详情</p>
      <p class="inquire-button-one">处理</p>
      <p class="reset-button-one" @click="backPage">返回</p>
    </div>
    <div class="bottom-max-bug-box scrollbar-box">
      <div class="left-max-big-box scrollbar-box">
        <div class="text-box">
          <p>报警时间：</p>
          <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
        </div>
        <div class="text-box">
          <p>报警内容：</p>
          <p></p>
        </div>
        <div class="text-box">
          <p>学院：</p>
          <p></p>
        </div>
        <div class="text-box">
          <p>位置：</p>
          <p></p>
        </div>
        <div class="text-box">
          <p>报警方式：</p>
          <p></p>
        </div>
        <div class="text-box">
          <p>处理状态：</p>
          <p></p>
        </div>
        <div class="text-box">
          <p>报警短信号码：</p>
          <p></p>
        </div>
        <div class="img-max-box">
          <img src="https://img2.baidu.com/it/u=3596352791,3086982929&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800">
          <img src="https://img2.baidu.com/it/u=3596352791,3086982929&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800">
          <img src="https://img2.baidu.com/it/u=3596352791,3086982929&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800">
          <img src="https://img2.baidu.com/it/u=3596352791,3086982929&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800">
        </div>
      </div>
      <div class="right-max-big-box">
        <div class="right-top-max-big-box">
          <p class="right-title-p">查看监控</p>
          <div class="right-top-button-box">
            <p :class="topButtonIndex == index?'buttonColorA':'buttonColorB'"
               @click="topButtonClick(index)"
               v-for="(item,index) in topButton" :key="index">{{item.name}}</p>
          </div>
          <video class="video-box" id="alarmRecordDetailsPageVideo" ref="videoRef" autoplay controls  muted width="454px" height="252px" :poster="videoCover"></video>
        </div>
        <div class="right-bottom-max-big-box">
          <p class="right-title-p">语音广播</p>
          <div>

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { handle } from "@/api/medicUniversity-3_1/index";
  export default {
    name: "infoPage",
    props:{
      propsInfoData:{},
    },
    data() {
      return {
        videoCover:process.env.VUE_APP_BASE_API + localStorage.getItem('videoCover'),
        topButtonIndex:0,
        topButton:[{id:'1',name:'走廊摄像头1'},{id:'2',name:'走廊摄像头2'},{id:'3',name:'走廊摄像头3'},],
        bottomButtonIndex:0,
        bottomButton:[{id:'1',name:'喇叭1'},{id:'2',name:'喇叭2'},{id:'3',name:'喇叭3'},],
      }
    },
    created() {

    },
    mounted(){

    },
    methods:{
      // 监控选择
      topButtonClick(type){
        if(this.topButtonIndex != type){
          this.topButtonIndex = type;
        }
      },
      //处理报警记录
      handle(){
        let self = this;
        if(self.propsInfoData.buttonType != 1){
          self.msgError('只有该实验室负责人可以处理')
          return
        }
        this.$confirm('确定要处理吗?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          handle({id:self.propsInfoData.id}).then(response => {
            self.msgSuccess(response.msg);
            self.$set(self.propsInfoData,'handlingStatus',2);
            self.$set(self.propsInfoData,'operate','已处理');
          })
        }).then(() => {
        }).catch(() => {});
      },
      backPage(){
        this.$parent.pageToggle(1);
      },
    }
  }
</script>

<style scoped lang="scss">
  .infoPage{
    flex:1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border:1px solid #dedede;
    p{
      margin:0;
      padding:0;
    }
    .title-box{
      display: flex;
      height:90px;
      border-bottom: 1px solid #D8D8D8;
      p:nth-child(1){
        flex:1;
        font-size:16px;
        line-height:90px;
        margin-left:18px;
        color:#0045AF;
      }
      p:nth-child(2),p:nth-child(3){
        margin:25px 25px 0 0;
      }
    }
    .bottom-max-bug-box{
      font-weight: 500;
      flex:1;
      padding:20px 79px;
      .left-max-big-box{
        width:559px;
        height:750px;
        display: inline-block;
        margin-right:22px;
        border-radius:10px;
        box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1) !important;
        padding:28px 28px 0 28px;
        .text-box{
          display: flex;
          font-size:14px;
          line-height:20px;
          margin-bottom:28px;
          p:nth-child(1){
            width:100px;
            text-align: right;
            color:#333;
          }
          p:nth-child(2){
            flex: 1;
            color:#666;
            margin-left:6px;
          }
        }
        .img-max-box{
          img{
            cursor: pointer;
            display: inline-block;
            width:240px;
            height:160px;
            margin-bottom:14px;
          }
          img:nth-child(odd){
            margin-right:18px;
          }
        }
      }
      .right-max-big-box{
        width:839px;
        display: inline-block;
        .right-top-max-big-box{
          height:414px;
          overflow: hidden;
          border-radius:10px;
          box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1) !important;
          .right-title-p{
            font-size:16px;
            color:#333;
            line-height:24px;
            margin:18px 0 12px 24px;
          }
          .right-top-button-box{
            margin:0 25px 0 7px;
            p{
              display: inline-block;
              margin:0 0 0 18px;
              padding:0 10px;
              line-height:30px;
              border-radius:6px;
              font-size:14px;
              cursor: pointer;
            }
            .buttonColorA{
              border:1px solid #0183FA;
              background:#0183FA;
              color:#fff;
            }
            .buttonColorB{
              border:1px solid #E0E0E0;
              color:#333;
            }
          }
          .video-box{
            height:252px;
            width:454px;
            margin:34px 192px;
          }
        }
        .right-bottom-max-big-box{
          margin-top:20px;
          height:316px;
          overflow: hidden;
          border-radius:10px;
          box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1) !important;
          .right-title-p{
            font-size:16px;
            color:#333;
            line-height:24px;
            margin:18px 0 12px 24px;
          }
        }
      }
    }
  }
</style>
