<template>
	<div class="zy-template">
		<div class="zy-main-title">MQTT消息日志</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.type" size="mini" value="" placeholder=" " clearable>
						<el-option value="0" label="服务器接收" />
						<el-option value="1" label="服务器发送" />
					</el-select>
				</el-form-item>

				<el-form-item label="指令:" class="zy-search-form-item">
					<el-select v-model="query.m" size="mini" value="" placeholder=" " clearable>
						<el-option :value="item.code" :label="item.remark" v-for="item in mList" />
					</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="设备ID" width="150" />
				<el-table-column label="类型" width="80">
					<template #default="scope">{{scope.row.type==0?'接收':'发送'}}</template>
				</el-table-column>
				<el-table-column label="指令" width="80">
					<template #default="scope">
						<el-popover placement="bottom" :width="120" trigger="click" :content="scope.row.remark">
							<template #reference>
								<el-tag style="cursor: pointer;">{{scope.row.m}}</el-tag>
							</template>
						</el-popover>
					</template>
				</el-table-column>
				<el-table-column prop="content" label="内容" min-width="500" />
				<el-table-column prop="createTime" label="时间" width="180" />
			</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>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				query: {
					openNum: "",
					type: null,
					m: null
				},
				mList: null, //指令列表
				page: {
					current: 1,
					size: 20,
				},
			};
		},
		mounted() {
			this.getAllInstruction();
			this.getListPage();
		},
		methods: {
			/**
			 * 提交查询条件
			 */
			submit: function() {
				const param = {
					current: 1,
					size: this.page.size,
					openNum: this.query.openNum,
					type: this.query.type,
					m: this.query.m,
				};
				this.getListPage(param);
			},
			/**
			 * 分页点击事件
			 */
			pagination: function(current) {
				const param = {
					current: current,
					size: this.page.size,
					openNum: this.query.openNum,
					type: this.query.type,
					m: this.query.m,
				};
				this.getListPage(param);
			},

			/**
			 * 获取日志列表
			 */
			getListPage: function(params) {
				this.$http.Post(this.$global.logs.listPage, params).then(res => {
					this.page = res.data;
					console.log(res.data)
				})
			},
			/**
			 * 获取全部的指令
			 */
			getAllInstruction() {
				this.$http.Get(this.$global.logs.instructions, {}).then(res => {
					this.mList = res.data;
					console.log(res.data)
				})
			}
		}
	};
</script>

<style lang="scss">
</style>
