<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 = {};
				obj.prop = arr[i].time;
				obj.label = 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((res) => {
				// let fileName = '';
				// const contentDisposition = res.headers['content-disposition'];
				// if (contentDisposition) {
				// 	fileName = decodeURIComponent(
				// 		contentDisposition.slice(
				// 			contentDisposition.indexOf('filename=') + 9
				// 		)
				// 	);
				// }
				const blob = new Blob([res.data]);
				const reader = new FileReader();
				reader.readAsDataURL(blob);
				reader.onload = (e) => {
					const a = document.createElement('a');
					a.download = '走势分析';
					a.href = e.target.result;
					document.body.appendChild(a);
					a.click();
					document.body.removeChild(a);
					this.$message.success('导出成功');
				};
			});
		},
	},
};
</script>
<style lang='scss'>
.trendAnalysisBox {
	.trend-out-table {
		margin-bottom: 15px;
	}
}
</style>