<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="month"
            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>

</template>

<script>
    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(new Date().setDate(1)).toLocaleDateString()).getTime(),
          endTime:   new Date(new Date(new Date().setDate(1)).toLocaleDateString()).getTime() + 30 * 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
        this.queryStartTime = this.startTime
        this.queryEndTime = this.endTime

        this.queryTime =this.queryStartTime+','+this.queryEndTime
        console.log(" 开始时间"+this.queryStartTime);
        console.log(" 结束时间"+this.queryEndTime);
        console.log(" -开始时间"+this.startTime);
        console.log(" -结束时间"+this.endTime);
        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: {
              electricEnergyTotal,
            }
    }

</script>

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

</style>
