<template>
  <div class="machine-room-box">
    <div class="headerSearch">

      <span class="titleGrid">所属月份：</span>
      <el-date-picker
        size="small"
        v-model="value2"
        @blur="handleDatePickerClick"
        type="date"
        placeholder="选择日期"
        style="width: 140px"
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd">
      </el-date-picker>
      <el-button type="success" @click="searchMachineRoom" size="small" style="margin-left: 5px">查询</el-button>
    </div>
    <!--    <div class="machineRoomGrid bgGrid" style="width: 33%;height: 500px;border:1px solid black;" v-for="(item,index) in deviceRoomData" :key="index" >-->

    <!--      <div id="test" style="width: 100%;height: 400px;border:1px solid red;"></div>-->
    <!--      <h3>-->
    <!--        <span v-if="valueInput===''">{{ Object.keys(deviceRoomData)[0] }}</span>-->
    <!--        <span>{{ valueInput }}</span>-->
    <!--        <span>机房空置率</span>-->
    <!--      </h3>-->
    <!--    </div>-->
    <!--    <div v-if="Object.keys(this.deviceRoomData).length<1" class="emptyBox">-->
    <!--      <el-empty :image-size="200" description="所有机房空置率数据为空"></el-empty>-->
    <!--    </div>-->
    <div style="width: 100vw;" class="content-box" v-if="isShowEmpty">
      <common-grid v-for="(item,index) in deviceRoomData" :key="index" :item="idArr" :nameIndex="index"
                   class="itemStyle"
                   ref="machineRef" v-if="isShowMachinRoom"></common-grid>
    </div>
    <el-empty :image-size="200" v-else class="empty-box" description="当前暂无机房空置信息"></el-empty>
  </div>
</template>

<script>
import echarts from "echarts";
import {mapGetters, mapState} from "vuex";
import './css/common.css'
import CommonGrid from "@/views/operation/deviceMangement/deviceGrid/grid/commonGrid.vue";
import {reqDeviceAnalysis} from "@/api/operation/device";

export default {
  name: "machineRoomGrid",
  components: {CommonGrid},
  props: ['valueInput', 'titiePoald'],
  data() {
    return {
      echartsInits: '',
      //存储所有类型警告的数据
      warningTypeNumber: {
        seriousIdle: [],//严重空闲
        warningIdle: [],//警告空闲
        normalIdle: [],//正常空闲
        addIdle: [],//新增空闲

      },
      idArr: [],
      isShowMachinRoom: false,
      value2: '',
      options: [],
      isShowEmpty: false,//是否展示空状态
    }
  },
  async mounted() {

    //获取org_type

    this.org_type = sessionStorage.getItem('org_type')
    this.juese = sessionStorage.getItem('juese')
    let date = new Date();
    let year = date.getFullYear();
    let month = date.getMonth() + 1;
    let day = date.getDate();

    month = (month > 9) ? month : ("0" + month);
    day = (day < 10) ? ("0" + day) : day;
    let today = year + "-" + month + "-" + day;
    let pload = {
      // "select_date": this.value2
      "select_date": today
    }
    this.value2 = today
    await this.$store.dispatch('getDeviceAnalysis', JSON.stringify(pload))
    this.isShowMachinRoom = true
    this.idArr = Object.keys(this.deviceRoomData)
    // console.log("mounted中给机房的赋值", this.deviceRoomData)
    this.value = Object.keys(this.deviceRoomData)[0]
    console.log("deviceRoomData的值是", this.deviceRoomData)
    if (Object.keys(this.deviceRoomData).length > 0) {
      this.flag = true
      this.isShowEmpty = true
    } else {
      this.isShowEmpty = false
    }


    let storedName = Object.keys(this.deviceRoomData)
    for (let i = 0; i < storedName.length; i++) {
      let item = {
        value: storedName[i],
        label: storedName[i]
      }
      this.options.push(item)
    }

    await this.$store.commit('GETSIMPLEDEVICEROOMDATA', this.deviceRoomData[this.value])
  },
  methods: {
    handleDatePickerClick() {
      // 在这里编写日期选择器点击后的回调逻辑
      console.log('日期选择器点击了');
      // 执行其他操作...
      this.isDateClick = true
    },
    searchMachineRoom() {
      //一点击查询隐图表
      this.gridShow = false
      let ploay = {
        "select_date": this.value2
      }
      if (this.value2) {
        reqDeviceAnalysis(JSON.stringify(ploay)).then(res => {
          if (res.status) {
            //如果请求数据为空
            if (JSON.stringify(res.data) === '{}') {
              this.$store.commit('GETDEVICEANALYSIS', [])
              this.value = ''
              this.$store.commit('setMachineRoomNameGridFull', this.value)
              // this.$message.error('该日期没有数据，请选择其他日期！')

              this.isShowEmpty = false
              console.log("当前日期有数据没有")
            } else {//如果请求数据不为空

              this.isShowEmpty = true
              this.gridShow = true
              console.log("当前日期有数据")
              this.$store.commit('GETDEVICEANALYSIS', res.data)
              //重新给机房列表赋值
              this.options = []
              let keyNameArr = Object.keys(res.data)
              for (let i = 0; i < keyNameArr.length; i++) {
                let item = {

                  value: keyNameArr[i],
                  label: keyNameArr[i]
                }
                this.options.push(item)
              }
              if (this.isDateClick) {
                this.value = keyNameArr[0]
                this.$store.commit('setMachineRoomNameGrid', Object.keys(res.data)[0])
                this.isDateClick = false
              } else {
                this.$store.commit('setMachineRoomNameGrid', this.value)
              }


              console.log("父组件的value是", this.value)
              this.$store.commit('GETSIMPLEDEVICEROOMDATA', this.deviceRoomData[this.value])
              console.log("全部机房分析", this.deviceRoomData)
              console.log("单个机房内分析simpleRoomData是", this.simpleRoomData)
              setTimeout(() => {
                this.$refs.machineRoom.updatePieEchart()
              }, 10)

            }
          } else {
            this.$message.error(res.msg)
          }
        })
      } else {
        this.$message.info('请选择相关日期选项!')
      }
    },


  },
  computed: {
    ...mapGetters(["sidebar"]),
    isCollapse() {
      return !this.sidebar.opened;
    },
    ...mapState({
      simpleRoomData: state => state.device.simpleRoomData,
      deviceRoomData: state => state.device.deviceRoomData,
      MachineRoomNameGrid: state => state.device.MachineRoomNameGrid,
    })
  },
  watch: {
    isCollapse(newValue, oldValue) {
      for (let i = 0; i < Object.keys(this.deviceRoomData).length; i++) {
        this.$refs.machineRef[i].initGrid()
      }
    }
  }
}
</script>

<style scoped lang="scss">
.machineRoomGrid {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.emptyBox {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
  width: 35vw;
  margin-top: 15%;
}

.machine-room-box {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  background-color: white;
  padding: 20px;
}

.itemStyle {
  width: 32%;
  margin-bottom: 15px;
  margin-right: 5px;
}

.headerSearch {
  position: sticky;
  top: 0;
  z-index: 99;
  width: 100vw;
  margin: 0 0 15px 0;
  background-color: rgba(255, 255, 255, 0.19);
  //border:1px solid red;
}

.titleGrid {
  font-size: 16px;
  color: #2c3e50;
}

.content-box {
  height: calc(100vh - 150px);
  overflow-y: auto;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.empty-box {
  width: 100vw;
  height: calc(100vh - 150px);

}
</style>
