<template>
	<div class="zy-template">
		<div class="zy-main-title">设备组管理</div>
		<div class="zy-module">
			<el-form :model="query" label-width="80px">
				<el-form-item label="关键字" class="zy-search-form-item">
					<el-input v-model="query.name" size="mini" placeholder="编号/名称/备注" clearable></el-input>
				</el-form-item>

				<el-button type="primary" size="mini" @click="submit">查询</el-button>
			</el-form>
		</div>

		<div class="zy-module">
			<el-button type="primary" size="small" style="margin-bottom: 20px;" @click="addDialog = true">增加</el-button>
			<el-table :data="page.records" max-height="800" stripe size="small"
				header-cell-class-name="zy-table-header-cell" cell-class-name='zy-table-cell'>
				<el-table-column prop="code" label="设备组编号" width="100" />
				<el-table-column prop="name" label="设备组名称" width="120" />
				<el-table-column prop="item" label="所属项目" width="150" />
				<el-table-column label="备注" min-width="500">
					<template #default="scope">
						{{scope.row.remark}}
					</template>
				</el-table-column>
				<el-table-column prop="createTime" label="创建时间" width="180" />
				<el-table-column label="操作" width="100" min-width="10%">
					<template #default="scope">
						<el-button @click="handleUpdate(scope.row)" 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="addDialog" width="500px">
			<el-form ref="addForm" :model="addForm" label-width="100px" :rules="rules">
				<el-form-item label="设备组编号:" prop="code">
					<el-input v-model="addForm.code" maxlength="30" placeholder="不可重复"></el-input>
				</el-form-item>

				<el-form-item label="设备组名称:">
					<el-input v-model="addForm.name" maxlength="30"></el-input>
				</el-form-item>

				<el-form-item label="备注:">
					<el-input type="textarea" v-model="addForm.remark" maxlength="100"></el-input>
				</el-form-item>
			</el-form>
			
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="addDialog = false">取 消</el-button>
					<el-button type="primary" @click="addSubmit('addForm')">提 交</el-button>
				</span>
			</template>
		</el-dialog>

		<el-dialog title="修改设备组" v-model="updateDialog" width="500px">
			<el-form ref="updateForm" :model="updateForm" label-width="100px" :rules="rules">
				<el-form-item label="设备组编号:" prop="code">
					<el-input v-model="updateForm.code" maxlength="30" placeholder="不可重复"></el-input>
				</el-form-item>

				<el-form-item label="设备组名称:">
					<el-input v-model="updateForm.name" maxlength="30"></el-input>
				</el-form-item>

				<el-form-item label="备注:">
					<el-input type="textarea" v-model="updateForm.remark" maxlength="100"></el-input>
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="updateDialog = false">取 消</el-button>
					<el-button type="primary" @click="updateSubmit('updateForm')">提 交</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				query: {
					key: null,
				},
				page: {
					current: 1,
					size: 20,
				},
				addDialog: false, //增加表单
				updateDialog: false, //更新表单
				updateForm: {}, //更新表单
				addForm: { //添加表单
					code: null,
					name: null,
					remark: null
				},
				rules: {
					code: [{
						required: true,
						message: '项目编号必填',
						trigger: 'blur'
					}],

				}
			};
		},
		mounted: function() {
			this.getListPage(this.page);
		},
		methods: {
			/**
			 * 提交查询条件
			 */
			submit: function() {
				const params = {
					name: this.query.name,
					itemId: this.query.itemId,
					status: this.query.status
				};
				this.getListPage(params);
			},

			/**
			 * 分页点击事件
			 */
			pagination: function(current) {
				const params = {
					name: this.query.name,
					current: current,
					size: this.page.size,
				};
				this.getListPage(params);
			},

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

			/**
			 * 更新设备组
			 */
			handleUpdate: function(obj) {
				this.updateForm = {
					id: obj.id,
					code: obj.code,
					name: obj.name,
					remark: obj.remark
				}
				this.updateDialog = true;
			},

			/**
			 * 提交增加表单
			 */
			addSubmit: function(formName) {
				this.$refs[formName].validate((valid) => {
					if (!valid) return false;
					//提交表单
					this.$http.Post(this.$global.group.save, this.addForm).then(res => {
						this.$message.success("添加成功!");
						this.refresh();
					})
				});
			},

			/**
			 * 提交更新表单
			 */
			updateSubmit: function(formName) {
				this.$refs[formName].validate((valid) => {
					if (!valid) return false;
					//提交表单
					this.$http.Post(this.$global.group.update, this.updateForm).then(res => {
						console.log(res.data);
						this.$message.success("修改成功!");
						this.refresh();
					})
				});
			},

			/**
			 * 刷新列表
			 */
			refresh: function() {
				this.addDialog = false;
				this.updateDialog = false;
				const params = {
					key: this.query.key,
					current: this.page.current,
					size: this.page.size,
				}
				this.getListPage(params);
			}
		}
	};
</script>

<style lang="scss" scoped>

</style>
