<template>
  <div class="page-container earlyWarningEvent-infoPage">
    <div class="page-top-title-box">
      <p class="page-top-title-name-p">{{infoData.noticeStatus == 0?'处理':'详情'}}</p>
      <p class="page-top-title-out-p" @click="backPage">返回</p>
    </div>
    <div class="content-box scrollbar-box">
      <div class="top-max-big-box">
        <p class="title-p">预警信息</p>
        <div class="text-max-box">
          <div class="text-left-box">
            <p>报警时间：</p>
            <p>{{infoData.warnTime}}</p>
          </div>
          <div class="text-center-box">
            <p>预警类型：</p>
            <p>{{infoData.warnType==1?'化学品预警':(infoData.warnType==2?'气瓶预警':'算法预警')}}</p>
          </div>
          <div class="text-right-box">
            <p>实验室负责人：</p>
            <p v-for="(item,index) in infoData.adminInfoList">{{item.userName}}-{{item.mobile}}</p>
          </div>
        </div>
        <div class="text-max-box">
          <div class="text-left-box">
            <p>学院：</p>
            <p>{{infoData.deptName}}</p>
          </div>
          <div class="text-center-box">
            <p>实验室：</p>
            <p>{{infoData.subName}}({{infoData.roomNum}})</p>
          </div>
          <div class="text-right-box">
            <p>安全员：</p>
            <p v-for="(item,index) in infoData.safeInfoList">{{item.userName}}-{{item.mobile}}</p>
          </div>
        </div>
        <div class="text-max-box" v-if="infoData.chemicalWarnType==6">
          <div class="text-center-box"  >
            <p>操作人：</p>
            <p>{{infoData.operationPerson}}</p>
          </div>
          <div class="text-right-box">
            <p>业务类型：</p>
            <p>{{infoData.alarmType}}</p>
          </div>
          <div class="text-right-box">
            <p>化学品柜：</p>
            <p>{{infoData.position}}</p>
          </div>
        </div>
        <div class="text-max-big-box">
          <div class="text-box">
            <p>预警事件：</p>
            <p>{{infoData.warnContent}}</p>
          </div>
        </div>
        <p class="top-position-p" :class="infoData.noticeStatus != 0?'position-type':''">{{infoData.noticeStatus == 1?'已处理':'待处理'}}</p>
      </div>
      <!--化学品预警 -->
      <div class="bottom-max-big-box" v-if="infoData.warnType==1 && infoData.chemicalWarnType!=6">
        <p class="title-p">化学品信息</p>
        <!--列表 化学品1化学品违规带离。2超时未归还-->
        <div v-if="infoData.chemicalWarnType==1 || infoData.chemicalWarnType==2">
          <div class="text-max-box">
            <div class="text-left-box">
              <p style="width:96px;">化学品名称：</p>
              <p>{{infoData.chemicalName}}</p>
            </div>
            <div class="text-center-box">
              <p>编码：</p>
              <p>{{infoData.rfidCode}}</p>
            </div>
            <div class="text-center-box">
              <p>规格：</p>
              <p>{{infoData.normsNum}}</p>
            </div>

          </div>
          <div class="text-max-box">
            <div class="text-left-box">
              <p style="width:96px;">余量：</p>
              <p>{{infoData.surplus}}</p>
            </div>
            <div class="text-center-box">
              <p>归属人：</p>
              <p>{{infoData.belongName}}</p>
            </div>
            <div class="text-right-box">
              <p>存放位置：</p>
              <p>{{infoData.position}}</p>
            </div>
<!--            <div class="text-center-box" v-if="infoData.chemicalWarnType==2">
              <p>领用人：</p>
              <p>{{infoData.collectUserName}}</p>
            </div>-->
          </div>
        </div>
        <!--列表 化学品3化学品过期。4化学品即将过期-->
        <div class="table-max-big-box" v-if="infoData.chemicalWarnType==3 || infoData.chemicalWarnType==4">
          <el-table class="table-box" v-loading="loading" border :data="infoData.chemicalExpireList">
            <el-table-column label="化学品名称" prop="chemicalName" fixed show-overflow-tooltip/>
            <el-table-column label="规格" prop="normsNum" width="180" fixed show-overflow-tooltip/>
            <el-table-column label="余量" prop="surplus" width="180" fixed show-overflow-tooltip/>
            <el-table-column label="归属人" prop="belongName" width="220" fixed show-overflow-tooltip/>
            <el-table-column label="过期时间" prop="expireTime" width="220" fixed show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.expireTime,"{y}-{m}-{d} ") }}</span>
              </template>
            </el-table-column>
            <el-table-column label="存放位置" prop="position" width="220" show-overflow-tooltip/>
          </el-table>
        </div>

        <div class="table-max-big-box" v-if="infoData.chemicalWarnType==5">
          <el-table class="table-box" v-loading="loading" border :data="infoData.chemicalOverdueStockList">
            <el-table-column label="化学品名称" prop="chemicalName" fixed show-overflow-tooltip/>
            <el-table-column label="CAS" prop="casNum" fixed show-overflow-tooltip/>
            <el-table-column label="类别" prop="chemicalCategory" fixed show-overflow-tooltip/>
            <el-table-column label="纯度" prop="chemicalPurity" fixed show-overflow-tooltip/>
            <el-table-column label="规格" prop="normsNum"  fixed show-overflow-tooltip/>
            <el-table-column label="数量" prop="applyNum"  fixed show-overflow-tooltip/>
            <el-table-column label="归属人" prop="belongName"  fixed show-overflow-tooltip/>
            <el-table-column label="学院" prop="deptName"  fixed show-overflow-tooltip/>
            <el-table-column label="实验室" prop="subName"  fixed show-overflow-tooltip/>
            <el-table-column label="类型" prop="source"  fixed show-overflow-tooltip/>
            <el-table-column label="入库期限" prop="createTime"  fixed show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.createTime,"{y}-{m}-{d} {h}:{i}") }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
<!--        <div class="table-max-big-box" v-if="infoData.chemicalWarnType==6">
          <el-table class="table-box" v-loading="loading" border :data="infoData.chemicalTimeoutList">
            <el-table-column label="化学品名称" prop="chemicalName"  show-overflow-tooltip/>
            <el-table-column label="编码" prop="tagCode" width="180"  show-overflow-tooltip/>
            <el-table-column label="CAS" prop="casNum" width="180"  show-overflow-tooltip/>
            <el-table-column label="类别" prop="chemicalCategoryName" width="180" show-overflow-tooltip/>
            <el-table-column label="纯度" prop="chemicalPurity" width="180"  show-overflow-tooltip/>
            <el-table-column label="规格" prop="normsNum"  width="180"  show-overflow-tooltip/>
            <el-table-column label="余量" prop="surplus"  width="180" show-overflow-tooltip/>
            <el-table-column label="归属人" prop="belongName" width="220"  show-overflow-tooltip/>
            <el-table-column label="学院" prop="deptName" width="220"  show-overflow-tooltip/>
            <el-table-column label="存储位置" prop="position" width="220"  show-overflow-tooltip/>
          </el-table>
        </div>-->
      </div>
      <!--气瓶预警 -->
      <div class="bottom-max-big-box" v-if="infoData.warnType==2">
        <p class="title-p">气瓶信息</p>
        <div>
          <div class="text-max-box">
            <div class="text-left-box">
              <p style="width:96px;">气体名称：</p>
              <p>{{infoData.airBottleName}}</p>
            </div>
            <div class="text-center-box">
              <p>规格：</p>
              <p>{{infoData.normsNum}}</p>
            </div>
            <div class="text-right-box">
              <p>存放位置：</p>
              <p>{{infoData.position}}</p>
            </div>
          </div>
          <div class="text-max-box">
            <div class="text-left-box">
              <p style="width:96px;">余量：</p>
              <p>{{infoData.surplus}}</p>
            </div>
            <div class="text-center-box">
              <p>定位状态：</p>
              <p>{{infoData.posiStatus}}</p>
            </div>
          </div>
        </div>
      </div>
      <!--化学品报警抓拍 -->
<!--      <div class="bottom-max-big-box" v-if="(infoData.warnType==1&&infoData.noticeStatus==1) || infoData.warnType==2 ||infoData.warnType==3">
        <p class="title-p">报警抓拍</p>
        <div class="img-list-box">
          <img v-for="(item,index) in infoData.snapImg" :key="index"
               :src="item" @click="lookImg(item,index)">
        </div>
      </div>-->
      <div class="bottom-max-big-box ">
        <p class="title-p">通知记录</p>
        <div class="table-max-big-box">
          <el-table class="table-box" v-loading="loading" border :data="infoData.warningNoticeLogVoList">
            <el-table-column label="通知时间" prop="createTime" width="200" fixed show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.noticeTime) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="通知方式" prop="noticeType" width="180" fixed show-overflow-tooltip/>
            <el-table-column label="报警级别" prop="warningLevel" width="120" show-overflow-tooltip/>
            <el-table-column label="通知人" prop="noticePreson" show-overflow-tooltip/>
          </el-table>
        </div>
      </div>
      <div class="bottom-max-big-box" v-if="infoData.noticeStatus !=3  && (infoData.warnType==1 || infoData.warnType==2)">
        <p class="title-p">预警处理</p>
        <div class="text-max-box" v-if="infoData.noticeStatus != 0">
          <div class="text-left-box">
            <p>处理方式：</p>
            <p>{{infoData.handleType==1?'手动处理':(infoData.handleType==2?'归还操作':(infoData.handleType==3?'出库操作':(infoData.handleType==4?'入库操作':'')))}}</p>
          </div>
          <div class="text-center-box">
            <p>处理人：</p>
            <p>{{infoData.handlePerson}}-{{infoData.handlePersonPhone}}</p>
          </div>
          <div class="text-right-box">
            <p>处理时间：</p>
            <p>{{infoData.handleTime}}</p>
          </div>
        </div>
        <div class="text-max-big-box" v-if="infoData.noticeStatus != 0 &&((infoData.warnType == 1 &&infoData.chemicalWarnType == 1) || infoData.warnType == 2)">
          <div class="text-box">
            <p>处理备注：</p>
            <p>{{infoData.handleNotes}}</p>
          </div>
        </div>
        <div class="form-max-box" v-if="infoData.noticeStatus == 0">
          <div class="text-max-box">
            <div class="text-left-box">
              <p>处理方式：</p>
              <p>手动处理</p>
            </div>
          </div>
          <el-form :model="infoDataForm" ref="form" label-width="0">
            <el-form-item label="" prop="name">
              <span style="font-size:16px;">处理备注：</span>
              <el-input v-model="infoDataForm.handleNotes" placeholder="请输入名称" maxLength="70" style="width:1325px;" v-hasPermiRouter="['warning:notice:edit']"></el-input>
            </el-form-item>
          </el-form>
          <div class="button-bottom-box">
            <p></p>
            <p class="page-submit-common-style-button" @click="submitForm" v-hasPermiRouter="['warning:notice:edit']">处理</p>
            <p></p>
          </div>
        </div>
      </div>
    </div>
    <!--全屏视图组件-->
    <fullScreenView :fullScreenViewProps="fullScreenViewProps" ref="fullScreenView"></fullScreenView>
  </div>
</template>

<script>
import fullScreenView from "@/components/fullScreenView/fullScreenView.vue";
import { systemWarningNoticeHandleMessage, systemWarningNoticeWarningHandleMessage } from '@/api/chemicalManage'
export default {
  name: 'infoPage',
  components: {
    fullScreenView,
  },
  props:{
    propsData:{},
  },
  data(){
    return{
      loading:false,
      showType:false,
      infoData:{
      },
      infoDataForm:{
        noticeId:'',
        handleNotes:"",
      },
      fullScreenViewProps:[],
    }
  },
  created(){
    this.initialize();
  },
  mounted(){

  },
  methods:{
    //初始化
    initialize(){
      this.infoData=this.propsData;
      console.log(this.infoData)
      this.$set(this.infoDataForm,'noticeId',this.propsData.noticeId);
    },
    // 返回按钮
    backPage(){
      this.$parent.tableButton('out');
    },
    /** 提交按钮 */
    submitForm() {
      let self=this;
      systemWarningNoticeWarningHandleMessage(self.infoDataForm).then( response => {
        self.msgSuccess("成功")
        self.$parent.tableButton('out');
      });
    },
    // 照片预览
    lookImg(item,index){
      this.$set(this,'fullScreenViewProps',[item]);
      this.$refs['fullScreenView'].initialize(index);
    },
  },
}
</script>

<style scoped lang="scss">
.earlyWarningEvent-infoPage{
  .content-box{
    flex:1;
    display: flex;
    flex-direction: column;
    .top-max-big-box , .bottom-max-big-box{
      padding:25px 80px;
      .title-p{
        line-height:48px;
        font-size:16px;
        font-weight: 700;
        color:#333;
      }
      .text-max-box{
        display: flex;
        .text-left-box{
          width:390px;
          display: flex;
          padding:16px 0;
          p{
            font-size:16px;
            line-height:24px;
            /*单行省略号*/
            display:block;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
          }
          p:nth-child(1){
            width:80px;
            text-align: right;
          }
          p:nth-child(2){
            flex:1;
          }
        }
        .text-center-box{
          width:410px;
          display: flex;
          padding:16px 0;
          p{
            font-size:16px;
            line-height:24px;
            /*单行省略号*/
            display:block;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
          }
          p:nth-child(1){
            width:90px;
            text-align: right;
          }
          p:nth-child(2){
            flex:1;
          }
        }
        .text-right-box{
          width:610px;
          display: flex;
          padding:16px 0;
          p{
            font-size:16px;
            line-height:24px;
            /*单行省略号*/
            display:block;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
          }
          p:nth-child(1){
            width:120px;
            text-align: right;
          }
          p:nth-child(2){
            flex:1;
          }
        }
      }
      .text-max-big-box{
        display: flex;
        .text-box{
          flex: 1;
          display: flex;
          padding:16px 0;
          p{
            font-size:16px;
            line-height:24px;
            /*单行省略号*/
            display:block;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
          }
          p:nth-child(1){
            width:80px;
            text-align: right;
          }
          p:nth-child(2){
            flex:1;
          }
        }
      }
      .img-list-box{
        padding-top:12px;
        img{
          cursor: pointer;
          display:inline-block;
          width:130px;
          height:130px;
          margin-right:10px;
          margin-bottom:10px;
        }
      }
      .table-max-big-box{
        padding:12px 0;
        height:260px!important;
        display: flex;
        flex-direction: column;
      }
      .button-bottom-box{
        display: flex;
        p:nth-child(1){
          flex:1;
        }
        p:nth-child(2){
          width:100px;
        }
        p:nth-child(3){
          flex:1;
        }
      }
    }
    .top-max-big-box{
      position: relative;
      .top-position-p{
        position: absolute;
        top:0;
        right:0;
        width:100px;
        height:40px;
        border-bottom-left-radius:20px;
        background-color: #FFA200;
        color:#fff;
        font-size:16px;
        text-align: center;
        line-height:40px;
      }
      .position-type{
        background-color: #0183FA;
      }
    }
    .bottom-max-big-box{
      border-top:20px solid #F5F5F5;
    }
  }
}
</style>
