<template>
  <div v-if=" JSON.stringify(riskPointDetail) != '{}' && riskPointDetail != null">
    <div class="base-box">
      <div class="base-list">

        <p class="title">
          名称
        </p>
        <p class="word">
          {{riskPointDetail.baseInfo.riskPointName}}
        </p>

        <p class="title">
          风险点等级
        </p>
        <p class="word">
          {{riskLevel===1?'重大':riskLevel===2?'较大':riskLevel===3?'一般':'低'}}
        </p>

      </div>
      <div class="base-list">

        <p class="title">
          企业名称
        </p>
        <p class="word">
          {{riskPointDetail.baseInfo.cName}}
        </p>
        <p class="title">
          单位名称
        </p>
        <p class="word">
          {{riskPointDetail.baseInfo.liableGroupIdName}}
        </p>
      </div>

      <div class="base-list">

        <p class="title">
          开始时间
        </p>
        <p class="word">
          {{riskPointDetail.baseInfo.activeStartTime}}
        </p>
        <p class="title">
          结束时间
        </p>
        <p class="word">
          {{riskPointDetail.baseInfo.activeEndTime}}
        </p>

      </div>
      <div class="base-list">

        <p class="title">
          责任人
        </p>
        <p class="word">
          {{riskPointDetail.baseInfo.aName}}
        </p>
        <p class="title">
          <!--描述-->
        </p>
        <p class="word">
          <!--{{riskPointDetail.baseInfo.riskPointDesc}}-->
        </p>
      </div>
    </div>
    <div class="danger-desc" v-if="riskPointDetail.baseInfo.sitePersonnel.length > 0">
        <p class="desc-title">
            现场人员
        </p>
        <div class="desc-content" >
            <!--status 1在线 0下线-->
            <div class="people" v-for="(item,index) in riskPointDetail.baseInfo.sitePersonnel" :class="item.status == 1 ? 'liveon' : '' " :key="index">
                <img v-if="item.accountPic" :src="$commonFun.judgeImgsrc(item.accountPic)" >
                <img v-else src="../../assets/image/noimg.png">
                <p>{{item.accountRealName}}</p>
                <!--<i :class="item.status == 1 ? 'liveon' : '' "></i>-->
            </div>
        </div>
    </div>
    <div class="danger-desc">
      <p class="desc-title">
        描述
      </p>
      <div class="desc-content" >
        <div v-html="riskPointDetail.baseInfo.riskPointDesc"></div>
      </div>
    </div>

    <div class="danger-info-box">
      <div class="danger-title">
        <p>
          告警信息
        </p>
      </div>
      <el-table v-if="riskPointDetail.warningInfo.length > 0"
        ref="singleTable"
        :data="riskPointDetail.warningInfo"

        highlight-current-row
        style="width: 100%">
        <el-table-column type="index" width="50">
        </el-table-column>

        <el-table-column
          property="createdTime"
          label="时间"
          width="200">
        </el-table-column>
        <el-table-column
          property="detailType"
          label="预警类型"
          width="150">
          <template
            slot-scope="scope"
          >
            <span>{{scope.row.detailType=== 1?'隐患':scope.row.detailType===2?'未检查':scope.row.detailType===3?'告警':'未知'}}</span>
          </template>
        </el-table-column>
        <el-table-column
          property="causeDesc"
          label="描述"
          >
        </el-table-column>
      </el-table>

      <!--<div style="height: 200px;border: 1px solid #dfe6ec;display: flex;align-items: center;justify-content: center;" v-else>
        <p style="font-size: 16px;color: #888;">
          暂无数据
        </p>
      </div>-->
    </div>
  </div>
</template>

<script>
  import {mapState, mapGetters} from 'vuex'
  export default {
    name: "BaseInfo",
    data(){
      return{
        riskLevel:3,
        // baseUrl:this.$commons.baseUrl,
        baseUrl:this.$ip,
      }

    },
    props: ['riskPointDetail'],
    /*computed:{
      ...mapGetters([
        'getRiskPointDetail'
      ]),
    },
    watch:{
      getRiskPointDetail: function (val) {
        console.log('valvalvalvalvalval', val);
        this.riskLevel=val.baseInfo.riskPointLevel
      }
    },*/
    mounted() {
      console.log('riskPointDetail---------------------', this.riskPointDetail)
      this.riskLevel=this.riskPointDetail.baseInfo.riskPointLevel
    },
    methods: {

    }
  }
</script>

<style scoped >
  .base-info li{
    padding: 10px;
    border-bottom: 1px solid #ddd;
  }
  .base-info li:hover{
    background: #EEF1F6;
  }
  .danger-info-box{
    width:100%;
    height: auto;

  }

  .no-content,
  .danger-info-box>div>ul{
    border: 1px solid #ddd;
    box-sizing: border-box;
    width: 100%;
    border-top: none;
    padding: 10px;
    min-height: 60px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
  }
  .no-content{
    text-align: center;
  }
  .danger-info-box>div>ul>li{
    padding: 2px 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .danger-info-box>div>ul>li>span:nth-child(1){
    width:15%;
    font-weight: bold;
  }
  .danger-info-box>div>ul>li>span:nth-child(2){
    width:15%;
    color:#666;
  }
  .danger-info-box>div>ul>li>span:nth-child(3){
    width:10%;
    color: red;
  }
  .danger-info-box>div>ul>li>span:nth-child(4){
    width:60%;
    color:#000;
  }
  .danger-info-box>div>p{
    height: 36px;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-radius: 2px;
    margin-bottom: 0;
  }
  .danger-info-box>div>p>span{
    font-size: 16px;
  }
  .danger-info-box>div>p>i{
    width:22px;
    height: 20px;
    margin-right: 10px;
  }
  .danger-info-box>div>p>i>img{
    width:100%;
    height: 100%;
  }
  .danger-info-box>div:last-child i{
    width:30px;
    height: 30px;
  }

  .base-box{
    border: 1px solid #ccc;
  }
  .base-list{
    display: flex;
    border-bottom: 1px solid #ccc;

  }
  .base-list:nth-child(2n+1){
    background: #efefef;
  }
  .base-list:last-child{
    border-bottom: 0px;

  }
  .base-list p{
    margin: 0px;
    padding: 10px;
  }

  .base-list .title{
    width: 19%;
    font-size: 15px;
    font-weight: bolder;
    color: #222;
    border-right: 1px solid #ccc;
  }
  .base-list .word{
    width: 29%;
    font-size: 15px;
    color: #555;
    border-right: 1px solid #ccc;

  }
  .base-list .word:last-child{
    border-right: 0px

  }
  .danger-title {
    margin-top: 20px;
  }
  .danger-title p{
    font-size: 16px;
    font-weight: bolder;
    color: #222;
  }

  .danger-desc .desc-title{
    font-size: 16px;
    color: #222;
    font-weight: bold;
    margin: 20px 0 10px 0;
  }
  .danger-desc .desc-content{
    min-height: 90px;
    border: 1px solid #ccc;
    overflow-x: auto;
    padding: 10px;
  }
  .danger-desc .desc-content p{
    line-height: 1.5;
  }
  .danger-desc .desc-content .people img{
    width: 50px;
    height: 50px;
    /*margin: 10px;*/
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    box-shadow: 0px 0px 6px 5px #cccccc;
    object-fit: cover;
  }
  .danger-desc .desc-content .people.liveon img{
    box-shadow: 0px 0px 6px 5px #36800B;
  }
  .danger-desc .desc-content .people{
      display: inline-block;
      width: 100px;
      text-align: center;
      position: relative;
      vertical-align: text-top;
      margin-right: 15px;
  }
  .desc-content .people.liveon p{
    color: #36800B;
  }
  /*.danger-desc .desc-content .people i{
    width: 10px;
    height: 10px;
    border-radius: 100%;
    right: 22px;
    top: 10px;
    display: inline-block;
    position: absolute;
    background: #666666;
  }
  .desc-content .people i.liveon{
    background: #41800A;
  }*/
</style>
