<template>
  <div class="app-container" id="trendAnalysisBox">
    <!-- 搜索工作栏 -->
    <search-area :isFold="isFold" @submit="getList"/>
    <el-tabs v-model="activeName" @tab-click="switchChart">
      <el-tab-pane label="柱状图" name="bar">
        <bar-chart ref="analysisBarChart" :chartData="chartData" />
      </el-tab-pane>
      <el-tab-pane label="折线图" name="line">
        <line-chart ref="analysisLineChart" :chartData="chartData"/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { getEnergyTrend } from "@/api/analysis/energyAnalysis"
import SearchArea from "./components/searchArea"
import BarChart from "./components/barChart"
import LineChart from "./components/lineChart"
// import moment from 'moment'
export default {
  name: 'TrendAnalysis',
  components: { SearchArea, BarChart, LineChart },
  data() {
    return {
      isFold: false,
      activeName: 'bar',
      chartData: []
    }
  },
  mounted() {
    window.addEventListener('resize', () => {
      this.tableH = this.tableHeight(260)
      this.isFold = this.searchBarWidth('trendAnalysisBox', 1146)
    })
    this.isFold = this.searchBarWidth('trendAnalysisBox', 1146)
  },
  methods: {
    getList(params) {
      getEnergyTrend({ ...params }).then((res) => {
        if (res.code === 0) {
          this.chartData = res.data
        } else {
          this.chartData = []
        }
      })
    },
    switchChart() {
      if (this.activeName === 'bar') {
        this.$nextTick((res) => {
          this.$refs.analysisBarChart.getChart()
        })
      } else {
        this.$nextTick((res) => {
          this.$refs.analysisLineChart.getChart()
        })
      }
    }
  }
}
</script>