<!--
 * @Author: Do not edit
 * @Date: 2023-08-29 14:59:29
 * @LastEditTime: 2025-01-09 10:27:53
 * @LastEditors: zwq
 * @Description:
-->
<template>
	<div class="app-container">
		<search-bar
			:formConfigs="formConfig"
			ref="searchBarForm"
			@select-changed="handleSearchBarChanged"
			@headBtnClick="buttonClick" />
		<div v-if="showData.length">
			<base-table
				class="right-aside"
				v-loading="dataListLoading"
				:table-props="tableProps"
				:page="1"
				:limit="999"
				:table-data="showData">
				<method-btn
					v-if="showData.length"
					slot="handleBtn"
					:width="80"
					label="操作"
					:method-list="tableBtn"
					@clickBtn="handleClick" />
			</base-table>
			<barChart
				v-for="item in chartData"
				:key="item.name + 'echart'"
				style="margin-top: 50px"
				height="600px"
				:id="item.name + 'echart'"
				:title="item.name + ' 节拍趋势图'"
				:bar-data="item" />
		</div>
		<div v-else class="no-data-bg"></div>
		<base-dialog
			:dialogTitle="addOrEditTitle"
			:dialogVisible="addOrUpdateVisible"
			@cancel="handleCancel"
			@confirm="handleConfirm"
			:before-close="handleCancel"
			close-on-click-modal
      top="0"
			width="50%">
			<eq-detail ref="eqDetail" />
			<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 eqDetail from './eq-detail';
import { parseTime } from '../../mixins/code-filter';
import { getPdList } from '@/api/core/monitoring/auto';
import { getNewCTNow, getNewCTCharts } from '@/api/core/analysis/index';
import { getFactoryPage } from '@/api/core/base/factory';
// import codeFilter from '../../mixins/code-filter'
import * as XLSX from 'xlsx';
import FileSaver from 'file-saver';
import barChart from './BarChart.vue';

const tableProps = [
	{
		prop: 'factoryName',
		label: '工厂',
	},
	{
		prop: 'lineName',
		label: '产线',
	},
	{
		prop: 'size',
		label: '规格',
		showOverflowtooltip: true,
	},
	{
		prop: 'process',
		label: '产品工艺',
	},
	{
		prop: 'edgeCt',
		label: '磨边当前节拍pcs/min',
	},
	{
		prop: 'temperCt',
		label: '钢化当前节拍pcs/min',
	},
	{
		prop: 'downCt',
		label: '下片当前节拍pcs/min',
	},
];

export default {
	components: {
		barChart,
		eqDetail,
	},
	data() {
		return {
			urlOptions: {
				getDataListURL: getNewCTNow,
			},
			listQuery: {
				lineId: [],
			},
			fileName: '',
			dataListLoading: false,
			tableProps,
			tableBtn: [
				{
					type: 'eq',
					btnName: '详情',
				},
			].filter((v) => v),
			showData: [],
			tableData: [],
			chartData: [],
			formConfig: [
				{
					type: 'select',
					label: '工厂',
					selectOptions: [],
					param: 'factoryId',
					onchange: true,
				},
				{
					type: 'select',
					label: '产线',
					selectOptions: [],
					param: 'lineId',
					multiple: true,
				},
				{
					type: 'datePicker',
					label: '时间范围',
					dateType: 'datetimerange',
					format: 'yyyy-MM-dd HH:mm:ss',
					valueFormat: 'timestamp',
					rangeSeparator: '-',
					startPlaceholder: '开始时间',
					endPlaceholder: '结束时间',
					defaultTime: ['00:00:00', '23:59:59'],
					param: 'timeVal',
					width: 350,
					clearable: false,
				},
				{
					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());
		// 设置为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.startTime = yesterday.getTime();
		this.listQuery.endTime = 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);

			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() {
			getPdList().then((res) => {
				this.formConfig[1].selectOptions = res.data || [];
			});
			const params = {
				pageSize: 100,
				pageNo: 1,
			};
			getFactoryPage(params).then((res) => {
				this.formConfig[0].selectOptions = res.data.list || [];
			});
		},
		buttonClick(val) {
			switch (val.btnName) {
				case 'search':
					this.listQuery.factoryId = val.factoryId || undefined;
					this.listQuery.lineId = val.lineId ? val.lineId : [];
					this.listQuery.startTime = val.timeVal ? val.timeVal[0] : undefined;
					this.listQuery.endTime = val.timeVal ? val.timeVal[1] : undefined;
					this.getDataList();
					break;
				case 'export':
					this.handleExport();
					break;
				default:
					console.log(val);
			}
		},
		// 获取数据列表
		getDataList() {
			this.dataListLoading = true;
			this.urlOptions.getDataListURL(this.listQuery).then((response) => {
				this.tableData = response.data;
				this.dataListLoading = false;
				this.showData = this.tableData;
			});
			getNewCTCharts(this.listQuery).then((response) => {
				this.chartData = response.data;
			});
		},
		handleSearchBarChanged({ param, value }) {
			this.listQuery.lineId = [];
			this.$refs.searchBarForm.formInline.lineId = undefined;
			getPdList(value).then((res) => {
				this.formConfig[1].selectOptions = res.data || [];
			});
		},
		handleClick(val) {
			this.addOrUpdateVisible = true;
			this.addOrEditTitle =
				val.data?.factoryName + '-' + val.data?.lineName + ' 详情';
			this.$nextTick(() => {
				this.$refs.eqDetail.init(
					val.data.lineId,
					this.listQuery.startTime,
					this.listQuery.endTime
				);
			});
		},
		handleCancel() {
			this.addOrUpdateVisible = false;
			this.addOrEditTitle = '';
		},
		handleConfirm() {
			this.handleCancel();
		},
	},
};
</script>
