<template>
	<div
		class="app-container"
		id="energyReportBox">
		<!-- 搜索工作栏 -->
		<search-bar
			:formConfigs="formConfig"
			ref="searchBarForm"
			:isFold="isFold"
			@headBtnClick="buttonClick" />
		<!-- 列表 -->
		<base-table
			:page="queryParams.pageNo"
			:limit="queryParams.pageSize"
			:table-props="tableProps"
			:table-data="list"
			:max-height="tableH" />
		<pagination
			:page.sync="queryParams.pageNo"
			:limit.sync="queryParams.pageSize"
			:total="total"
			@pagination="getList" />
	</div>
</template>

<script>
import {
	energyReportPageAuto,
	energyReportPageExportAuto,
} from '@/api/monitoring/energyReport';
import { getEnergyTypeListAll } from '@/api/base/energyType';
import { publicFormatter } from '@/utils/dict';
import { parseTime } from '@/utils/ruoyi';
const tableProps = [
	{
		prop: 'statisticType',
		label: '统计类型',
		filter: publicFormatter('statistic_type'),
	},
	{
		prop: 'startTime',
		label: '开始时间',
		filter: parseTime,
		minWidth: 160,
	},
	{
		prop: 'endTime',
		label: '结束时间',
		filter: parseTime,
		minWidth: 160,
	},
	{
		prop: 'statisticName',
		label: '统计方案',
	},
	{
		prop: 'energyType',
		label: '能源类型',
		filter: publicFormatter('energy_type'),
	},
	{
		prop: 'startNum',
		label: '抄表数(起始)',
	},
	{
		prop: 'endNum',
		label: '抄表数(结束)',
	},
	{
		prop: 'useNum',
		label: '消耗量',
	},
];
export default {
	name: 'EnergyLimit',
	data() {
		return {
			isFold: false,
			formConfig: [
				{
					type: 'select',
					label: '能源类型',
					labelField: 'labelName',
					selectOptions: [],
					param: 'energyTypeId',
					filterable: true,
				},
				{
					type: 'select',
					label: '统计类型',
					selectOptions: this.getDictDatas(this.DICT_TYPE.STATISTIC_TYPE),
					labelField: 'label',
					valueField: 'value',
					param: 'statisticType',
				},
				{
					type: 'datePicker',
					label: '时间',
					dateType: 'datetimerange',
					format: 'yyyy-MM-dd HH:mm:ss',
					valueFormat: 'timestamp',
					rangeSeparator: '-',
					startPlaceholder: '开始时间',
					endPlaceholder: '结束时间',
					param: 'timeVal',
					defaultSelect: [],
					width: 350,
				},
				{
					type: 'button',
					btnName: '查询',
					name: 'search',
					color: 'primary',
				},
				{
					type: 'separate',
				},
				{
					type: this.$auth.hasPermi('monitoring:energy-report:export')
						? 'button'
						: '',
					btnName: '导出',
					name: 'add',
					color: 'primary',
					plain: true,
				},
			],
			tableProps,
			tableH: this.tableHeight(260),
			// 总条数
			total: 0,
			// 班次基础信息列表
			list: [],
			// 查询参数
			queryParams: {
				pageNo: 1,
				pageSize: 20,
				energyTypeId: null,
				statisticType: null,
				startTime: null,
				endTime: null,
			},
		};
	},
	created() {
		window.addEventListener('resize', this._eventListeners);
		this.getList();
		this.getTypeList();
	},
	mounted() {
		this.isFold = this.searchBarWidth('energyReportBox', 1198);
	},
	destroyed() {
		window.removeEventListener('resize', this._eventListeners);
	},
	methods: {
		_eventListeners() {
			this.tableH = this.tableHeight(260);
			this.isFold = this.searchBarWidth('energyReportBox', 1198);
		},
		getTypeList() {
			getEnergyTypeListAll().then((res) => {
				this.formConfig[0].selectOptions = res.data || [];
				// this.energyTypeList = res.data || []
			});
		},
		buttonClick(val) {
			switch (val.btnName) {
				case 'search':
					this.queryParams.pageNo = 1;
					this.queryParams.energyTypeId = val.energyTypeId;
					this.queryParams.statisticType = val.statisticType;
					this.queryParams.startTime = val.timeVal ? val.timeVal[0] : null;
					this.queryParams.endTime = val.timeVal ? val.timeVal[1] : null;
					this.getList();
					break;
				default:
					this.$modal
						.confirm('是否确认导出')
						.then(() => {
							return energyReportPageExportAuto({ ...this.queryParams });
						})
						.then((response) => {
							this.$download.excel(response, '能源统计报表.xls');
						})
						.catch(() => {});
			}
		},
		/** 查询列表 */
		getList() {
			energyReportPageAuto(this.queryParams).then((response) => {
				this.list = response.data.list || [];
				this.total = response.data.total;
			});
		},
	},
};
</script>