// 行业督查
<template>
  <div class="box">
    <div class="title">
      行业督查
    </div>
    <div class="content">
      <div class="month">
        <div class="img" v-for="(item,index) in 12" :key="index" @click="clickMonth(item)" @mouseenter="mouseover(index)" @mouseleave="mouseout">
          <img class="imgs" :src="require(`@/assets/icon/nm.png`)"  >
          <p style="color:rgb(68,136,245);whiteSpace:nowrap;" class="monthCol">{{index+1}}月</p>
          <div class="mingxi" style="whiteSpace:nowrap;">明细</div>
        </div>
      </div>
      <div class="inner">
        <div class="task" v-for="(item,index) in taskList " :key="index">
          <span>{{item.name}}</span>
          <span>{{item.value}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script >
import {mapActions, mapState} from 'vuex'

export default {
  data(){
    return{
      taskList: [
        {
          name: '进行中主题',
          value: 0
        },
        {
          name: '已完成检查',
          value: 0
        },
        {
          value: 0,
          name: '已开整改单',
        },
      ],
      list: [],
    }
  },
  created(){

    this.getIndustrySupervision().then(res => {
      let obj = this.$com.confirm(res, 'data.content', [])
      this.taskList[0].value = obj.processingCount || 0
      this.taskList[1].value = obj.completedCount || 0
      this.taskList[2].value = obj.alreadyOpenInspectionCount || 0
    })
    this.getMonthCheck().then(res => {
      let arr = this.$com.confirm(res, 'data.content', [])
      // console.log(arr)
      arr.forEach((ele, index) => {
        document.querySelectorAll('.imgs')[ele.month-1].src = require('@/assets/icon/ok.png')
        document.querySelectorAll('.monthCol')[ele.month-1].style.color ='rgb(127, 179, 67)'
      })

    })
 
  },
  methods: {
    ...mapActions([
      'getIndustrySupervision',
      'getMonthCheck',
    ]),
    //月份补零
    format(num){
      if (num < 10) {
        return '0'+num
      }else{
        return num
      }
    },
    // 点击月份跳转
    clickMonth(item){
      let time = new Date().getFullYear()
      // this.$router.push({
      //   path: '/checkorder/month/monthList',
      //   query: {
      //     month: time+'-'+this.format(item)
      //   }
      // })
    },
    //悬停展示明细
    mouseover(index){
      document.querySelectorAll('.mingxi').forEach((item, i) => {
        if (index== i) {
          document.querySelectorAll('.mingxi')[i].style.display = 'block'
        }else{
          document.querySelectorAll('.mingxi')[i].style.display = 'none'
        }
      })
    },
    //离开不显示明细
    mouseout(){
      document.querySelectorAll('.mingxi').forEach((item, i) => {
        document.querySelectorAll('.mingxi')[i].style.display = 'none'
      })
    }
  }

}
</script>

<style scoped>
.box{
  background: #fff; 
  display: flex;
  flex-direction: column;
  min-height: 240px;
}
.box .title{
   height: 35px;
  padding-left: 20px;
  line-height: 35px;
  font-size: 15px;
  font-weight: 550;
  border-bottom: 1px solid #ccc;
}
.box .content{
  padding:12px;
  flex:1;
  display: flex;
}
.box .content .month{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  flex: 2;
  padding:0 12px;
}
 .box .content .month .img{
  width: 24%;
  height: 55px;
  position: relative;
  /* border: 1px solid #ccc; */
}
 .box .content .month .img .mingxi{
  width: 50px;
  height: 20px;
  position: absolute;
  background: #ccc;
  bottom: 0rem;
  left: 50%;
  text-align: center;
  font-size:12px;
  display: none;
  transform: translate(-50%,0%);
  cursor: pointer;
  border-radius: 0 0 5px 5px;
}

.box .content .month .img img{
  width: 50px;
  height: 50px;
  top:50%;
  left:50%;
  position: absolute;
  transform: translate(-50%,-50%);
  font-size: 12px;
  font-weight: 550;
  cursor: pointer;

}
.box .content .month .img p{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-size: 14px;
  cursor: pointer;

}
.box .content .inner{
  flex: 1;
  background: rgb(230,238,246);
  border-radius: 5px;
  margin: 1% 0;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.box .content .inner .task{
  display: flex;
  flex-direction: column;
  padding: 12px;
  font-weight: 500;
  font-size: 12px;
}
.box .content .inner .task span:last-child{
  color: rgb(68,136,245);
  font-size: 12px;

}

</style>