<!-- 人员设备安全 -->
<template>
  <div class="annualSecureInspect" v-on:mouseover.stop="mouseover">
    <div class="title-max-box-position">
      <div v-for="(item,index) in header" :key="index">
        <p>{{item}}</p>
      </div>
    </div>
    <div class="title-max-box"></div>
    <dv-scroll-board v-if="showType" :config="config" style="width:927px;height:200px"
                     @mouseover="mouseoverDv"/>
    <div class="position-suspension-box" v-if="suspensionType"
         :style="'top:'+suspensionTop+'px;left:'+suspensionLeft+'px;'">
      <p class="position-suspension-p">
        {{suspensionText}}
      </p>
      <div class="position-suspension-icon-box">
        <p class="position-suspension-null-left"></p>
        <p class="position-suspension-icon el-icon-caret-bottom"></p>
        <p class="position-suspension-null-right"></p>
      </div>
    </div>
  </div>
</template>
<script>
  import {
    securityIndexStatisticsGetPlanIds,
    securityIndexStatisticsPlanList,
  } from '@/api/safetyCheck/index'
  export default {
    name: 'annualSecureInspect',
    props:{
      propsData:{},
    },
    data () {
      return {
        header: ['序号', '检查名称', '检查时间', '检查数', '隐患数', '整改数', '多次整改未完成', '整改完成率'],
        showType:false,
        config:{
          headerHeight:40,
          rowNum:5,
          columnWidth:[57,190,210,80,80,80,130,100],
          headerBGC:'#F5F5F5',
          oddRowBGC:'#ffffff',
          evenRowBGC:'#ffffff',
          data: [],
          hoverPause:true,
        },
        //鼠标悬浮展示内容
        suspensionType:false,
        suspensionText:'',
        suspensionTop:0,
        suspensionLeft:0,
      }
    },
    created () {

    },
    mounted () {
      this.securityIndexStatisticsGetPlanIds();
    },
    methods: {
      //查询校级或者院级计划
      securityIndexStatisticsGetPlanIds(){
        let obj = {
          source:this.propsData.source,
          schoolAdmin:this.propsData.schoolAdmin,
          deptId:this.propsData.deptId,
          subIds:this.propsData.subIds,
        }
        securityIndexStatisticsGetPlanIds(obj).then(response => {
          this.securityIndexStatisticsPlanList(response.data);
        });
      },
      //年度全校实验室安全检查统计
      securityIndexStatisticsPlanList(planIds){
        let obj = {
          source:this.propsData.source,
          schoolAdmin:this.propsData.schoolAdmin,
          deptId:this.propsData.deptId,
          subIds:this.propsData.subIds,
          planIds:planIds,
        }
        securityIndexStatisticsPlanList(obj).then(response => {
          let list = [];
          response.data.forEach((item,index)=>{
            let minList = [];
            minList.push(index+1);
            minList.push(item.planTitle);
            minList.push(item.cycleStartTime+' - '+item.cycleEndTime);
            minList.push(item.checkNum);
            minList.push(item.hazardNum);
            minList.push(item.rectificationNum);
            minList.push(item.multipleRectificationsNum);
            minList.push(item.ratio+'%');
            list.push(minList)
          })
          this.$set(this.config,'data',list);
          this.$set(this,'showType',true);
        });
      },
      //鼠标悬浮展示内容
      mouseover(val){
        if(val.layerY<40){
          this.suspensionTop = 10;
        }else if(val.layerY>38&&val.layerY<80){
          this.suspensionTop = 50;
        }else if(val.layerY>78&&val.layerY<120){
          this.suspensionTop = 90;
        }else if(val.layerY>118&&val.layerY<160){
          this.suspensionTop = 130;
        }else if(val.layerY>158&&val.layerY<200){
          this.suspensionTop = 170;
        }
        this.$set(this,'suspensionLeft',60);
        this.$set(this,'suspensionType',false);
        this.$set(this,'suspensionText','');
      },
      mouseoverDv(row){
        if(row.columnIndex == 1){
          console.log('row.ceil',row.ceil)
          this.$set(this,'suspensionText',row.ceil);
          this.$set(this,'suspensionType',true);
        }else{
          this.$set(this,'suspensionType',false);
          this.$set(this,'suspensionText','');
        }
      },
    },
  }
</script>
<style scoped lang="scss">
  .annualSecureInspect{
    position: relative;
    width:927px;
    .title-max-box{
      height: 40px;
    }
    .title-max-box-position{
      z-index:10;
      position: absolute;
      top:1px;
      left:0;
      display: flex;
      width:927px;
      height: 40px;
      border:1px solid #dfe6ec;
      background-color: #F5F5F5;
      p{
        font-weight:700;
        text-align: center;
        line-height:16px;
        font-size:14px;
      }
      div{
        height: 40px;
        border-left:1px solid #dfe6ec;
        align-items: center;
        display: flex;
        text-align: center;
      }
      div:nth-child(1){;
        border-left:none;
        p{
          width:57px;
        }
      }
      div:nth-child(2){
        p{
          width:188px;
        }
      }
      div:nth-child(3){
        p{
          width:209px;
        }
      }
      div:nth-child(4){
        p{
          width:79px;
        }
      }
      div:nth-child(5){
        p{
          width:79px;
        }
      }
      div:nth-child(6){
        p{
          width:79px;
        }
      }
      div:nth-child(7){
        p{
          width:128px;
        }
      }
      div:nth-child(8){
        p{
          width:99px;
        }
      }
    }
    .position-suspension-box{
      position: absolute;
      z-index:10;
      .position-suspension-p{
        background-color: rgba(70,70,70);
        color:#fff;
        padding: 4px 10px;
        border-radius:4px;
        font-size:14px;
      }
      .position-suspension-icon-box{
        display: flex;
        .position-suspension-icon{
          display: block;
          font-size: 14px;
          width: 14px;
          height: 14px;
          margin: -6px;
          color: rgba(70, 70, 70);
        }
        .position-suspension-null-left{
          width:40px;
        }
        .position-suspension-null-right{
          flex:1;
        }
      }
    }
    ::v-deep .dv-scroll-board{
      .header{
        border-left:1px solid #dfe6ec;
        border-right:1px solid #dfe6ec;
        .header-item:nth-child(1){
          border-left:none !important;
        }
        .header-item{
          color:#333;
          font-weight: 700;
          font-size:14px;
          border-left:1px solid #dfe6ec;
          border-bottom:1px solid #dfe6ec;
          border-top:1px solid #dfe6ec;
        }
      }
      .rows{
        border-left:1px solid #dfe6ec;
        border-right:1px solid #dfe6ec;
        border-bottom:1px solid #dfe6ec;
        .row-item{
          .ceil:nth-child(1){
            border-left:none !important;
          }
          .ceil{
            color:#333;
            font-size:14px;
            border-left:1px solid #dfe6ec;
            border-bottom:1px solid #dfe6ec;
          }
        }
      }
    }
  }
</style>
