<template>
	<div class="common-page">
		<div class="option page-row">
			<!--工具栏-->
			<div class="head-container">
				<!-- 搜索 -->
				<label class="el-form-item-label" style="font-weight: 500;">条件查询</label>
				<el-input v-model="query.equipmentCode" clearable placeholder="请输入设备识别码或名称" style="width:240px;" @clear="clearLimit"/>
				<el-button size="mini" type="success" icon="el-icon-search" @click="toSearch">搜索</el-button>
			</div>
		</div>
		<div class="panel-bottom page-row">
			<h3>报警列表</h3>
			<div class="ctin-box">
				<div class="content-within">
					<div class="content-fix">
						<div class="content">
							<el-table :data="tableData" v-loading="loading" border style="width:auto" :row-class-name="tableRowClassName">
								<el-table-column prop="projectName" label="所属项目名称" width="90px"></el-table-column>
								<el-table-column prop="equipmentCode" label="设备标识码"></el-table-column>
								<el-table-column prop="equipmentName" label="所属设备名称" width="100px"></el-table-column>
								<el-table-column prop="windspeed" label="实时风速" width="65px"></el-table-column>
								<el-table-column prop="windspeedAlarm" label="风速是否报警" width="85px">
									<template slot-scope="scope">
										<span :class="{alarm:scope.row.windspeedAlarm === 1}">{{scope.row.windspeedAlarm == 1 ? "报警" : "正常"}}</span>
									</template>
								</el-table-column>
								<!-- <el-table-column prop="atemperature" label="温度值" width="60px">
									<template slot-scope="scope">
										<span :class="{alarm:scope.row.atemperaturealarm === 1}">{{scope.row.atemperature}}</span>
									</template>
								</el-table-column>
								<el-table-column prop="ahumidity" label="湿度值" width="60px">
									<template slot-scope="scope">
										<span :class="{alarm:scope.row.ahumidityalarm === 1}">{{scope.row.ahumidity}}</span>
									</template>
								</el-table-column> -->
								<el-table-column prop="temperatureAlarm" label="温度是否报警" width="85px">
									<template slot-scope="scope">
										<span :class="{alarm:scope.row.temperatureAlarm === 1}">{{scope.row.temperatureAlarm == 1 ? "是" : "否"}}</span>
									</template>
								</el-table-column>
								<el-table-column prop="humidity" label="实时湿度" width="65px"></el-table-column>
								<el-table-column prop="humidityAlarm" label="湿度是否报警" width="85px">
									<template slot-scope="scope">
										<span :class="{alarm:scope.row.humidityAlarm === 1}">{{scope.row.humidityAlarm == 1 ? "是" : "否"}}</span>
									</template>
								</el-table-column>
								<el-table-column prop="co2" label="实时二氧化碳" width="85px"></el-table-column>
								<el-table-column prop="co2Alarm" label="二氧化碳是否报警" width="110px">
									<template slot-scope="scope">
										<span :class="{alarm:scope.row.co2Alarm === 1}">{{scope.row.co2Alarm == 1 ? "是" : "否"}}</span>
									</template>
								</el-table-column>
								<el-table-column prop="mlux" label="实时光照" width="65px"></el-table-column>
								<el-table-column prop="mluxAlarm" label="光照是否报警" width="85px">
									<template slot-scope="scope">
										<span :class="{alarm:scope.row.mluxAlarm === 1}">{{scope.row.mluxAlarm == 1 ? "是" : "否"}}</span>
									</template>
								</el-table-column>
								<el-table-column prop="ph" label="实时酸碱度" width="75px"></el-table-column>
								<el-table-column prop="phAlarm" label="酸碱度是否报警" width="100px">
									<template slot-scope="scope">
										<span :class="{alarm:scope.row.phAlarm === 1}">{{scope.row.phAlarm == 1 ? "是" : "否"}}</span>
									</template>
								</el-table-column>
								<el-table-column prop="waterTemperature" label="实时水温" width="65px"></el-table-column>
								<el-table-column prop="waterTemperatureAlarm" label="水温是否报警" width="85px">
									<template slot-scope="scope">
										<span :class="{alarm:scope.row.phAlarm === 1}">{{scope.row.phAlarm == 1 ? "是" : "否"}}</span>
									</template>
								</el-table-column>
								<el-table-column prop="waterDepth" label="实时液位" width="65px"></el-table-column>
								<el-table-column prop="waterDepthAlarm" label="液位是否报警" width="85px">
									<template slot-scope="scope">
										<span :class="{alarm:scope.row.waterDepthAlarm === 1}">{{scope.row.waterDepthAlarm == 1 ? "是" : "否"}}</span>
									</template>
								</el-table-column>
								<el-table-column prop="electricalConductance" label="实时电导率" width="75px"></el-table-column>
								<el-table-column prop="electricalAlarm" label="电导率是否报警" width="100px">
									<template slot-scope="scope">
										<span :class="{alarm:scope.row.electricalAlarm === 1}">{{scope.row.electricalAlarm == 1 ? "是" : "否"}}</span>
									</template>
								</el-table-column>
								<el-table-column prop="createTime" label="记录时间" width="130px"></el-table-column>
								<el-table-column prop="status" label="处理状态" align="center" width="90px" fixed="right">
									<template slot-scope="scope">
										<span v-if="scope.row.state===1" class="normal">已处理</span>
										<span v-else class="alarm">未处理</span>
									</template>
								</el-table-column>
								<el-table-column label="操作" width="130px" align="center" fixed="right">
									<template slot-scope="scope">
										<el-button size="mini" type="success" icon="el-icon-alarm-clock" :disabled="scope.row.state===1" @click="toEdit(scope.row)">解除</el-button>
									</template>
								</el-table-column>
							</el-table>
							<!--分页组件-->
							<el-pagination :total="total" :current-page="page" style="margin-top: 8px;" layout="total, prev, pager, next, sizes" @size-change="sizeChange" @current-change="pageChange" />
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { Tools, HttpReq } from '@/assets/js/common.js';
import DateRangePicker from '@/components/DateRangePicker';
// style
import '@/assets/styles/common.css';

export default {
	name: 'Dashboard',
	components: {
		DateRangePicker
	},
	data() {
		return {
			loading: false,
			page: 1,
			size: 10,
			total: 0,
			query:{},
			tableData: [],
		}
	},
	mounted() {
		var that = this;

		this.$nextTick(() => {
			this.loadData();
		})
	},
	methods: {
		tableRowClassName({row, rowIndex}) {
			if (rowIndex === 1) {
				return 'warning-row';
			} else if (rowIndex === 3) {
				return 'success-row';
			}
			return '';
		},
		// 点击搜索
		toSearch() {
			this.page = 1
			this.loadData()
		},
		clearLimit(){		// 清除限制
			this.loadData()
		},
		loadData() {
			var that = this, sort = 'createTime,desc';
			var param = this.query;
			param.page = this.page - 1;
			param.size = this.size;
			param.sort = sort;

			// 按时间过滤
			var param2 = {};
			var Time = param.createTime || [];
			if(Time[0]){
				var date1 = new Date(Time[0]).getTime();
				var date2 = new Date(Time[1] || Time[0]).getTime();
				param2 = {date1:date1, date2:date2}
			};
			this.loading = true;

			HttpReq.alarm.getList(param).then((res) => {
				this.loading = false;
				if(res.code === 200){
					var body = res.data || {};
					var list = body.content || [];
					this.tableData = list;
					this.total = body.totalElements
				};
			}).catch(function(error) {
				this.loading = false;
			})
		},
		pageChange(e) {
			this.page = e
			this.loadData()
		},
		sizeChange(e) {
			this.page = 1
			this.size = e
			this.loadData()
		},
		toEdit(item) {
			var id = item.id;
			this.$confirm('确认处理该条数据吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then((e) => {
				var json = {};
				for(var key in item){
					if(key.indexOf('alarm') > 0 && item[key]){
						json[key] = item[key]
					}
				};
				this.reqUpdateItem({id:id, state:1, alarm:json})
			}).catch((e) => {
			})
		},
		reqUpdateItem(item){
			HttpReq.alarm.updateItem(item).then((res) => {
				if(res.code == 200){
					this.$notify({
						title: '解除成功！',
						type: 'success',
						duration: 2500
					})
				}else{
					this.$notify({
						title: '解除失败！',
						type: 'error',
						duration: 2500
					})
				};
				this.loadData()
			})
		},
	}
}
</script>

<style rel="stylesheet/scss" lang="scss" scope>
	.el-table .warning-row {
		background: oldlace;
	}

	.el-table .success-row {
		background: #f0f9eb;
	}

	.el-table{
		.alarm{color:#ff0000;}
		.normal{color:#b3b3b3;}
	}
</style>
