<template>
	<div class="warning-page">
		<navbar />
		<div class="main-box">
			<div class="title">
				<span></span>
				异常警告
				<div class="return-home" @click="toHome">
					<svg-icon
						icon-class="alarm-home"
						style="font-size: 20px; position: relative; top: 2px" />
					返回首页
				</div>
			</div>
			<search-bar
				:formConfigs="formConfig"
				removeBlue
				ref="searchBarForm"
				@headBtnClick="buttonClick" />
			<base-table
				:page="1"
				:limit="100000"
				:table-props="tableProps"
				:table-data="list"
				:max-height="tableH" />
		</div>
		<div class="footer">
			<img src="../../assets/img/alarm-bg.png" alt="" />
			<div>&copy; 中建材智能自动化研究院有限公司</div>
		</div>
	</div>
</template>
<script>
import Navbar from './components/Navbar';
import moment from 'moment';
import tableHeightMixin from '@/mixins/tableHeightMixin';
export default {
	name: 'AbnormalWarning',
	mixins: [tableHeightMixin],
	components: { Navbar },
	data() {
		return {
			formConfig: [
				{
					type: 'input',
					label: '报警来源',
					placeholder: '报警来源',
					param: 'content',
				},
				{
					type: 'select',
					label: '时间段',
					selectOptions: [],
					labelField: 'name',
					valueField: 'id',
					param: 'typeId',
					filterable: true,
				},
				{
					type: 'select',
					label: '报警级别',
					selectOptions: [],
					labelField: 'name',
					valueField: 'id',
					param: 'typeId',
					filterable: true,
				},
				{
					type: 'button',
					btnName: '查询',
					name: 'search',
					color: 'primary',
				},
			],
			heightNum: 280,
			tableProps: [
				{
					prop: 'createTime',
					label: '报警时间',
					width: 180,
					filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
				},
				{
					prop: 'productionLineName1',
					label: '报警来源',
					showOverflowtooltip: true,
				},
				{
					prop: 'productionLineName2',
					label: '报警类型',
					showOverflowtooltip: true,
				},
				{
					prop: 'productionLineName3',
					label: '报警级别',
					showOverflowtooltip: true,
				},
				{
					prop: 'productionLineName4',
					label: '报警原因',
					showOverflowtooltip: true,
				},
				{
					prop: 'sectionName5',
					label: '报警详情',
					showOverflowtooltip: true,
				},
			],
			list: [
				{ productionLineName: 1 },
				{ productionLineName: 1 },
				{ productionLineName: 1 },
				{ productionLineName: 1 },
				{ productionLineName: 1 },
				{ productionLineName: 1 },
				{ productionLineName: 1 },
				{ productionLineName: 1 },
				{ productionLineName: 1 },
				{ productionLineName: 1 },
				{ productionLineName: 1 },
				{ productionLineName: 1 },
				{ productionLineName: 1 },
				{ productionLineName: 1 },
				{ productionLineName: 1 },
				{ productionLineName: 1 },
			],
		};
	},
	created() {},
	methods: {
		buttonClick(val) {},
		toHome() {
			this.$router.push({ path: '/' });
		},
	},
};
</script>
<style lang="scss" scoped>
.warning-page {
	width: 100%;
	height: 100vh;
	.main-box {
		position: relative;
		width: 64.58%;
		height: calc(100vh - 160px);
		background-color: #fff;
		border-radius: 24px;
		margin: 16px auto 0;
		z-index: 10;
		padding: 24px 32px;
		.title {
			font-size: 16px;
			color: #000000;
			position: relative;
			cursor: pointer;
			span {
				display: inline-block;
				float: left;
				width: 4px;
				height: 16px;
				background-color: #0b58ff;
				border-radius: 1px;
				margin-right: 8px;
				margin-top: 4px;
			}
			.return-home {
				position: absolute;
				color: rgba(0, 0, 0, 0.3);
				font-size: 14px;
				right: 0px;
				top: 0px;
			}
		}
	}
	.footer {
		position: fixed;
		width: 100%;
		bottom: -3px;
		z-index: 8;
		img {
			width: 100%;
			height: 220px;
		}
		div {
			width: 100%;
			color: red;
			position: absolute;
			bottom: 10px;
			text-align: center;
			font-size: 12px;
			color: #c7c7c7;
			letter-spacing: 1px;
		}
	}
}
</style>
