<template>
	<div class="zy-template">
		<div class="zy-main-title">设备列表-路牌</div>
		<div class="zy-module">
			<el-form ref="form" :model="query" label-width="60px">
				<el-form-item label="设备码:" class="zy-search-form-item">
					<el-input v-model="query.openNum" size="mini" clearable></el-input>
				</el-form-item>
				<el-form-item label="设备组:" class="zy-search-form-item">
					<el-select v-model="query.groupId" filterable clearable placeholder=" " size="mini">
						<el-option v-for="item in groups" :key="item" :value="item" />
					</el-select>
				</el-form-item>
				<el-button type="primary" size="mini" @click="submit">查询</el-button>
			</el-form>
		</div>

		<div class="zy-module">
			<el-table :data="page.records" header-cell-class-name="zy-table-header-cell" cell-class-name='zy-table-cell'
				stripe>
				<el-table-column prop="openNum" label="设备码" min-width="180">
					<template #default="scope">IMEI{{scope.row.openNum}}</template>
				</el-table-column>
				<el-table-column prop="groupId" label="设备组" min-width="120" />
				<el-table-column prop="createTime" label="创建时间" min-width="180" />
				<el-table-column prop="battery" label="电量" min-width="80" />
				<el-table-column prop="s4g" label="信号" min-width="80" />
				<el-table-column label="状态" min-width="100">
					<template #default="scope">
						<el-tag type="success" v-if="scope.row.status===1" size="small">在线</el-tag>
						<el-tag type="danger" v-if="scope.row.status===0" size="small">离线</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="updateTime" label="最近通讯时间" min-width="180" />
				<el-table-column label="操作" min-width="80">
					<template #default="scope">
						<el-button @click="detailHandler(scope.row.openNum)" type="text" size="small">详情</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination class="zy-table-pagination" background layout="prev, pager, next"
				:current-page="page.current" :total="page.total" :page-size="page.size" @current-change="pagination" />
		</div>

		<el-dialog title="设备详情" v-model="detailDialog" width="500px">
			<el-descriptions :column="2" border>
				<el-descriptions-item label="设备码:">{{detail.openNum}}</el-descriptions-item>
				<el-descriptions-item label="唤醒间隔:">{{detail.wakeInt}}</el-descriptions-item>
				<el-descriptions-item label="阈值:">{{detail.thresh}}</el-descriptions-item>
				<el-descriptions-item label="温度:">{{detail.temp}}</el-descriptions-item>
				<el-descriptions-item label="电量:">{{detail.battery}}</el-descriptions-item>
				<el-descriptions-item label="信号:">{{detail.s4g}}</el-descriptions-item>
				<el-descriptions-item label="上传类型:">{{detail.dataType}}</el-descriptions-item>
				<el-descriptions-item label="X:">{{detail.x}}</el-descriptions-item>
				<el-descriptions-item label="Y:">{{detail.y}}</el-descriptions-item>
				<el-descriptions-item label="Z:">{{detail.z}}</el-descriptions-item>
				<el-descriptions-item label="angleX:">{{detail.anglex}}</el-descriptions-item>
				<el-descriptions-item label="angleY:">{{detail.angley}}</el-descriptions-item>
				<el-descriptions-item label="angleZ:">{{detail.anglexz}}</el-descriptions-item>
				<el-descriptions-item label="经度:">{{detail.lon}}</el-descriptions-item>
				<el-descriptions-item label="纬度:">{{detail.lat}}</el-descriptions-item>
				<el-descriptions-item label="定位模式:">{{detail.mode==1?'GPS':'基站'}}</el-descriptions-item>
			</el-descriptions>
		</el-dialog>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				query: {
					openNum: "",
					type: null,
				},
				page: {
					current: 1,
					size: 20,
				},
				groups: [], //设备组
				detailDialog: false, //详情弹出框
				detail: {}, //设备详情
			};
		},
		mounted() {
			this.getDevicesList();
			this.getGroupList();
		},
		methods: {
			/**
			 * 提交查询条件
			 */
			submit: function() {
				const param = {
					current: 1,
					size: this.page.size,
					groupId: this.query.groupId,
					openNum: this.query.openNum,
				};
				this.getDevicesList(param);
			},
			/**
			 * 分页点击事件
			 */
			pagination: function(current) {
				const param = {
					current: current,
					size: this.page.size,
					groupId: this.query.groupId,
					openNum: this.query.openNum,
				};
				this.getDevicesList(param);
			},

			/**
			 * 查看详情
			 */
			detailHandler: function(openNum) {
				this.detailDialog = true;
				this.getDeviceDetail(openNum);
			},

			/**
			 * 获取设备列表
			 */
			getDevicesList: function(params) {
				this.$http.Get(this.$global.lp.listPage, params).then(res => {
					this.page = res.data;
				})
			},

			/**
			 * 获取设备详情
			 */
			getDeviceDetail: function(openNum) {
				const params = {
					openNum: openNum
				}
				this.$http.Get(this.$global.lp.detail, params).then(res => {
					this.detail = res.data;
				})
			},

			/**
			 * 获取设备组
			 */
			getGroupList() {
				this.$http.Get(this.$global.group.listAll, {}).then(res => {
					this.groups = res.data.map(item => {
						return item.code;
					});
				})
			}
		}
	};
</script>
