<!-- 预案执行记录详情 -->
<template>
  <div class="page-container planExecuteRecordDetail">
    <div class="page-top-title-box">
      <p class="page-top-title-name-p">详情</p>
      <p class="page-top-title-out-p" @click="backPage">返回</p>
    </div>
    <div class="content-box scrollbar-box">
      <div class="addPage_b_t">
        <div class="addPage_b_t_l">
          <div class="small_title">风险概况</div>
          <div class="addPage_b_t_l_b" v-if="form">
            <li>
              <i>事故原因：</i>
              <i>{{form.riskReason?form.riskReason:'--'}}</i>
            </li>
            <li>
              <i>风险级别：</i>
              <i>{{form.riskPlanLevel==1?'低风险':(
                form.riskPlanLevel==2?'中风险':(
                form.riskPlanLevel==3?'较高风险':(
                form.riskPlanLevel==4?'高风险':'')))}}
              </i>
            </li>
            <li>
              <i>发生时间：</i>
              <i>{{form.eventStartTime?parseTime(form.eventStartTime):''}} -
                {{form.eventEndTime?parseTime(form.eventEndTime):'未结束'}}</i>
            </li>
            <li>
              <i>持续时间：</i>
              <i>{{form.riskDuration?form.riskDuration+'秒':'未结束'}}</i>
            </li>
            <li>
              <i>风险响应人员：</i>
              <i>{{form.handledPerson?form.handledPerson:'--'}}</i>
            </li>
            <li>
              <i>实验室内人员：</i>
              <i>{{form.internalPerson?form.internalPerson:'--'}}</i>
            </li>
          </div>
        </div>
        <div class="addPage_b_t_c">
          <div class="small_title">现场记录<i>(预案发生一个月后将自动清理）</i></div>
          <div class="addPage_b_t_c_b" v-if="form">
            <!--            <img src="@/assets/images/login-background.jpg">-->
            <video class="video" :src="form.recordVideo?form.recordVideo:''" autoplay controls></video>
            <div class="video-button-box">
              <!--<p></p>-->
              <!--<p></p>-->
            </div>
          </div>
        </div>
        <div class="addPage_b_t_r">
          <div class="small_title">消息推送记录</div>
          <div class="addPage_b_t_r_b" v-if="form.messageLogVoList[0]">
            <li v-for="(item,index3) in form.messageLogVoList" :key="index3">
              <i>{{parseTime(item.createTime)}}</i>
              <i>{{item.alarmType == 1 ? '语音播报':(item.alarmType == 2 ? '短信推送' : '')}}</i>
              <i>{{item.nickRoleName}}</i>
            </li>
          </div>
        </div>
      </div>
      <div class="addPage_b_b">
        <div class="small_title">风险轨迹</div>
        <div class="addPage_b_b_b">
          <div class="new-time-box">
            <div class="for-planAxis" v-for="(item,index) in form.eventLogVoList">
              <div class="for-planAxis-min-box">
                <div class="for-planAxis-top-box">
                  <p v-if="(item.riskStatus==1||item.riskStatus==2)">
                    {{item.eventOperate+'('+(
                    form.riskPlanLevel==1?'低风险':(
                    form.riskPlanLevel==2?'中风险':(
                    form.riskPlanLevel==3?'较高风险':(
                    form.riskPlanLevel==4?'高风险':''))))
                    +')'}}
                  </p>
                  <p v-if="(item.riskStatus==1||item.riskStatus==2)">
                    传感器：<span v-for="(minItem,minIndex) in item.sensorJson">{{minIndex!=0?' ，':''}}{{minItem.deviceName}}：{{minItem.deviceValue}}</span>
                  </p>
                  <p v-if="(item.riskStatus==1||item.riskStatus==2)">时间：{{parseTime(item.createTime)}}</p>
                </div>
                <div class="for-planAxis-center-box">
                  <p :class="index == 0 || index == form.eventLogVoList.length-1?'dot-p-A':'dot-p-B'"></p>
                  <p class="line-p" v-if="index != form.eventLogVoList.length-1"></p>
                </div>
                <div class="for-planAxis-bottom-box">
                  <p v-if="(item.riskStatus!=1&& item.riskStatus!=2)">
                    {{item.eventOperate}}
                  </p>
                  <p v-if="(item.riskStatus!=1&& item.riskStatus!=2)">
                    传感器：<span v-for="(minItem,minIndex) in item.sensorJson">{{minIndex!=0?' ，':''}}{{minItem.deviceName}}：{{minItem.deviceValue}}</span>
                  </p>
                  <p v-if="(item.riskStatus!=1&& item.riskStatus!=2)">
                    时间：{{parseTime(item.createTime)}}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {
    laboratoryEventFindByEventId
  } from '@/api/emergencyManagement/index'

  export default {
    name: 'planExecuteRecordDetail',
    props: {
      pageData: {}
    },
    data() {
      return {
        pageType: 1,
        planAxis: [],
        form: {
          messageLogVoList:[],
        },
        msgsPush: []
      }
    },
    created() {
      this.laboratoryEventFindByEventId()
    },
    mounted() {

    },
    methods: {
      //返回
      backPage() {
        this.$parent.tableButton('out')
      },
      laboratoryEventFindByEventId() {
        laboratoryEventFindByEventId({ eventId: this.pageData.id }).then(response => {
          if (response.data.eventLogVoList[0]) {
            response.data.eventLogVoList.forEach((item) => {
              item.sensorJson = JSON.parse(item.sensorJson)
            })
          }
          this.$set(this, 'form', response.data)
        })
      },
    }

  }
</script>
<style>
  ::-webkit-scrollbar { /*滚动条整体样式*/
    width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 5px;
  }

  ::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
    border-radius: 3px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: none;
  }

  ::-webkit-scrollbar-track { /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    background: none;
  }
</style>

<style scoped lang="scss">
  .planExecuteRecordDetail {
    flex: 1;
    display: flex !important;
    flex-direction: column;
    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    i {
      font-style: normal;
    }
    li {
      list-style-type: none;
    }
    /*顶部*/
    .addPage_title {
      display: flex;
      align-items: center;
      border-bottom: 1px solid #E0E0E0;
      padding-top: 20px;
      p:nth-child(1) {
        line-height: 60px;
        color: #0045AF;
        font-size: 16px;
        font-weight: 400;
        margin: 0 12px 0 20px;
      }
      p:nth-child(2) {
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #999999;
        flex: 1;
      }
      p:nth-child(3) {
        margin-right: 20px;
      }
    }
    .content-box {
      flex: 1;
      display: flex !important;
      flex-direction: column;
      padding: 34px 80px 0;
      box-sizing: border-box;
      /*小标题*/
      .small_title {
        font-size: 16px;
        font-family: Source Han Sans CN-Medium, Source Han Sans CN;
        font-weight: 500;
        color: #333333;
        line-height: 24px;
        margin-bottom: 24px;
        > i {
          color: #666;
        }
      }
      .addPage_b_t {
        display: flex;
        .addPage_b_t_l {
          width: 450px;
          .addPage_b_t_l_b {
            > li {
              margin-bottom: 20px;
              > i {
                font-size: 14px;
                font-family: Source Han Sans CN-Regular, Source Han Sans CN;
                font-weight: 400;
                color: #333333;
                line-height: 14px;
                display: inline-block;
                vertical-align: top;
              }
              > i:nth-of-type(1) {
                color: #333333;
              }
              > i:nth-of-type(2) {
                color: #666666;
                line-height: 16px;
              }
            }
          }
        }
        .addPage_b_t_c {
          width: 380px;
          margin:0 90px 0 30px;
          .addPage_b_t_c_b {
            width: 380px;
            height: 222px;
            > img {
              width: 380px;
              height: 222px;
            }
            .video {
              width: 380px;
              height: 222px;
              overflow: hidden;
              display: block;
            }
            .video-button-box{
              /*height:10px;*/
              /*border:1px solid #dedede;*/
            }
          }
        }
        .addPage_b_t_r {
          width: 458px;
          .addPage_b_t_r_b {
            > li {
              margin-bottom: 20px;
              > i {
                font-size: 14px;
                font-family: Source Han Sans CN-Regular, Source Han Sans CN;
                font-weight: 400;
                color: #666666;
                line-height: 18px;
                display: inline-block;
                vertical-align: top;
              }
              > i:nth-of-type(1) {
                width: 148px;
              }
              > i:nth-of-type(2) {
                width: 84px;
              }
              > i:nth-of-type(3) {
                width: 224px;
              }
            }
          }
        }
      }
      .addPage_b_b {
        margin-top: 84px;
        .new-time-box {
          height: 280px;
          overflow-x: auto;
          overflow-y: hidden;
          white-space: nowrap;
          .for-planAxis {
            display: inline-block;
            font-weight: 500;
            overflow: hidden;
            .for-planAxis-min-box {
              overflow: hidden;
              display: flex;
              flex-direction: column;
              .for-planAxis-top-box {
                height: 90px;
                p {
                  margin-left: 28px;
                  margin-right: 40px;
                  font-size: 14px;
                  line-height: 30px;
                }
                p:nth-child(1) {
                  color: #333;
                }
                p:nth-child(2) {
                  color: #666;
                  span {
                    color: #FF3131;
                  }
                }
                p:nth-child(3) {
                  color: #666;
                }
              }
              .for-planAxis-center-box {
                display: flex;
                .dot-p-A {
                  width: 23px;
                  height: 23px;
                  background: #fff;
                  border: 2px solid #0183fa;
                  margin: 17px;
                  border-radius: 50%;
                }
                .dot-p-B {
                  width: 17px;
                  height: 17px;
                  margin: 20px;
                  background: #0183fa;
                  border-radius: 50%;
                }
                .line-p {
                  flex: 1;
                  height: 1px;
                  margin-top: 28px;
                  background: #dedede;
                }
              }
              .for-planAxis-bottom-box {
                height: 90px;
                p {
                  margin-left: 28px;
                  margin-right: 40px;
                  font-size: 14px;
                  line-height: 30px;
                }
                p:nth-child(1) {
                  color: #333;
                }
                p:nth-child(2) {
                  color: #666;
                  span {
                    color: #FF3131;
                  }
                }
                p:nth-child(3) {
                  color: #666;
                }
              }
            }
          }
        }
        .time-box {
          width: 100%;
          overflow-y: auto;
          > ul {
            position: relative;
            height: 355px;
            white-space: nowrap;
            display: inline-flex;
            > li {
              width: 242px;
              height: 98px;
              float: left;
              position: relative;
              cursor: pointer;
              > p {
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #333333;
                line-height: 14px;
                margin-bottom: 14px;
              }
              > p:nth-of-type(1) {

              }
              .sensor_val {
                color: #666666;
                > i {
                  color: #FF3131;
                }
              }
              .sensor_timer {
                color: #666666;
                > i {
                  color: #333333;
                }
              }
              //>p:nth-of-type(2){
              //  color: #666666;
              //  >i{
              //    color: #FF3131;
              //  }
              //}
              //>p:nth-of-type(3){
              //  color: #666666;
              //  >i{
              //    color: #333333;
              //  }
              //}
            }
            /*横线*/
            .ledgement {
              width: 250px;
              background: #d2d2d2;
              height: 1px;
              position: absolute;
              left: 0;
              bottom: -48%;
            }
            .ledgement_tow {
              width: 250px;
              background: #d2d2d2;
              height: 1px;
              position: absolute;
              left: 0;
              top: -48%;
            }
            //>li:nth-child(2n){
            //  margin-top:160px;
            //}
            /*点*/
            .dot {
              content: "";
              width: 56px;
              height: 56px;
              border-radius: 28px;
              background: #0183FA;
              position: absolute;
              left: 20%;
              margin-left: -64px;
              bottom: 0;
              bottom: -74px;
              z-index: 1;
              border: 20px solid #fff;
            }
            .dot_tow {
              content: "";
              width: 56px;
              height: 56px;
              border-radius: 28px;
              background: #0183FA;
              position: absolute;
              left: 20%;
              margin-left: -64px;
              top: -74px;
              z-index: 1;
              border: 20px solid #fff;
            }
            //>li:before{
            //  content: "";
            //  width: 56px;
            //  height: 56px;
            //  border-radius: 28px;
            //  background: #0183FA;
            //  position: absolute;
            //  left:20%;
            //  margin-left:-64px;
            //  bottom: 0;
            //  bottom:-60px;
            //  z-index: 1;
            //  border: 20px solid #fff;
            //}
            //>li:nth-child(2n):before{
            //  bottom: auto;top:-60px;
            //}
            /*风险趋势*/
            .risk_trend {

            }
            /*硬件执行动作*/
            .hardware {
              margin-top: 160px;
            }
            //>li:after{
            //  content: "";  display: block; background: #d2d2d2;height: 1px;width: 100%;position: absolute;left:0;bottom:-32%;
            //}
            //>li:nth-child(2n):after{
            //  top:-32%;
            //}
            //>li:last-child:after{
            //  content: "";  display: block; background: none;height: 1px;width: 100%;position: absolute;left:0;bottom:-32%;
            //}
            > li:first-child:before {
              content: "";
              width: 26px;
              height: 26px;
              border: 2px solid #0183FA;
              border-radius: 28px;
              background: #fff;
              position: absolute;
              left: 20%;
              margin-left: -64px;
              bottom: -44px;
              z-index: 1;
            }
            > li:last-child:before {
              content: "";
              width: 26px;
              height: 26px;
              border: 2px solid #0183FA;
              border-radius: 28px;
              background: #fff;
              position: absolute;
              left: 20%;
              margin-left: -64px;
              bottom: -44px;
              z-index: 1;
            }

          }

        }
      }
    }

  }
</style>
