<template>
  <div style="width: 100%;height: 100%">
    <div style="width: 100%;background-color: transparent;height: 2%">
      <div class="filter">
        <div class="startTime">
          <span class="timeText">起始时间</span>
          <el-date-picker
            v-model="startTime"
            :clearable="false"
            type="date"
            value-format="timestamp"
            placeholder="选择日期">
          </el-date-picker>
        </div>
<!--        <div class="endTime">-->
<!--          <span class="timeText">截止时间</span>-->
<!--          <el-date-picker-->
<!--            v-model="endTime"-->
<!--            :clearable="false"-->
<!--            type="datetime"-->
<!--            value-format="timestamp"-->
<!--            placeholder="选择日期">-->
<!--          </el-date-picker>-->
<!--        </div>-->
        <div class="timeQuery">
          <el-button @click="queryData()" :loading="loading" size="small" >查询</el-button>
        </div>
      </div>
    </div>
    <div class="flex-container">
<!--      <div class="windTowerItem one" @click="clickChart('1')" style="transform: translate(-32.4%,0%) scale(0.3)">-->
        <electricEnergyTotal :queryTime=this.queryTime></electricEnergyTotal>
<!--      </div>-->
<!--      <div class="windTowerItem two active">-->
<!--        <balkElectricQuery :queryTime=this.queryTime @sendLoading="getLoadingFormTable"></balkElectricQuery>-->
<!--&lt;!&ndash;      </div>&ndash;&gt;-->
<!--      <div class="windTowerItem three active" @click="clickChart('3')" style="transform: translate(30%, 0) scale(0.98)">-->

<!--        <equipment-data :queryTime=this.queryTime></equipment-data>-->
<!--      </div>-->
      <!--<div class="windTowerItem four active" @click="clickChart('4')" style="transform: translate(30%, 0) scale(0.98)">-->
        <!--<windData  :queryTime=this.queryTime></windData>-->
      <!--</div>-->
    </div>
  </div>

</template>

<script>
    import balkElectricQuery from './balkElectricQuery/index'
    import equipmentData from './equipmentData/index'
    import electricEnergyTotal from './electricEnergyTotal/index'
    import resize from '../../../components/Charts/mixins/resize'
    export default {
      mixins: [resize],
      data() {
        return {
          items: [],
          queryStartTime:"",
          queryEndTime:"",
          startTime: new Date(new Date().toLocaleDateString()).getTime(),
          endTime: new Date(new Date().toLocaleDateString()).getTime() + 60 * 60 * 24 * 1000 - 1,
          queryTime:'',
          drawData: [],
          times:[],
          loading:false,
          tableLoading:true,

        }
      },
      mounted() {
        this.init();
      },
    methods:{
      init() {
        this.items = document.querySelectorAll('.flex-container .windTowerItem')
        for (let i = 0; i < this.items.length; i++) {
          this.items[i].dataset.order = i + 1;
        }
        this.queryStartTime = this.startTime
        this.queryEndTime = this.endTime
      },
      queryData(){
        this.loading = true
        // if(this.endTime<=this.startTime){
        //   this.startTime = this.queryStartTime
        //   this.endTime = this.queryEndTime
        //   this.$message.error("开始时间不能大于结束时间")
        //   this.loading = false
        //   return
        // }
        // if(this.endTime-this.startTime> 60 * 60 * 24 * 1000*31){
        //   this.startTime = this.queryStartTime
        //   this.endTime = this.queryEndTime
        //   this.$message.error("只能最多查询31天的数据哦")
        //   this.loading = false
        //   return
        // }
        this.queryStartTime = this.startTime
        this.queryEndTime = this.endTime

        this.queryTime =this.queryStartTime+','+this.queryEndTime
        this.loading = false
      },
      getLoadingFormTable(data){
        this.tableLoading = data
        this.loading= this.tableLoading
      },
      clickChart(clickIndex) {
        let activeItem = document.querySelector('.flex-container .active')
        let activeIndex = activeItem.dataset.order
        let clickItem = this.items[clickIndex - 1]
        if (activeIndex === clickIndex) {
          return
        }
        activeItem.classList.remove('active')
        clickItem.classList.add('active')
        this.setStyle(clickItem, activeItem)
      },
      setStyle(el1, el2) {
        let transform1 = el1.style.transform
        let transform2 = el2.style.transform
        el1.style.transform = transform2
        el2.style.transform = transform1
      },
    },
            components: {
              balkElectricQuery,
              // windData,
              electricEnergyTotal,
              equipmentData
            }
    }

</script>

<style  scoped>
    .flex-container{
        height: 90%;
        width: 100%;
        overflow: hidden;
        margin-top: 30px;
        margin-right:  50px;
    }

</style>
