<template>
	<div
		class="app-container trendAnalysisBox"
		id="trendAnalysisBox">
		<!-- 搜索工作栏 -->
		<search-area
			@submit="getList"
			@export="exportExl" />
		<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 {
			chartData: [],
			timeDim: '',
			tableProps: [],
			list: [],
		};
	},
	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);
		},
		// 导出excel
		exportExl(params) {
			exportTrend({ ...params })
				.then((response) => {
					this.$download.excel(response, '走势分析.xls');
					this.$message.success('导出成功');
				})
				.catch(() => {});
		},
	},
};
</script>
<style lang="scss">
.trendAnalysisBox {
	.trend-out-table {
		margin-bottom: 15px;
	}
}
</style>
