<!--
 * @Author: zwq
 * @Date: 2024-07-01 14:53:55
 * @LastEditors: zwq
 * @LastEditTime: 2024-09-26 10:47:36
 * @Description:
-->
<template>
  <div class="app-container trendAnalysisBox" id="trendAnalysisBox">
    <!-- 搜索工作栏 -->
    <search-area :isFold="isFold" @submit="getList"  @exportD="exportData"/>
		<div v-show="chartData.length">
			<base-table
				:table-props="tableProps"
				:table-data="list"
				class="trend-out-table" />
			<line-chart
				ref="analysisLineChart"
				:chartData="chartData"
				:timeDim="timeDim" />
		</div>
    <!-- 没有数据 -->
    <div class="no-data-bg" v-show='!chartData.length'></div>
  </div>
</template>
<script>
import { getEnergyTrend, exportTrend } from "@/api/analysis/energyAnalysis"
import SearchArea from "./components/searchArea"
import LineChart from "./components/lineChart"
// import moment from 'moment'
export default {
  name: 'TrendAnalysis',
  components: { SearchArea, LineChart },
  data() {
    return {
      isFold: false,
      chartData: [],
			timeDim: '',
			tableProps: [],
			list: [],
    }
  },
  mounted() {
    window.addEventListener('resize', () => {
      this.tableH = this.tableHeight(260)
      this.isFold = this.searchBarWidth('trendAnalysisBox', 1146)
    })
    this.isFold = this.searchBarWidth('trendAnalysisBox', 1146)
  },
  methods: {
    getList(params) {
      this.timeDim = params.timeDim
      getEnergyTrend({ ...params }).then((res) => {
        if (res.code === 0) {
					this.getTableList(res.data || []);
					this.chartData = res.data || [];
        } else {
          this.chartData = []
        }
      })
    },
		getTableList(arr) {
			this.tableProps = [];
			this.list = [];
			let tempX = [];
			let listObj = { useNum: '消耗量' }; // 数据
			for (let i = 0; i < arr.length; i++) {
				let obj = {};
				if (this.timeDim === '3') {
					let fName = arr[i].time.slice(0, 4);
					let lName = arr[i].time.slice(4, 6);
					obj.label = fName + ' 第 ' + lName + ' 周';
				} else {
					obj.label = arr[i].time;
				}
				obj.prop = arr[i].time;
				obj.minWidth = 100;
				tempX.push(obj);
				listObj[arr[i].time] = arr[i].useNum || null;
			}
			this.tableProps = [{ prop: 'useNum', label: '时间' }].concat(tempX);
			this.list.push(listObj);
		},
    /** 导出按钮操作 */
    exportData(val) {
      // 处理查询参数
      this.$modal.confirm('是否确认导出走势分析数据?').then(() => {
          this.exportLoading = true;
          return exportTrend(val);
        }).then(response => {
          this.$download.excel(response, '走势分析数据.xlsx');
          this.exportLoading = false;
        }).catch(() => {});
    }
  }
}
</script>
<style lang='scss'>
.trendAnalysisBox {
	.trend-out-table {
		margin-bottom: 15px;
	}
}
</style>
