<template>
	<div class="app-container">
		<!-- 搜索工作栏 -->
		<el-form
			:model="queryParams"
			ref="queryForm"
			size="small"
			:inline="true"
			v-show="showSearch"
			label-width="68px">
			<el-form-item label="创建时间" prop="createTime">
				<el-date-picker
					v-model="queryParams.createTime"
					style="width: 240px"
					value-format="yyyy-MM-dd HH:mm:ss"
					type="daterange"
					range-separator="-"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
					:default-time="['00:00:00', '23:59:59']" />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" @click="handleQuery">
					搜索
				</el-button>
				<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>

		<!-- 操作工具栏 -->
		<el-row :gutter="10" class="mb8">
			<el-col :span="1.5">
				<el-button
					type="primary"
					plain
					icon="el-icon-plus"
					size="mini"
					@click="handleAdd"
					v-hasPermi="['monitoring:equipment-alarm-realtime:create']">
					新增
				</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button
					type="warning"
					plain
					icon="el-icon-download"
					size="mini"
					@click="handleExport"
					:loading="exportLoading"
					v-hasPermi="['monitoring:equipment-alarm-realtime:export']">
					导出
				</el-button>
			</el-col>
			<right-toolbar
				:showSearch.sync="showSearch"
				@queryTable="getList"></right-toolbar>
		</el-row>

		<!-- 列表 -->
		<el-table v-loading="loading" :data="list">
			<el-table-column label="id" align="center" prop="id" />
			<el-table-column
				label="报警信息ID，关联base_equipment_group_alarm表"
				align="center"
				prop="alarmId" />
			<el-table-column
				label="字符型报警编码"
				align="center"
				prop="alarmContent" />
			<el-table-column label="报警详细描述" align="center" prop="description" />
			<el-table-column
				label="报警设备id 关联equipment表"
				align="center"
				prop="alarmEquipmentId" />
			<el-table-column label="实时报警值" align="center" prop="alarmValue" />
			<el-table-column
				label="状态，0 正常 1 报警中"
				align="center"
				prop="alarmStatus" />
			<el-table-column
				label="创建时间"
				align="center"
				prop="createTime"
				width="180">
				<template v-slot="scope">
					<span>{{ parseTime(scope.row.createTime) }}</span>
				</template>
			</el-table-column>
			<el-table-column
				label="操作"
				align="center"
				class-name="small-padding fixed-width">
				<template v-slot="scope">
					<el-button
						size="mini"
						type="text"
						icon="el-icon-edit"
						@click="handleUpdate(scope.row)"
						v-hasPermi="['monitoring:equipment-alarm-realtime:update']">
						修改
					</el-button>
					<el-button
						size="mini"
						type="text"
						icon="el-icon-delete"
						@click="handleDelete(scope.row)"
						v-hasPermi="['monitoring:equipment-alarm-realtime:delete']">
						删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页组件 -->
		<pagination
			v-show="total > 0"
			:total="total"
			:page.sync="queryParams.pageNo"
			:limit.sync="queryParams.pageSize"
			@pagination="getList" />

		<!-- 对话框(添加 / 修改) -->
		<el-dialog
			:title="title"
			:visible.sync="open"
			width="500px"
			v-dialogDrag
			append-to-body>
			<el-form ref="form" :model="form" :rules="rules" label-width="80px">
				<el-form-item
					label="报警信息ID，关联base_equipment_group_alarm表"
					prop="alarmId">
					<el-input
						v-model="form.alarmId"
						placeholder="请输入报警信息ID，关联base_equipment_group_alarm表" />
				</el-form-item>
				<el-form-item label="字符型报警编码">
					<editor v-model="form.alarmContent" :min-height="192" />
				</el-form-item>
				<el-form-item label="报警详细描述">
					<editor v-model="form.description" :min-height="192" />
				</el-form-item>
				<el-form-item
					label="报警设备id 关联equipment表"
					prop="alarmEquipmentId">
					<el-input
						v-model="form.alarmEquipmentId"
						placeholder="请输入报警设备id 关联equipment表" />
				</el-form-item>
				<el-form-item label="实时报警值" prop="alarmValue">
					<el-input v-model="form.alarmValue" placeholder="请输入实时报警值" />
				</el-form-item>
				<el-form-item label="状态，0 正常 1 报警中" prop="alarmStatus">
					<el-radio-group v-model="form.alarmStatus">
						<el-radio label="1">请选择字典生成</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import {
	createEquipmentAlarmRealtime,
	updateEquipmentAlarmRealtime,
	deleteEquipmentAlarmRealtime,
	getEquipmentAlarmRealtime,
	getEquipmentAlarmRealtimePage,
	exportEquipmentAlarmRealtimeExcel,
} from '@/api/monitoring/equipmentAlarmRealtime';
import Editor from '@/components/Editor';

export default {
	name: 'EquipmentAlarmRealtime',
	components: {
		Editor,
	},
	data() {
		return {
			// 遮罩层
			loading: true,
			// 导出遮罩层
			exportLoading: false,
			// 显示搜索条件
			showSearch: true,
			// 总条数
			total: 0,
			// 设备报警实时信息列表
			list: [],
			// 弹出层标题
			title: '',
			// 是否显示弹出层
			open: false,
			// 查询参数
			queryParams: {
				pageNo: 1,
				pageSize: 10,
				createTime: [],
			},
			// 表单参数
			form: {},
			// 表单校验
			rules: {},
		};
	},
	created() {
		this.getList();
	},
	methods: {
		/** 查询列表 */
		getList() {
			this.loading = true;
			// 执行查询
			getEquipmentAlarmRealtimePage(this.queryParams).then((response) => {
				this.list = response.data.list;
				this.total = response.data.total;
				this.loading = false;
			});
		},
		/** 取消按钮 */
		cancel() {
			this.open = false;
			this.reset();
		},
		/** 表单重置 */
		reset() {
			this.form = {
				id: undefined,
				alarmId: undefined,
				alarmContent: undefined,
				description: undefined,
				alarmEquipmentId: undefined,
				alarmValue: undefined,
				alarmStatus: undefined,
			};
			this.resetForm('form');
		},
		/** 搜索按钮操作 */
		handleQuery() {
			this.queryParams.pageNo = 1;
			this.getList();
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.resetForm('queryForm');
			this.handleQuery();
		},
		/** 新增按钮操作 */
		handleAdd() {
			this.reset();
			this.open = true;
			this.title = '添加设备报警实时信息';
		},
		/** 修改按钮操作 */
		handleUpdate(row) {
			this.reset();
			const id = row.id;
			getEquipmentAlarmRealtime(id).then((response) => {
				this.form = response.data;
				this.open = true;
				this.title = '修改设备报警实时信息';
			});
		},
		/** 提交按钮 */
		submitForm() {
			this.$refs['form'].validate((valid) => {
				if (!valid) {
					return;
				}
				// 修改的提交
				if (this.form.id != null) {
					updateEquipmentAlarmRealtime(this.form).then((response) => {
						this.$modal.msgSuccess('修改成功');
						this.open = false;
						this.getList();
					});
					return;
				}
				// 添加的提交
				createEquipmentAlarmRealtime(this.form).then((response) => {
					this.$modal.msgSuccess('新增成功');
					this.open = false;
					this.getList();
				});
			});
		},
		/** 删除按钮操作 */
		handleDelete(row) {
			const id = row.id;
			this.$modal
				.confirm('是否确认删除设备报警实时信息编号为"' + id + '"的数据项?')
				.then(function () {
					return deleteEquipmentAlarmRealtime(id);
				})
				.then(() => {
					this.getList();
					this.$modal.msgSuccess('删除成功');
				})
				.catch(() => {});
		},
		/** 导出按钮操作 */
		handleExport() {
			// 处理查询参数
			let params = { ...this.queryParams };
			params.pageNo = undefined;
			params.pageSize = undefined;
			this.$modal
				.confirm('是否确认导出所有设备报警实时信息数据项?')
				.then(() => {
					this.exportLoading = true;
					return exportEquipmentAlarmRealtimeExcel(params);
				})
				.then((response) => {
					this.$download.excel(response, '设备报警实时信息.xls');
					this.exportLoading = false;
				})
				.catch(() => {});
		},
	},
};
</script>
