<!--
 * @Author: zwq
 * @Date: 2023-08-24 14:47:58
 * @LastEditors: zwq
 * @LastEditTime: 2025-02-25 14:03:40
 * @Description:
-->
<template>
	<div>
		<search-bar
			:formConfigs="formConfig"
			ref="searchBarForm"
			@headBtnClick="buttonClick" />
		<el-table
			id="detail"
			:data="tableData"
			:header-cell-style="{
				background: '#F2F4F9',
				color: '#606266',
			}"
			border
			:span-method="arraySpanMethod"
			v-loading="dataListLoading"
			style="width: 100%"
			ref="dataList">
			<el-table-column prop="lineName" label="产线" align="center" />
			<el-table-column
				prop="sizes"
				width="105"
				showOverflowtooltip
        align="center"
				label="规格" />
			<el-table-column prop="process" label="产品工艺" align="center" />
			<el-table-column prop="inputN" label="投入" align="center">
				<el-table-column prop="inputNum" label="投入数量/片" />
				<el-table-column prop="inputArea" label="投入面积/m²">
					<template v-slot="scope">
						<span>
							{{
								scope.row.inputArea != null
									? scope.row.inputArea.toFixed(2)
									: '-'
							}}
						</span>
					</template>
				</el-table-column>
			</el-table-column>
			<el-table-column prop="outputN" label="产出" align="center">
				<el-table-column prop="outputNum" label="产出数量/片" />
				<el-table-column prop="outputArea" label="产出面积/m²">
					<template v-slot="scope">
						<span>
							{{
								scope.row.outputArea != null
									? scope.row.outputArea.toFixed(2)
									: '-'
							}}
						</span>
					</template>
				</el-table-column>
			</el-table-column>
			<el-table-column prop="lossN" label="不良" align="center">
				<el-table-column prop="lossNum" label="不良数量/片" />
				<el-table-column prop="lossArea" label="不良面积/m²">
					<template v-slot="scope">
						<span>
							{{
								scope.row.lossArea != null ? scope.row.lossArea.toFixed(2) : '-'
							}}
						</span>
					</template>
				</el-table-column>
			</el-table-column>
			<el-table-column prop="lossRatio" label="不良率/%">
				<template v-slot="scope">
					<span>
						{{
							scope.row.lossRatio != null ? scope.row.lossRatio.toFixed(2) : '-'
						}}
					</span>
				</template>
			</el-table-column>
			<el-table-column prop="outputRatio" label="投入产出率/%">
				<template v-slot="scope">
					<span>
						{{
							scope.row.outputRatio != null
								? scope.row.outputRatio.toFixed(2)
								: '-'
						}}
					</span>
				</template>
			</el-table-column>
			<el-table-column prop="processingRatio" label="加工成品率/%">
				<template v-slot="scope">
					<span>
						{{
							scope.row.processingRatio != null
								? scope.row.processingRatio.toFixed(2)
								: '-'
						}}
					</span>
				</template>
			</el-table-column>
			<el-table-column prop="lossD" label="不良详情" align="center">
				<el-table-column prop="original" label="原片" align="center">
					<el-table-column prop="originalLossNum" label="原片不良/片" />
					<el-table-column prop="originalLossArea" label="原片不良/m²">
						<template v-slot="scope">
							<span>
								{{
									scope.row.originalLossArea != null
										? scope.row.originalLossArea.toFixed(2)
										: '-'
								}}
							</span>
						</template>
					</el-table-column>
				</el-table-column>
				<el-table-column prop="edge" label="磨边" align="center">
					<el-table-column prop="edgeLossNum" label="磨边不良/片" />
					<el-table-column prop="edgeLossArea" label="磨边不良/m²">
						<template v-slot="scope">
							<span>
								{{
									scope.row.edgeLossArea != null
										? scope.row.edgeLossArea.toFixed(2)
										: '-'
								}}
							</span>
						</template>
					</el-table-column>
				</el-table-column>
				<el-table-column prop="drill" label="打孔" align="center">
					<el-table-column prop="drillLossNum" label="打孔不良/片" />
					<el-table-column prop="drillLossArea" label="打孔不良/m²">
						<template v-slot="scope">
							<span>
								{{
									scope.row.drillLossArea != null
										? scope.row.drillLossArea.toFixed(2)
										: '-'
								}}
							</span>
						</template>
					</el-table-column>
				</el-table-column>
				<el-table-column prop="coating" label="镀膜" align="center">
					<el-table-column prop="coatingLossNum" label="镀膜不良/片" />
					<el-table-column prop="coatingLossArea" label="镀膜不良/m²">
						<template v-slot="scope">
							<span>
								{{
									scope.row.coatingLossArea != null
										? scope.row.coatingLossArea.toFixed(2)
										: '-'
								}}
							</span>
						</template>
					</el-table-column>
				</el-table-column>
				<el-table-column prop="silk" label="丝印" align="center">
					<el-table-column prop="silkLossNum" label="丝印不良/片" />
					<el-table-column prop="silkLossArea" label="丝印不良/m²">
						<template v-slot="scope">
							<span>
								{{
									scope.row.silkLossArea != null
										? scope.row.silkLossArea.toFixed(2)
										: '-'
								}}
							</span>
						</template>
					</el-table-column>
				</el-table-column>
				<el-table-column prop="tempering" label="钢化" align="center">
					<el-table-column prop="temperingLossNum" label="钢化不良/片" />
					<el-table-column prop="temperingLossArea" label="钢化不良/m²">
						<template v-slot="scope">
							<span>
								{{
									scope.row.temperingLossArea != null
										? scope.row.temperingLossArea.toFixed(2)
										: '-'
								}}
							</span>
						</template>
					</el-table-column>
				</el-table-column>
				<el-table-column prop="packing" label="包装" align="center">
					<el-table-column prop="packingLossNum" label="包装不良/片" />
					<el-table-column prop="packingLossArea" label="包装不良/m²">
						<template v-slot="scope">
							<span>
								{{
									scope.row.packingLossArea != null
										? scope.row.packingLossArea.toFixed(2)
										: '-'
								}}
							</span>
						</template>
					</el-table-column>
				</el-table-column>
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
import { getTeamReportPageDet } from '@/api/core/monitoring/auto';
import * as XLSX from 'xlsx';
import FileSaver from 'file-saver';

export default {
	components: {},
	data() {
		return {
			tableData: [],
			dataListLoading: false,
			formConfig: [
				{
					// type: this.$auth.hasPermi('base:factory:export') ? 'button' : '',
					type: 'button',
					btnName: '导出',
					name: 'export',
					color: 'warning',
				},
			],
		};
	},
	components: {},
	created() {},
	mounted() {},
	methods: {
		// 获取数据列表
		init(id) {
			this.dataListLoading = true;
			getTeamReportPageDet(id).then((response) => {
				this.tableData = response.data?.map((item, index) => {
					item.originalLossNum = item.original?.lossNum;
					item.originalLossArea = item.original?.lossArea;
					item.edgeLossNum = item.edge?.lossNum;
					item.edgeLossArea = item.edge?.lossArea;
					item.drillLossNum = item.drill?.lossNum;
					item.drillLossArea = item.drill?.lossArea;
					item.coatingLossNum = item.coating?.lossNum;
					item.coatingLossArea = item.coating?.lossArea;
					item.silkLossNum = item.silk?.lossNum;
					item.silkLossArea = item.silk?.lossArea;
					item.temperingLossNum = item.tempering?.lossNum;
					item.temperingLossArea = item.tempering?.lossArea;
					item.packingLossNum = item.packing?.lossNum;
					item.packingLossArea = item.packing?.lossArea;
					if (item.isSummaryReport) {
						item.lineName = '合计';
					}
					return item;
				});
				this.dataListLoading = false;
			});
		},
		arraySpanMethod({ row, column, rowIndex, columnIndex }) {
			if (row.isSummaryReport) {
				if (columnIndex === 0) {
					return [1, 3];
				} else if (columnIndex === 1) {
					return [0, 0];
				} else if (columnIndex === 2) {
					return [0, 0];
				}
			}
		},

		buttonClick(val) {
			switch (val.btnName) {
				case 'export':
					this.handleExport();
					break;
				default:
					console.log(val);
			}
		},
		handleExport() {
			let tables = document.querySelector('#detail').cloneNode(true);
			let exportTable = XLSX.utils.table_to_book(tables);

			var exportTableOut = XLSX.write(exportTable, {
				bookType: 'xlsx',
				bookSST: true,
				type: 'array',
			});
			// sheetjs.xlsx为导出表格的标题名称
			try {
				FileSaver.saveAs(
					new Blob([exportTableOut], {
						type: 'application/octet-stream',
					}),
					'班组生产报表-详情.xlsx'
				);
			} catch (e) {
				if (typeof console !== 'undefined') console.log(e, exportTableOut);
			}
			return exportTableOut;
		},
	},
};
</script>
