<!--
 * @Author: Do not edit
 * @Date: 2024-04-22 15:49:56
 * @LastEditTime: 2024-04-26 10:34:12
 * @LastEditors: DY
 * @Description: 
-->
<template>
	<div class="weekly">
		<el-form
			:inline="true"
			:model="listQuery"
			class="blueTip">
			<el-form-item
				label="年份"
				prop="reportTime">
				<el-date-picker
					v-model="listQuery.time"
					value-format="timestamp"
					type="year"
					size="small"
					placeholder="选择年"></el-date-picker>
			</el-form-item>
			<el-button
				v-if="this.$auth.hasPermi('base:report-auto-production:query')"
				type="primary"
				size="small"
				@click="getList">
				查询
			</el-button>
			<el-button
				v-if="
					this.$auth.hasPermiAnd([
						'base:report-auto-original-glass:export',
						'base:report-auto-production:export',
					])
				"
				type="primary"
				size="small"
				plain
				@click="handleExport">
				导出
			</el-button>
		</el-form>
		<base-table
		ref="productionDataYearTable11"
			id="productionDataYearTable1"
			:table-props="tableProps"
			:table-data="tableData"
			:span-method="objectSpanMethod1"
			@emitFun="handleEmitFun"
			:max-height="tableH" />
		<base-table
		ref="productionDataYearTable22"
			id="productionDataYearTable2"
			:table-props="tableProps1"
			:table-data="tableData1"
			:span-method="objectSpanMethod1"
			@emitFun="handleEmitFun"
			:max-height="tableH"
			style="margin-top: 15px" />
	</div>
</template>

<script>
import { productionYearY, productionYearD } from '@/api/report/glass';
import { parseTime } from '../../core/mixins/code-filter';
import FileSaver from 'file-saver';
import * as XLSX from 'xlsx/xlsx.mjs';
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';

export default {
	// components: { monthWeek, proMonth },
	mixins: [tableHeightMixin],
	data() {
		return {
			heightNum: 350,
			listQuery: {
				time: '',
			},
			// startTimeStamp: '',
			// endTimeStamp: '',
			// reportTime: '',
			// glassWeekShow: false,
			// proWeekShow: false,
			tableData: [],
			tableProps: [],
			tableData1: [],
			tableProps1: [],
			resData: [],
			span1: [], //表格1的合并规则
			resData1: [],
			span2: []
		};
	},
	created() {
		let now = new Date()
    now.setHours(0, 0, 0, 0)
    now.setDate(1)
		now.setMonth(0)
    let startOfMonth = now.getTime()
    // let firstDayOfMonth = new Date(startOfMonth)
		// console.log('看看', parseTime(firstDayOfMonth))
    this.listQuery.time = startOfMonth
	},
	mounted() {
		this.getList();
	},
	methods: {
		getTime() {
			const firstDayOfYear = new Date(this.listQuery.time)
			const lastDayOfYear = new Date(firstDayOfYear.getFullYear() + 1, 0, 0, 0, 0, 0, 0)
			// console.log('时间', parseTime(firstDayOfMonth), parseTime(lastDayOfMonth))
			this.tableProps[0].label = '许昌安彩年原片生产汇总(' + parseTime(firstDayOfYear) + '-' + parseTime(lastDayOfYear) + ')'
			this.tableProps1[0].label = '许昌安彩年成品生产汇总(' + parseTime(firstDayOfYear) + '-' + parseTime(lastDayOfYear) + ')'
		},
		async getList() {
			// this.getTime()
			const firstDayOfYear = new Date(this.listQuery.time)
			const lastDayOfYear = new Date(firstDayOfYear.getFullYear() + 1, 0, 0, 0, 0, 0, 0)
			this.tableData = [];
			this.tableProps = [
				{
					prop: 'lineName',
					label: '',
					fixed: true,
					width: 120,
					'show-overflow-tooltip': true
				},
				{
					prop: 'paramsName',
					label: '',
					fixed: true,
					width: 120,
					'show-overflow-tooltip': true
				},
				{
					prop: 'xc',
					label: '许昌安彩年原片生产汇总(' + parseTime(firstDayOfYear) + '-' + parseTime(lastDayOfYear) + ')',
					// align: 'center',
					children: []
				}
			];
			this.tableData1 = [];
			this.tableProps1 = [
				{
					prop: 'lineName',
					label: '',
					fixed: true,
					'show-overflow-tooltip': true
				},
				{
					prop: 'paramsName',
					label: '',
					fixed: true,
					'show-overflow-tooltip': true
				},
				{
					prop: 'xc1',
					label: '许昌安彩年成品生产汇总(' + parseTime(firstDayOfYear) + '-' + parseTime(lastDayOfYear) + ')',
					// align: 'center',
					children: []
				}
			];
			await productionYearY(this.listQuery).then((res) => {
				this.resData = res.data;
				// 设置表头
				Object.keys(this.resData).forEach((item) => {
					this.tableProps[2].children.push({
						prop: item,
						label: item,
						'show-overflow-tooltip': true,
					});
				});
				this.buildTableData(this.resData);
			});
			await productionYearD(this.listQuery).then((res) => {
				this.resData1 = res.data;
				// 设置表头
				Object.keys(this.resData1).forEach((item) => {
					this.tableProps1[2].children.push({
						prop: item,
						label: item,
						'show-overflow-tooltip': true,
					});
				});
				this.buildTableData1(this.resData1);
			});
		},
		// 设置表格2数据
		buildTableData1(data) {
			let keys = Object.keys(data);
			let tempData = [];
			let subKeys = Object.keys(data[keys[0]]);
			let sub2Keys = Object.keys(data[keys[0]][subKeys[0]]);
			for (let i = 0; i < keys.length; i++) {
				if (i === 0) {
					for (let j = 0; j < subKeys.length; j++) {
						for (let k = 0; k < sub2Keys.length; k++) {
							let obj = {};
							obj.lineName = subKeys[j];
							obj.paramsName = sub2Keys[k];
							obj[keys[0]] = data[keys[0]][subKeys[j]][sub2Keys[k]];
							tempData.push(obj);
						}
					}
				} else {
					for (let j = 0; j < subKeys.length; j++) {
						for (let k = 0; k < sub2Keys.length; k++) {
							for (let v = 0; v < tempData.length; v++) {
								if (
									tempData[v].lineName === subKeys[j] &&
									tempData[v].paramsName === sub2Keys[k]
								) {
									tempData[v][keys[i]] = data[keys[i]][subKeys[j]][sub2Keys[k]];
								}
							}
						}
					}
				}
			}
			this.tableData1 = tempData;
			this.getSpanArr1(this.tableData1);
			this.$nextTick(() => {
				this.reTable1();
			});
		},
		// 设置表格数据
		buildTableData(data) {
			let keys = Object.keys(data);
			let tempData = [];
			let subKeys = Object.keys(data[keys[0]]);
			let sub2Keys = Object.keys(data[keys[0]][subKeys[0]]);
			for (let i = 0; i < keys.length; i++) {
				if (i === 0) {
					for (let j = 0; j < subKeys.length; j++) {
						for (let k = 0; k < sub2Keys.length; k++) {
							let obj = {};
							obj.lineName = subKeys[j];
							obj.paramsName = sub2Keys[k];
							obj[keys[0]] = data[keys[0]][subKeys[j]][sub2Keys[k]];
							tempData.push(obj);
						}
					}
				} else {
					for (let j = 0; j < subKeys.length; j++) {
						for (let k = 0; k < sub2Keys.length; k++) {
							for (let v = 0; v < tempData.length; v++) {
								if (
									tempData[v].lineName === subKeys[j] &&
									tempData[v].paramsName === sub2Keys[k]
								) {
									tempData[v][keys[i]] = data[keys[i]][subKeys[j]][sub2Keys[k]];
								}
							}
						}
					}
				}
			}
			this.tableData = tempData;
			this.getSpanArr(this.tableData);
			this.$nextTick(() => {
				this.reTable();
			});
		},
		reTable() {
			this.$refs.productionDataYearTable11.doLayout('productionDataYearTable1');
		},
		reTable1() {
			this.$refs.productionDataYearTable22.doLayout('productionDataYearTable2');
		},
		getSpanArr1(data) {
			this.span2 = [];
			for (var i = 0; i < data.length; i++) {
				if (i === 0) {
					this.span2.push(1);
					this.index1 = 0;
				} else {
					if (data[i].lineName === data[i - 1].lineName) {
						this.span2[this.index1] += 1;
						this.span2.push(0);
					} else {
						this.span2.push(1);
						this.index1 = i;
					}
				}
			}
		},
		// 获取合并行
		getSpanArr(data) {
			this.span1 = [];
			for (var i = 0; i < data.length; i++) {
				if (i === 0) {
					this.span1.push(1);
					this.index = 0;
				} else {
					if (data[i].lineName === data[i - 1].lineName) {
						this.span1[this.index] += 1;
						this.span1.push(0);
					} else {
						this.span1.push(1);
						this.index = i;
					}
				}
			}
		},
		objectSpanMethod1({ rowIndex, columnIndex }) {
			if (columnIndex === 0) {
				const _row = this.span1[rowIndex];
				return {
					rowspan: _row,
					colspan: 1,
				};
			}
		},
		handleExport() {
			const xlsxParam = { raw: true };
			let tables = document.querySelector('.el-table').cloneNode(true)
			const fix = tables.querySelector('.el-table__fixed')
			const fixRight = tables.querySelector('.el-table__fixed-right')
			if (fix) {
				tables.removeChild(tables.querySelector('.el-table__fixed'))
			}
			if (fixRight) {
				tables.removeChild(tables.querySelector('.el-table__fixed-right'))
			}
			let workbook = XLSX.utils.book_new();
			var ws = XLSX.utils.table_to_sheet(
				tables,
				xlsxParam
			);
			XLSX.utils.book_append_sheet(workbook, ws, '许昌安彩年原片生产汇总');

			let tables1 = document.querySelectorAll('.el-table')[1].cloneNode(true)
			const fix1 = tables1.querySelector('.el-table__fixed')
			const fixRight1 = tables1.querySelector('.el-table__fixed-right')
			if (fix1) {
				tables1.removeChild(tables1.querySelector('.el-table__fixed'))
			}
			if (fixRight1) {
				tables1.removeChild(tables1.querySelector('.el-table__fixed-right'))
			}
			var prows = XLSX.utils.table_to_sheet(
				tables1,
				xlsxParam
			);
			XLSX.utils.book_append_sheet(workbook, prows, '许昌安彩年成品生产汇总');
			let fileName = '生产数据汇总表-年报.xlsx';
			var wbout = XLSX.write(workbook, {
				bookType: 'xlsx',
				bookSST: true,
				type: 'array',
			});
			try {
				FileSaver.saveAs(
					new Blob([wbout], { type: 'application/octet-stream' }),
					fileName
				);
				this.$message.success('导出成功');
			} catch (e) {
				if (typeof console !== 'undefined') console.log(e, wbout);
			}
			return wbout;
		},
		handleEmitFun(payload) {
			console.log('payload', payload);
		},
	},
};
</script>

<style scoped>
.weekly {
	padding: 16px;
}
.blueTip::before {
	display: inline-block;
	content: '';
	width: 4px;
	height: 18px;
	background: #0b58ff;
	border-radius: 1px;
	margin-right: 8px;
	margin-top: 8px;
	margin-left: 16px;
}
</style>
