<template>
  <div class="app-container">
    <!-- 搜索工作栏 -->
    <search-area @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 {
      activeName: 'bar',
      chartData: []
    }
  },
  mounted() {},
  methods: {
    getList(params) {
      getEnergyTrend({ ...params }).then((res) => {
        if (res.code === 0) {
          this.chartData = res.data
        } else {
          this.chartData = []
        }
      })
      // getEnergyTrend({
      //   energyTypeId: "1681183397517406210",
      //   objId: "1679031282510532610",
      //   timeDim: "2",
      //   startTime: "1690732800000",
      //   endTime: "1690992000000"
      // }).then((res) => {
      //   console.log(res)
      //   this.chartData = res.data
      // })
    },
    switchChart() {
      if (this.activeName === 'bar') {
        this.$nextTick((res) => {
          this.$refs.analysisBarChart.getChart()
        })
      } else {
        this.$nextTick((res) => {
          this.$refs.analysisLineChart.getChart()
        })
      }
    }
  }
}
</script>