<template>
  <div class="annualHiddenDistribution" v-on:mouseover.stop="mouseover">
    <div class="title-max-box-position">
      <div>
        <p>序号</p>
      </div>
      <div>
        <p>实验室</p>
      </div>
      <div>
        <p>隐患总数</p>
      </div>
      <div class="for-box" v-for="(item,index) in titleList" :key="index">
        <el-tooltip v-if="item.title.length>4" class="item" effect="dark" :content="item.title" placement="top">
          <p>
            {{item.title}}
          </p>
        </el-tooltip>
        <p v-else>
          {{item.title}}
        </p>
      </div>
    </div>
    <div class="title-max-box"></div>
    <dv-scroll-board v-if="showType" :config="config" style="width:534px;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 {
    reportSecIndexDataGetGaugeOutfit,
    reportSecIndexDataDistributionHazard,
  } from '@/api/safetyCheck/index'
  export default {
    name: 'annualSecureInspect',
    props:{
      propsData:{},
    },
    data () {
      return {
        showType:false,
        config:{
          headerHeight:40,
          rowNum:5,
          // header: [],
          columnWidth:[],
          headerBGC:'#F5F5F5',
          oddRowBGC:'#ffffff',
          evenRowBGC:'#ffffff',
          data: [],
          hoverPause:true,
        },
        titleList:[],
        lengthType:false,
        //鼠标悬浮展示内容
        suspensionType:false,
        suspensionText:'',
        suspensionTop:0,
        suspensionLeft:0,
      }
    },
    created () {

    },
    mounted () {
      this.reportSecIndexDataGetGaugeOutfit();
    },
    methods: {
      //各单位全年指标隐患分布表头数据
      reportSecIndexDataGetGaugeOutfit(){
        let self = this;
        let obj = {
          source:this.propsData.source,
          schoolAdmin:this.propsData.schoolAdmin,
          deptId:this.propsData.deptId,
          subIds:this.propsData.subIds,
        }
        reportSecIndexDataGetGaugeOutfit(obj).then(response => {
          this.$nextTick(()=>{
            let list = [];
            response.data.forEach((item,index)=>{
              list.push({
                title:item.name,
                length:item.name.length
              })
            })
            this.$set(this.config,'columnWidth',[40,94,50,58,58,58,58,58,58]);
            this.$set(this,'titleList',list);
            this.reportSecIndexDataDistributionHazard(response.data);
          })
        });
      },
      //各单位全年指标隐患分布列表
      reportSecIndexDataDistributionHazard(titleList){
        let obj = {
          source:this.propsData.source,
          schoolAdmin:this.propsData.schoolAdmin,
          deptId:this.propsData.deptId,
          subIds:this.propsData.subIds,
        }
        reportSecIndexDataDistributionHazard(obj).then(response => {
          let list = [];
          response.data.forEach((item,index)=>{
            let minList = [];
            minList.push(index+1);
            minList.push(item.subName);
            minList.push(item.hazardNum);
            titleList.forEach((minItem,minIndex)=>{
              minList.push(item[minItem.code]);
            })
            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,'suspensionType',false);
        this.$set(this,'suspensionText','');
      },
      mouseoverDv(row){
        if(row.columnIndex != 0){
          this.$set(this,'suspensionLeft',row.columnIndex==1?43:(row.columnIndex==2?137:(row.columnIndex==3?187:(row.columnIndex==4?245:(row.columnIndex==5?303:(row.columnIndex==6?361:(row.columnIndex==7?419:(row.columnIndex==8?477:43))))))));
          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">
  .annualHiddenDistribution{
    position: relative;
    width:548px;
    .title-max-box{
      height: 40px;
    }
    .title-max-box-position{
      z-index:10;
      position: absolute;
      top:1px;
      left:0;
      display: flex;
      width:534px;
      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:40px;
        }
      }
      div:nth-child(2){
        p{
          width:93px;
        }
      }
      div:nth-child(3){
        p{
          padding:0 10px;
          width:49px;
        }
      }
      .for-box{
        p{
          padding:0 10px;
          width:57px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
      }
    }
    .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:10px;
        }
        .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>
