<template>
	<div style="flex: 1">
		<Container
			name="设备报警"
			size="middle"
			style="">
			<TimePrompt
				class="timeShow"
				:timestr="timestr" />
			<div style="padding: 5px 10px">
				<dv-scroll-board
					:config="config"
					style="width: 575px; height: 380px"
					ref="eqScrollBoard" />
			</div>
		</Container>
	</div>
</template>
<script>
import Container from '../components/Container.vue';
import TimePrompt from '../components/TimePrompt';
import { switchShowTime } from '../utils';
export default {
	name: 'EqAlarm',
	components: { Container, TimePrompt },
	computed: {
		sjgEquipment() {
			return this.$store.state.websocket.sjgEquipment;
		},
	},
	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, 150, 190],
				align: ['center'],
				data: [],
				// data: [
				//   [1, '四大线3小线铺纸机', 'EQ20240110130909000255', '正常', '否'],
				//   [2, '四大线2小线铺纸机', 'EQ20240110130848000254', '正常', '否'],
				//   [3, '四大线1小线铺纸机', 'EQ20240110130832000253', '正常', '否'],
				//   [4, '12线下片台', 'EQ20240110130817000252', '正常', '否'],
				//   [5, '11线下片台', '	EQ20240110130743000250', '正常', '否'],
				//   [6, '10线下片台', '	EQ20240110130743000250', '正常', '否'],
				//   [7, '4大线五区自动连线柜', 'EQ20240110130731000249', '正常', '否'],
				//   [8, '四大线四区2小线清洗机', 'EQ20240110112716000248', '正常', '否'],
				//   [9, '四大线四区1小线清洗机', 'EQ20240110112700000247', '正常', '否'],
				//   [10, '4大线四区自动连线柜', 'EQ20240110112646000246', '正常', '否']
				// ],
				rowNum: 10,
			},
		};
	},
	mounted() {
		this.timestr = switchShowTime('日');
	},
	watch: {
		sjgEquipment: {
			handler(newVal, oldVal) {
				let outArr = this.sjgEquipment.map((item, index) => [
					index + 1,
					`<span title=${item.name || ''}>${item.name || ''}</span>`,
					`<span title=${item.code || ''}>${item.code || ''}</span>`,
					`<span><div style="${
						item.status == '运行'
							? 'box-shadow: 0px 0px 2px 1px #2760FF;width:6px;height:6px;border-radius: 50%;background-color: #2760FF;float:left;margin:13px 10px 0 0 '
							: item.status == '故障'
							? 'box-shadow: 0px 0px 2px 1px red;width:6px;height:6px;border-radius: 50%;  background-color: red;float:left;margin:13px 10px 0 0 '
							: 'box-shadow: 0px 0px 2px 1px #FFBD02;width:6px;height:6px;border-radius: 50%;  background-color: #FFBD02;float:left;margin:13px 10px 0 0 '
					}"></div>  ${item.status || ''}</span>`,
					`<span"><div style="${
						item.error == false
							? 'box-shadow: 0px 0px 2px 1px #2760FF;width:6px;height:6px;border-radius: 50%;background-color: #2760FF;float:left;margin:13px 10px 0 0 '
							: 'box-shadow: 0px 0px 2px 1px red;width:6px;height:6px;border-radius: 50%;  background-color: red;float:left;margin:13px 10px 0 0 '
					}"></div>  ${item.error == true ? '是' : '否' || ''}</span>`,
				]);
				this.config.data = outArr;
				this.$refs['eqScrollBoard'].updateRows(outArr);
				this.timestr = switchShowTime('日');
			},
		},
	},
};
</script>
<style lang="scss" scoped>
.timeShow {
	position: absolute;
	top: 20px;
	left: 170px;
}
</style>
