<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.subcode" 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="subcode" label="设备识别码" width="140px"></el-table-column>
								<el-table-column prop="ename" label="设备名称"></el-table-column>
								<el-table-column prop="relement" label="电量" min-width="55px"></el-table-column>
								<el-table-column prop="relementalarm" :formatter="stateFormat" label="电量状态" min-width="55px"></el-table-column>
								<!-- <el-table-column prop="rtemperature" label="温度值" width="55px"></el-table-column>
								<el-table-column prop="rtemperaturealarm" label="温度状态" :formatter="stateFormat" width="65px"></el-table-column>
								<el-table-column prop="rhumidity" label="湿度值" width="55px"></el-table-column>
								<el-table-column prop="rhumidityalarm" label="湿度状态" :formatter="stateFormat" width="65px"></el-table-column> -->
								<el-table-column prop="rlenght1" label="宽度一" min-width="55px"></el-table-column>
								<el-table-column prop="rlenghtalarm1" label="宽度一状态" :formatter="stateFormat" min-width="55px"></el-table-column>
								<el-table-column prop="rlenght2" label="宽度二" min-width="55px"></el-table-column>
								<el-table-column prop="rlenghtalarm2" label="宽度二状态" :formatter="stateFormat" min-width="55px"></el-table-column>
								<el-table-column prop="rlenght3" label="宽度三" min-width="55px"></el-table-column>
								<el-table-column prop="rlenghtalarm3" label="宽度三状态" :formatter="stateFormat" min-width="55px"></el-table-column>
								<el-table-column prop="rsignal" label="信号强度" width="70px"></el-table-column>
								<el-table-column prop="createTime" label="设备激活时间" min-width="140px"></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 = 'date,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.realtime.getItem(param).then((res) => {
				this.loading = false;
				if(res.head.code === '0000'){
					var body = res.body || {};
					var list = body.list || [];
					this.tableData = list;
					this.total = body.total
				};
			}).catch(function(error) {
				this.loading = false;
			})
		},
		pageChange(e) {
			this.page = e
			this.loadData()
		},
		sizeChange(e) {
			this.page = 1
			this.size = e
			this.loadData()
		},
		stateFormat(row, column, cellValue) {
			cellValue = ~~cellValue;
			if (cellValue === 0) {
				return '正常'
			}else {
				return '报警'
			} 
		},
	}
}
</script>

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

	.el-table .success-row {
		background: #f0f9eb;
	}
	
	.dialog-map{border:1px solid green;height:300px;width:480px;}

</style>
