<template>
	<div>
		<div style="background: #f2f4f9; height: 40px; width: 100%">
			<ButtonNav :menus="['历史成本', '成本查询']" @change="currentMenu">
				<template v-slot:tab1>
					<div>历史成本</div>
				</template>
				<template v-slot:tab2>
					<div>成本查询</div>
				</template>
			</ButtonNav>
		</div>
		<div class="app-container energyOverlimitLog">
			<div v-show="activeName === 'his'">
				<!-- 搜索工作栏 -->
				<search-bar
					:formConfigs="formConfig"
					ref="searchBarForm"
					@headBtnClick="buttonClick" />
			</div>
			<div v-show="activeName === 'now'">
				<!-- 搜索工作栏 -->
				<search-bar
					:formConfigs="formConfig2"
					ref="searchBarForm2"
					@headBtnClick="buttonClick" />
			</div>
			<!-- 列表 -->
			<div v-if="activeName === 'his'">
				<base-table
					:page="listQuery.pageNo"
					:limit="listQuery.pageSize"
					:table-props="tableProps"
					:table-data="tableData"
					:max-height="tableH">
					<method-btn
						v-if="tableBtn.length"
						slot="handleBtn"
						:width="80"
						label="操作"
						:method-list="tableBtn"
						@clickBtn="handleClick" />
				</base-table>
			</div>
			<div v-if="activeName === 'now'">
				<base-table
					:page="listQuery.pageNo"
					:limit="listQuery.pageSize"
					:table-props="tableProps2"
					:table-data="tableData2"
					:max-height="tableH" />
			</div>
			<pagination
				:page.sync="listQuery.pageNo"
				:limit.sync="listQuery.pageSize"
				:total="listQuery.total"
				@pagination="getNavDataList" />
			<base-dialog
				:dialogTitle="addOrEditTitle"
				:dialogVisible="addOrUpdateVisible"
				@cancel="handleCancel"
				@confirm="handleConfirm"
				:before-close="handleCancel"
				width="50%">
				<add-or-update
					ref="addOrUpdate"
					@refreshDataList="successSubmit"></add-or-update>
			</base-dialog>
		</div>
	</div>
</template>

<script>
import AddOrUpdate from './add-or-updata';
import basicPage from '@/mixins/basic-page';
import { getEnergyTypePage } from '@/api/base/energyType';
import {
	getEnergyHisPage,
	getEnergyRealtimePage,
	exportEnergyRealtimeExcel,
	exportEnergyHisExcel,
} from '@/api/cost/costEnergyDeep';
import { parseTime } from '@/filter/code-filter';
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
import ButtonNav from '@/components/ButtonNav';

const tableProps = [
	{
		prop: 'recTime',
		label: '日期',
		filter: (val) => parseTime(val, '{y}年{m}月{d}日'),
	},
	{
		prop: 'remark',
		label: '备注',
	},
	{
		prop: 'energyTypeName',
		label: '能源类型',
	},
	{
		prop: 'bindObjectName',
		label: '监控对象',
		filter: (val) => (val != null ? val : '--'),
	},
	{
		prop: 'meterName',
		label: '抄表名',
		filter: (val) => (val != null ? val : '--'),
	},
	{
		prop: 'quantity',
		label: '累计使用量',
	},
	{
		prop: 'price',
		label: '总价(元)',
		align: 'right',
	},
];
const tableProps2 = [
	{
		prop: 'remark',
		label: '备注',
	},
	{
		prop: 'energyTypeName',
		label: '能源类型',
	},
	{
		prop: 'bindObjectName',
		label: '监控对象',
		filter: (val) => (val != null ? val : '--'),
	},
	{
		prop: 'meter',
		label: '抄表名',
		filter: (val) => (val != null ? val : '--'),
	},
	{
		prop: 'quantity',
		label: '累计使用量',
	},
	{
		prop: 'price',
		label: '总价(元)',
		align: 'right',
	},
];
export default {
	name: 'costEnergy',
	mixins: [basicPage, tableHeightMixin],
	data() {
		return {
			urlOptions: {
				getDataListURL: getEnergyHisPage,
			},
			formConfig: [
				{
					type: 'select',
					label: '维度',
					selectOptions: [
						{ id: 1, name: '日' },
						{ id: 2, name: '周' },
						{ id: 3, name: '月' },
					],
					param: 'statisticType',
					defaultSelect: 1, // 默认值,
					clearable: false,
				},
				{
					type: 'select',
					label: '能源类型',
					selectOptions: [],
					param: 'name',
					labelField: 'name',
					filterable: true,
				},
				{
					type: 'datePicker',
					label: '时间范围',
					dateType: 'daterange',
					format: 'yyyy-MM-dd',
					valueFormat: 'yyyy-MM-dd HH:mm:ss',
					rangeSeparator: '-',
					startPlaceholder: '开始时间',
					endPlaceholder: '结束时间',
					param: 'searchTime',
				},
				{
					type: 'button',
					btnName: '查询',
					name: 'search',
					color: 'primary',
				},
				{
					type: 'separate',
				},
				{
					type: 'button',
					btnName: '导出',
					name: 'export',
					color: 'warning',
				},
			],
			formConfig2: [
				{
					type: 'select',
					label: '能源类型',
					selectOptions: [],
					param: 'name',
					labelField: 'name',
					filterable: true,
				},
				{
					type: 'datePicker',
					label: '时间范围',
					dateType: 'daterange',
					format: 'yyyy-MM-dd',
					valueFormat: 'yyyy-MM-dd HH:mm:ss',
					rangeSeparator: '-',
					startPlaceholder: '开始时间',
					endPlaceholder: '结束时间',
					param: 'searchTime',
				},
				{
					type: 'button',
					btnName: '查询',
					name: 'search',
					color: 'primary',
				},
				{
					type: 'separate',
				},
				{
					type: 'button',
					btnName: '导出',
					name: 'export',
					color: 'warning',
				},
			],
			listQuery: {
				statisticType: 1,
			},
			activeName: 'his',
			tableProps,
			tableProps2,
			tableBtn: [{
							type: 'edit',
							btnName: '编辑',
					  }
			].filter((v) => v),
			tableData: [],
			tableData2: [],
		};
	},
	components: {
		AddOrUpdate,
		ButtonNav,
	},
	created() {
		const params = {
			pageNo: 1,
			pageSize: 100,
		};
		getEnergyTypePage(params).then((response) => {
			this.formConfig[1].selectOptions = response.data.list;
			this.formConfig2[0].selectOptions = response.data.list;
		});
	},
	methods: {
		buttonClick(val) {
			if (val.statisticType === 2) {
				this.tableProps[0].filter = (val) =>
					parseTime(val, '{y}年第{w}周');
			}else{
				this.tableProps[0].filter = (val) =>
					parseTime(val, '{y}年{m}月{d}日');
      }
			this.formConfig2[1].startPlaceholder = '开始时间';
			this.formConfig2[1].endPlaceholder = '结束时间';
			switch (val.btnName) {
				case 'search':
					this.listQuery.pageNo = 1;
					this.listQuery.pageSize = 10;
					this.listQuery.energyTypeId = val.name || null;
					this.listQuery.statisticType = val.statisticType || 1;
					this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
					this.listQuery.endTime = val.searchTime
						? val.searchTime[1].substr(0, 10) + ' 23:59:59'
						: null;
					if (this.activeName === 'his') {
						this.getDataList();
					} else {
						this.getDataList2();
					}
					break;
				case 'add':
					this.addOrUpdateHandle();
					break;
				case 'export':
					this.listQuery.pageNo = 1;
					this.listQuery.pageSize = 10;
					this.listQuery.energyTypeId = val.name || null;
					this.listQuery.statisticType = val.statisticType || 1;
					this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
					this.listQuery.endTime = val.searchTime
						? val.searchTime[1].substr(0, 10) + ' 23:59:59'
						: null;
					this.handleExport();
					break;
				default:
					console.log(val);
			}
		},
		currentMenu(val) {
			this.activeName = val === '历史成本' ? 'his' : 'now';
			if (this.activeName === 'his') {
				this.$refs.searchBarForm.resetForm();
				this.listQuery.name = null;
				this.listQuery.startTime = null;
				this.listQuery.endTime = null;
				this.listQuery.statisticType = 1;
				this.listQuery.pageNo = 1;
				this.getDataList();
			} else {
				this.$refs.searchBarForm2.resetForm();
				const end = new Date();
				const start = new Date();
				start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
				this.listQuery.startTime = parseTime(start).substr(0, 10) + ' 00:00:00';
				this.listQuery.endTime = parseTime(end).substr(0, 10) + ' 23:59:59';
				this.formConfig2[1].startPlaceholder = parseTime(start).substr(0, 10);
				this.formConfig2[1].endPlaceholder = parseTime(end).substr(0, 10);
				this.listQuery.name = null;
				this.listQuery.pageNo = 1;
				this.getDataList2();
			}
		},
    getNavDataList(){
			if (this.activeName === 'his') {
				this.getDataList();
			} else {
				this.getDataList2();
			}
    },
		// 获取数据2列表
		getDataList2() {
			if (this.listQuery.startTime) {
				getEnergyRealtimePage(this.listQuery).then((response) => {
					this.tableData2 = response.data.list;
					this.listQuery.total = response.data.total;
				});
			} else {
				this.$message.warning('请选择时间范围');
			}
		},
		//tableBtn点击
		handleClick(val) {
			if (val.type === 'edit') {
				this.addOrUpdateVisible = true;
				this.addOrEditTitle = '编辑';
				this.$nextTick(() => {
					this.$refs.addOrUpdate.init(val.data, this.listQuery.statisticType);
				});
			} else {
				this.otherMethods(val);
			}
		},
		/** 导出按钮操作 */
		handleExport() {
			let exportURL, title;
			if (this.activeName === 'his') {
				exportURL = exportEnergyHisExcel;
				title = '深加工能源成本-历史成本';
			} else {
				exportURL = exportEnergyRealtimeExcel;
				title = '深加工能源成本-成本查询';
			}
			// 处理查询参数
			let params = { ...this.listQuery };
			params.pageNo = undefined;
			params.pageSize = undefined;
			this.$modal
				.confirm('是否确认导出所有数据项?')
				.then(() => {
					return exportURL(params);
				})
				.then((response) => {
					this.$download.excel(response, title + '报表.xls');
				})
				.catch(() => {});
		},
	},
};
</script>
<style lang="scss">
.energyOverlimitLog {
	.el-tabs__nav::after {
		content: '';
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 2px;
		background-color: #e4e7ed;
	}

	.el-tabs__nav-wrap::after {
		width: 0;
	}

	.el-tabs__item {
		padding: 0 10px;
	}

	.el-tabs__item:hover {
		color: rgba(0, 0, 0, 0.85);
	}

	.el-tabs__item.is-active {
		color: rgba(0, 0, 0, 0.85);
	}

	.el-tabs__item {
		color: rgba(0, 0, 0, 0.45);
	}

	.searchBarBox {
		margin-bottom: 0;
	}
}
</style>
