<template>
	<Container
		name="工单监控"
		size="middle"
		style="">
		<TimePrompt
			class="timeShow"
			:timestr="timestr" />
		<div
			style="padding: 5px 10px"
			class="WOMonitoring">
			<dv-scroll-board
				:config="config"
				style="width: 900px; height: 380px"
				ref="worderScrollBoard" />
		</div>
	</Container>
</template>
<script>
import Container from '../components/Container.vue';
import TimePrompt from '../components/TimePrompt';
import { switchShowTime } from '../utils';
import { formatDate } from '@/utils';
export default {
	name: 'WorkOrderMonitoring',
	components: { Container, TimePrompt },
	computed: {
		order() {
			return this.$store.state.websocket.workOrder;
		},
	},
	data() {
		return {
			timestr: '',
			config: {
				header: [
					'序号',
					'工单名称',
					'规格',
					'产线',
					'工单状态',
					'计划完成时间',
					'计划产量',
					'实际产量',
					'完成进度',
				],
				headerBGC: 'rgba(32, 55, 96, 0.8)',
				oddRowBGC: 'rgba(32, 55, 96, 0.8)',
				evenRowBGC: 'rgba(14, 32, 62, 0.8)',
				columnWidth: [60, 120, 120, 60, 100, 150],
				align: ['center'],
				data: [],
				rowNum: 10,
			},
		};
	},
	mounted() {
		this.timestr = switchShowTime('日');
	},
	watch: {
		order: {
			handler(newVal, oldVal) {
				let outArr = this.order.map((item, index) => [
					index + 1,
					`<span title=${item.name || ''}>${item.name || ''}</span>`,
					item.specifications,
					item.lines,
					this.getDictDatas(this.DICT_TYPE.ORDER_STATUS)[item.status]?.label,
					formatDate(item.planFinishTime),
					item.planQuantity,
					item.actualQuantity,
					(item.progressRate * 100).toFixed(0) + '%',
				]);
				this.config.data = outArr;
				this.$refs['worderScrollBoard'].updateRows(outArr);
				this.timestr = switchShowTime('日');
			},
		},
	},
};
</script>
<style lang="scss" scoped>
.timeShow {
	position: absolute;
	top: 20px;
	left: 170px;
}
</style>
