<!--
 * @Author: Do not edit
 * @Date: 2023-08-29 14:59:29
 * @LastEditTime: 2025-02-25 14:26:04
 * @LastEditors: zwq
 * @Description:
-->
<template>
	<div class="app-container">
		<search-bar
			:formConfigs="formConfig"
			ref="searchBarForm"
			@headBtnClick="buttonClick" />
		<base-table-s
			v-if="showData.length"
			class="right-aside"
			v-loading="dataListLoading"
			:table-props="tableProps"
			:page="listQuery.pageNo"
			:limit="listQuery.pageSize"
			:table-data="showData">
			<method-btn
				v-if="showData.length"
				slot="handleBtn"
				:width="80"
				label="操作"
				:method-list="tableBtn"
				@clickBtn="handleClick" />
		</base-table-s>
		<div v-else class="no-data-bg"></div>
		<pagination
			:limit.sync="listQuery.pageSize"
			:page.sync="listQuery.pageNo"
			:total="listQuery.total"
			@pagination="getDataList" />
		<base-dialog
			:dialogTitle="addOrEditTitle"
			:dialogVisible="addOrUpdateVisible"
			@cancel="handleCancel"
			@confirm="handleConfirm"
			:before-close="handleCancel"
			close-on-click-modal
			top="0"
			width="80%">
			<gr-detail ref="grDetail" />
			<slot name="footer">
				<el-row slot="footer" type="flex" justify="end">
					<el-col :span="24">
						<el-button size="small" class="btnTextStyle" @click="handleCancel">
							取消
						</el-button>
					</el-col>
				</el-row>
			</slot>
		</base-dialog>
	</div>
</template>

<script>
import grDetail from './gr-detail';
import { getTeamReportPage } from '@/api/core/monitoring/auto';
import { getFactoryPage } from '@/api/core/base/factory';
import { getGroupTeamPage } from '@/api/base/groupTeam';
// import codeFilter from '../../mixins/code-filter'
import * as XLSX from 'xlsx';
import FileSaver from 'file-saver';
import baseTableS from './baseTable.vue';
import { parseTime } from '@/filter/code-filter';

const tableProps = [
	{
		prop: 'reportType',
		label: '报表类型',
    fixed: true
	},
	{
		prop: 'reportName',
		label: '日期',
		width: 180,
    fixed: true
	},
	{
		prop: 'factoryName',
		label: '工厂',
    fixed: true
	},
	{
		prop: 'teamName',
		label: '班组',
    fixed: true
	},

	{
		prop: 'inputN',
		label: '投入',
		align: 'center',
		children: [
			{
				prop: 'inputNum',
				label: '投入数量/片',
        width:100
			},
			{
				prop: 'inputArea',
				label: '投入面积/m²',
        width:100
			},
		],
	},
	{
		prop: 'outputN',
		label: '产出',
		align: 'center',
		children: [
			{
				prop: 'outputNum',
				label: '产出数量/片',
        width:100
			},
			{
				prop: 'outputArea',
				label: '产出面积/㎡',
				filter: (val) => (val != null ? val.toFixed(2) : '-'),
        width:100
			},
		],
	},
	{
		prop: 'lossN',
		label: '不良',
		align: 'center',
		children: [
			{
				prop: 'lossNum',
				label: '不良数量/片',
        width:100
			},
			{
				prop: 'lossArea',
				label: '不良面积/㎡',
				filter: (val) => (val != null ? val.toFixed(2) : '-'),
        width:100
			},
		],
	},
	{
		prop: 'lossRatio',
		label: '不良率/%',
		filter: (val) => (val != null ? val.toFixed(2) : '-'),
    width:100
	},
	{
		prop: 'outputRatio',
		label: '投入产出率/%',
		filter: (val) => (val != null ? val.toFixed(2) : '-'),
    width:110
	},
	{
		prop: 'processingRatio',
		label: '加工成品率/%',
		filter: (val) => (val != null ? val.toFixed(2) : '-'),
    width:110
	},
	{
		prop: 'lossD',
		label: '不良详情',
		align: 'center',
		children: [
			{
				prop: 'original',
				label: '原片',
        align: 'center',
				children: [
					{
						prop: 'originalLossNum',
						label: '原片不良/片',
            width:100
					},
					{
						prop: 'originalLossArea',
						label: '原片不良/㎡',
						filter: (val) => (val != null ? val.toFixed(2) : '-'),
            width:100
					},
				],
			},
			{
				prop: 'edge',
				label: '磨边',
        align: 'center',
				children: [
					{
						prop: 'edgeLossNum',
						label: '磨边不良/片',
            width:100
					},
					{
						prop: 'edgeLossArea',
						label: '磨边不良/㎡',
						filter: (val) => (val != null ? val.toFixed(2) : '-'),
            width:100
					},
				],
			},
			{
				prop: 'drill',
				label: '打孔',
        align: 'center',
				children: [
					{
						prop: 'drillLossNum',
						label: '打孔不良/片',
            width:100
					},
					{
						prop: 'drillLossArea',
						label: '打孔不良/㎡',
						filter: (val) => (val != null ? val.toFixed(2) : '-'),
            width:100
					},
				],
			},
			{
				prop: 'coating',
				label: '镀膜',
        align: 'center',
				children: [
					{
						prop: 'coatingLossNum',
						label: '镀膜不良/片',
            width:100
					},
					{
						prop: 'coatingLossArea',
						label: '镀膜不良/㎡',
						filter: (val) => (val != null ? val.toFixed(2) : '-'),
            width:100
					},
				],
			},
			{
				prop: 'silk',
				label: '丝印',
        align: 'center',
				children: [
					{
						prop: 'silkLossNum',
						label: '丝印不良/片',
            width:100
					},
					{
						prop: 'silkLossArea',
						label: '丝印不良/㎡',
						filter: (val) => (val != null ? val.toFixed(2) : '-'),
            width:100
					},
				],
			},
			{
				prop: 'tempering',
				label: '钢化',
        align: 'center',
				children: [
					{
						prop: 'temperingLossNum',
						label: '钢化不良/片',
            width:100
					},
					{
						prop: 'temperingLossArea',
						label: '钢化不良/㎡',
						filter: (val) => (val != null ? val.toFixed(2) : '-'),
            width:100
					},
				],
			},
			{
				prop: 'packing',
				label: '包装',
        align: 'center',
				children: [
					{
						prop: 'packingLossNum',
						label: '包装不良/片',
            width:100
					},
					{
						prop: 'packingLossArea',
						label: '包装不良/㎡',
						filter: (val) => (val != null ? val.toFixed(2) : '-'),
            width:100
					},
				],
			},
		],
	},
];

export default {
	components: {
		baseTableS,
		grDetail,
	},
	data() {
		return {
			urlOptions: {
				getDataListURL: getTeamReportPage,
			},
			listQuery: {
        reportType: 1,
				pageSize: 10,
				pageNo: 1,
				total: 1,
			},
			fileName: '',
			dataListLoading: false,
			tableProps,
			tableBtn: [
				{
					type: 'eq',
					btnName: '详情',
				},
			].filter((v) => v),
			showData: [],
			tableData: [],
			formConfig: [
				{
					type: 'select',
					label: '工厂',
					selectOptions: [],
					param: 'factoryId',
				},
				{
					type: 'select',
					label: '班组',
					selectOptions: [],
					param: 'teamId',
				},
				{
					type: 'select',
					label: '报表类型',
					selectOptions: [
						{
							id: 1,
							name: '日',
						},
						{
							id: 2,
							name: '周',
						},
						{
							id: 3,
							name: '月',
						},
						{
							id: 4,
							name: '年',
						},
					],
					defaultSelect: 1,
					param: 'reportType',
				},
				{
					type: 'datePicker',
					label: '时间范围',
					dateType: 'daterange',
					format: 'yyyy-MM-dd',
					valueFormat: 'timestamp',
					rangeSeparator: '-',
					startPlaceholder: '开始时间',
					endPlaceholder: '结束时间',
					param: 'timeVal',
				},
				{
					type: 'button',
					btnName: '查询',
					name: 'search',
					color: 'primary',
				},
				{
					type: 'separate',
				},
				{
					// type: this.$auth.hasPermi('base:factory:export') ? 'button' : '',
					type: 'button',
					btnName: '导出',
					name: 'export',
					color: 'warning',
				},
			],
			addOrEditTitle: '',
			addOrUpdateVisible: false,
		};
	},
	created() {
		// 获取当前时间
		const now = new Date();
		// 获取前一天的同一时间
		const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000);
		// 设置为00:00:00
		yesterday.setHours(0, 0, 0, 0);
		// 设置为23:59:59
		const end = new Date(yesterday.getTime());
		end.setHours(23, 59, 59, 59);
		this.listQuery.reportStartTime = [yesterday.getTime(),end.getTime()];
		this.$nextTick(() => {
			this.$refs.searchBarForm.formInline.timeVal = [yesterday.getTime(),end.getTime()];
		});
		this.getDataList();
		this.getPdLineList();
	},
	methods: {
		handleExport() {
			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 exportTable = XLSX.utils.table_to_book(tables);
      exportTable.Sheets.Sheet1.A1.v = '序号' //导出表格第一列表头为序号

			var exportTableOut = XLSX.write(exportTable, {
				bookType: 'xlsx',
				bookSST: true,
				type: 'array',
			});
			// sheetjs.xlsx为导出表格的标题名称
			try {
				FileSaver.saveAs(
					new Blob([exportTableOut], {
						type: 'application/octet-stream',
					}),
					this.fileName + '班组生产报表.xlsx'
				);
			} catch (e) {
				if (typeof console !== 'undefined') console.log(e, exportTableOut);
			}
			return exportTableOut;
		},
		getPdLineList() {
			const params = {
				pageSize: 100,
				pageNo: 1,
			};
			getGroupTeamPage(params).then((res) => {
				this.formConfig[1].selectOptions = res.data.list || [];
			});
			getFactoryPage(params).then((res) => {
				this.formConfig[0].selectOptions = res.data.list || [];
			});
		},
		buttonClick(val) {
			switch (val.btnName) {
				case 'search':
					this.listQuery.pageNo = 1;
					this.listQuery.pageSize = 10;
					this.listQuery.factoryId = val.factoryId || undefined;
					this.listQuery.teamId = val.teamId || undefined;
					this.listQuery.reportType = val.reportType || undefined;
					this.listQuery.reportStartTime = val.timeVal
						? val.timeVal
						: undefined;
					this.getDataList();
					break;
				case 'export':
					this.handleExport();
					break;
				default:
					console.log(val);
			}
		},
		// 获取数据列表
		getDataList() {
			this.dataListLoading = true;
			const arr = ['日', '周', '月', '年'];
			this.urlOptions.getDataListURL(this.listQuery).then((response) => {
				if (!response.data.list) {
					this.showData = [];
					this.dataListLoading = false;
					return;
				}
				this.tableData = response.data?.list.map((item, index) => {
					item.reportType = arr[item.reportType - 1];
					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;
					return item;
				});
				this.listQuery.total = response.data?.total;
				this.dataListLoading = false;
				this.showData = this.tableData;
			});
		},
		handleClick(val) {
			this.addOrUpdateVisible = true;
      const time = val.data.reportName?val.data.reportName:'- '
      const teamName = val.data.teamName?val.data.teamName:'- '
      const teamLeader = val.data.teamLeader?val.data.teamLeader:'- '
			this.addOrEditTitle =
				'时间：' +
				time +
				' 班组：' +
				teamName +
				' 组长：' +
				teamLeader +
				' 详情';
			this.$nextTick(() => {
				this.$refs.grDetail.init(val.data.id);
			});
		},
		handleCancel() {
			this.addOrUpdateVisible = false;
			this.addOrEditTitle = '';
		},
		handleConfirm() {
			this.handleCancel();
		},
		// 每页数
		sizeChangeHandle(val) {
			this.listQuery.pageSize = val;
			this.listQuery.pageNo = 1;
			this.getDataList();
		},
		// 当前页
		currentChangeHandle(val) {
			this.listQuery.pageNo = val;
			this.getDataList();
		},
	},
};
</script>
