<template>
	<div>
		<el-row>
			<el-col :span="24" class="first-row">
				<div class="tag">设备管理</div>
				<span class="right-btn">
					<el-upload class="upload-demo" action="" accept=".xls" :http-request="uploadXLS"
						:show-file-list="false">
						<el-button type="primary" size="small">表格导入</el-button>
					</el-upload>
					<el-link type="primary" target="_blank"
						href="https://jtishfw.ncjti.edu.cn/jxch-smartmp/HotWaters/download/模板.xls">
						模板下载</el-link>
				</span>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24" class="second-row">
				<el-form :inline="true" class="demo-form-inline">
					<el-form-item label="水表ID:" class="shuibiaoId">
						<el-input type="text" v-model="query_shuibiaoId" maxlength="13" placeholder="请输入水表ID"
							@input="idInputChange($event)"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="searchBtnSubmit">查找</el-button>
					</el-form-item>
					<el-form-item label="楼栋号:" class="loudonghao">
						<el-select v-model="form_select.value" @change="selectGet(form_select.value)">
							<el-option v-for="item in form_select.builds" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
				</el-form>
				<div class="btn-add">
					<!-- <el-button type="primary" icon="el-icon-add" @click="handleAdd">添加</el-button> -->
				</div>
			</el-col>
		</el-row>
		<hr style="background-color: #CCCCCC;height: 1px;border: 0;">
		<el-row>
			<el-col :span="24" class="third-row">
				<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
					@selection-change="handleSelectionChange" highlight-current-row>
					<el-table-column type="selection" align="center" width="105"></el-table-column>
					<el-table-column label="水表ID" width="260">
						<template slot-scope="scope">{{ scope.row.user_id }}</template>
					</el-table-column>
					<el-table-column prop="build" label="楼栋号" align="center" width="400"></el-table-column>
					<el-table-column prop="dom" label="宿舍号" show-overflow-tooltip></el-table-column>
					<el-table-column label="操作" align="center" width="90">
						<el-button type="text" class="del-btn" slot-scope="scope"
							@click="handleDelete(scope.$index, scope.row)">删除
						</el-button>
					</el-table-column>
					<el-table-column width="130">
						<el-button type="text" slot-scope="scope" @click="handleEdit(scope.$index, scope.row)">编辑
						</el-button>
					</el-table-column>
				</el-table>
				<div style="margin-top: 20px" class="table-footer">
					<div class="pages">
						<el-pagination layout="prev, pager, next" :current-page.sync="currentPage"
							:hide-on-single-page="true" :page-size="pageRows" :total="rows_total"
							@current-change="handleCurrentChange"></el-pagination>
					</div>
					<div class="export-table">
						<el-button type="primary" size="small" @click="handleDownloadTable">表格导出</el-button>
					</div>
				</div>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24" class="forth-row">
				<!-- 添加对话框 -->
				<el-dialog title="添加" :visible.sync="adddialogFormVisible" width="500px" top="0vh" class="my-dialog"
					:close-on-click-modal="false" :close-on-press-escape="false">
					<hr
						style="width: 100%; position: absolute; top: 60px; left: 0px;background-color: #CCCCCC;height: 1px;border: 0;">
					<el-form :model="addform" :rules="addformRules" ref="addform">
						<el-form-item label="水表ID：" :label-width="formLabelWidth" prop="user_id">
							<el-input v-model="addform.user_id" autocomplete="off" maxlength="13"></el-input>
						</el-form-item>
						<el-form-item label="楼栋号：" :label-width="formLabelWidth" prop="build">
							<el-input v-model="addform.build" autocomplete="off" maxlength="4"></el-input>
						</el-form-item>
						<el-form-item label="宿舍号：" :label-width="formLabelWidth" prop="dom">
							<el-input v-model="addform.dom" autocomplete="off" maxlength="6"></el-input>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button @click="adddialogFormVisible = false">取 消</el-button>
						<el-button type="primary" @click="handleAddRow('addform')">确 定</el-button>
					</div>
				</el-dialog>
				<!-- 编辑对话框 -->
				<el-dialog title="编辑" :visible.sync="editdialogFormVisible" width="500px" top="0vh" class="my-dialog"
					:close-on-click-modal="false" :close-on-press-escape="false">
					<hr
						style="width: 100%; position: absolute; top: 60px; left: 0px;background-color: #CCCCCC;height: 1px;border: 0;">
					<el-form :model="modifyForm" :rules="modifyformRules" ref="modifyForm">
						<el-form-item label="水表ID：" :label-width="formLabelWidth" prop="user_id">
							<el-input v-model="modifyForm.user_id" autocomplete="off" maxlength="13"></el-input>
						</el-form-item>
						<el-form-item label="楼栋号：" :label-width="formLabelWidth" prop="build">
							<el-input v-model="modifyForm.build" autocomplete="off" readonly="" maxlength="4"></el-input>
						</el-form-item>
						<el-form-item label="宿舍号：" :label-width="formLabelWidth" prop="dom">
							<el-input v-model="modifyForm.dom" autocomplete="off" readonly="" maxlength="6"></el-input>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button @click="editdialogFormVisible = false">取 消</el-button>
						<el-button type="primary" @click="handleEditRow('modifyForm')">确 定</el-button>
					</div>
				</el-dialog>
				<!-- 删除对话框 -->
				<el-dialog :visible.sync="delDialogVisible" :close-on-click-modal="false" :close-on-press-escape="false"
					width="500px" center top="0vh" class="my-dialog">
					<div class="box-icon"></div>
					<span class="del-msg">确定删除该水表信息吗？</span>
					<span slot="footer" class="dialog-footer">
						<el-button @click="delDialogVisible = false">取 消</el-button>
						<el-button type="primary" @click="handleDelRow">确 定</el-button>
					</span>
				</el-dialog>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				// fileList: [],
				query_shuibiaoId: '', //  需要查找的水表id
				adddialogFormVisible: false,
				editdialogFormVisible: false, // 控制编辑框的显示隐藏
				delDialogVisible: false, // 控制删除框的显示隐藏
				delRowId: 0, // 删除行的id
				modifyForm: { // 编辑框的数据绑定
					user_id: '',
					build: '',
					dom: '',
					id: 0
				},
				modifyformRules: {
					user_id: [{
							required: true,
							message: '请输入水表ID',
							trigger: 'blur'
						},
						{
							min: 10,
							max: 13,
							message: '长度在 10 到 13 个字符',
							trigger: 'blur'
						}
					],
					build: [{
							required: true,
							message: '请输入楼栋号',
							trigger: 'blur'
						},
						{
							min: 2,
							max: 4,
							message: '长度在 2 到 4 个字符',
							trigger: 'blur'
						}
					],
					dom: [{
							required: true,
							message: '请输入宿舍号',
							trigger: 'blur'
						},
						{
							min: 4,
							max: 6,
							message: '长度在 4 到 6 个字符',
							trigger: 'blur'
						}
					],
					id: [{}]
				},
				addform: { // 添加框的数据绑定
					user_id: '',
					build: '',
					dom: ''
				},
				addformRules: {
					user_id: [{
							required: true,
							message: '请输入水表ID',
							trigger: 'blur'
						},
						{
							min: 10,
							max: 13,
							message: '长度在 10 到 13 个字符',
							trigger: 'blur'
						}
					],
					build: [{
							required: true,
							message: '请输入楼栋号',
							trigger: 'blur'
						},
						{
							min: 2,
							max: 4,
							message: '长度在 2 到 4 个字符',
							trigger: 'blur'
						}
					],
					dom: [{
							required: true,
							message: '请输入宿舍号',
							trigger: 'blur'
						},
						{
							min: 4,
							max: 6,
							message: '长度在 4 到 6 个字符',
							trigger: 'blur'
						}
					]
				},
				formLabelWidth: '120px', //  表单的宽度
				form_select: { // 下拉列表的数据绑定
					builds: [{
						value: 0,
						label: '全部'
					}],
					value: 0,
					label: ''
				},
				tableData: [], // 表格需要显示的数据
				currentPage: 1, // 当前所在页码
				pageRows: 8, // 每页显示的行数
				rows_total: 0, // 总记录数
				// multipleSelection: []  // 多选后，选择的所有行的数据数组
			}
		},
		created() {
			let params = {
				page: this.currentPage,
				rows: this.pageRows
			}
			// 更新表格
			this.updateTable('/jxch-smartmp/HotWaters/waterlist.action', params)
			// 取得楼栋号，填充下拉列表
			this.getBuildsFillSelect()
		},
		methods: {
			/**
			 * 取得楼栋号，填充下拉列表
			 */
			getBuildsFillSelect() {
				// 获取楼栋号，填充下拉列表
				this.getBuilds()
			},
			/**
			 * 导入设备xls文件
			 * @param {Object} param
			 */
			uploadXLS(param) {
				console.log(param);
				let form = new FormData();
				form.append('file', param.file);
				this.$axios({
						method: "post",
						url: "/jxch-smartmp/HotWaters/upload",
						headers: {
							'Content-type': 'multipart/form-data'
						},
						data: form
					})
					.then(res => {
						this.$message.success('【设备导入】成功！')
					})
					.catch(err => {
						this.$message.error('【设备导入】失败1')
					})
			},
			/**
			 * 获取楼栋号，填充下拉列表
			 */
			getBuilds(url) {
				var _this = this
				this.$axios.get('/jxch-smartmp/HotWaters/watergetBuilds.action')
					.then(res => {
						// console.log(res.data);
						if (typeof(res.data.builds) != 'undefined' && res.data.builds != '' && JSON.stringify(res
								.data) != '{}') {
							this.form_select.builds = [{
								value: 0,
								label: '全部'
							}]
							for (var i = 0; i < res.data.builds.length; i++) {
								let tmp = {
									value: i + 1,
									label: res.data.builds[i]
								}
								this.form_select.builds.push(tmp)
							}
						} else {
							_this.$message.success('【楼栋号】暂无数据！');
						}
					})
					.catch(err => {
						// console.log(err);
						_this.$message.error('【楼栋号】请求异常: ' + err);
					})
			},
			/**
			 * 获取数据，填充表格变量
			 */
			updateTable(url, params) {
				var _this = this
				// _this.tableData = []
				// _this.rows_total = 0
				this.$axios.get(url, {
						params: params
					})
					.then(res => {
						// console.log(res.data);
						if (typeof(res.data.rows) != 'undefined' && res.data.rows != '' && JSON.stringify(res.data) !=
							'{}') {
							// _this.$message.success('数据加载成功！');
							_this.tableData = res.data.rows
							_this.rows_total = res.data.total
						} else {
							_this.$message.success('【获取数据】暂无数据！');
						}
					})
					.catch(err => {
						// console.log(err);
						_this.$message.error('【获取数据】请求异常: ' + err);
					})
			},
			/**
			 * 获取下拉列表选择的id，并刷新表格
			 * @param {Object} vId
			 */
			selectGet(vId) {
				// console.log(vId);
				let obj = {};
				obj = this.form_select.builds.find((item) => {
					return item.value === vId; //筛选出匹配数据
				});
				// console.log(obj);
				this.form_select.value = obj.value
				this.form_select.label = obj.label
				var params = {}
				if (this.form_select.value == 0) {
					params = {
						page: this.currentPage,
						rows: this.pageRows
					}
				} else {
					params = {
						build: this.form_select.label,
						page: 1,
						rows: this.pageRows
					}
				}
				// 查询该栋的信息
				this.updateTable('/jxch-smartmp/HotWaters/waterquerylist.action', params)
			},
			/**
			 * 改变页码
			 * @param {Object} val
			 */
			handleCurrentChange(val) {
				this.currentPage = val
				var params = {}
				if (this.form_select.value == 0) {
					params = {
						page: this.currentPage,
						rows: this.pageRows
					}
				} else {
					params = {
						build: this.form_select.label,
						page: this.currentPage,
						rows: this.pageRows
					}
				}
				// 查询该栋的信息
				this.updateTable('/jxch-smartmp/HotWaters/waterquerylist.action', params)
			},
			/**
			 * 导出表格
			 */
			handleDownloadTable() {
				var _this = this
				var params = {}
				if (_this.form_select.label) {
					params = {
						data: {
							build: _this.form_select.label
						}
					}
				} else {
					params = ''
				}
				this.$axios.post('/jxch-smartmp/HotWaters/watertoExcel.action', params)
					.then(res => {
						console.log(res.data.downurl);
						if (typeof(res.data.downurl) != 'undefined' && res.data.downurl != '' && JSON.stringify(res
								.data) != '{}') {
							window.open('https://jtishfw.ncjti.edu.cn/jxch-smartmp' + res.data.downurl)
						} else {
							_this.$message.error('【未获得】表格！');
						}
					})
					.catch(err => {
						// console.log(err);
						_this.$message.error('【导出表格】请求异常: ' + err);
					})
			},
			/**
			 * 显示删除提示框，并获取对应的id
			 * @param {Object} index
			 * @param {Object} row
			 */
			handleDelete(index, row) {
				this.delDialogVisible = true
				// console.log(index, row);
				this.delRowId = row.id
			},
			/**
			 * 删除指定的id所在的行
			 */
			handleDelRow() {
				var _this = this
				this.$axios.get('/jxch-smartmp/HotWaters/waterdelBuild.action', {
						params: {
							id: this.delRowId
						}
					})
					.then(res => {
						// console.log(res.data);
						if (typeof(res.data.msg) != 'undefined' && res.data.msg != '' && res.data.msg == '删除成功' && JSON
							.stringify(res.data) != '{}') {
							_this.$message.success('【数据删除】成功！');
							let params = {
								page: this.currentPage,
								rows: this.pageRows
							}
							this.updateTable('/jxch-smartmp/HotWaters/waterlist.action', params)
							// 取得楼栋号，填充下拉列表
							this.getBuildsFillSelect()
						} else {
							_this.$message.error('【数据删除】失败！');
						}
						this.delDialogVisible = false
					})
					.catch(err => {
						// console.log(err);
						_this.$message.error('【数据删除】请求异常: ' + err);
					})
			},
			/**
			 * 显示添加对话框
			 */
			handleAdd() {
				this.adddialogFormVisible = true
			},
			/**
			 * 显示编辑提示框，并获取对应的id等数据
			 * @param {Object} index
			 * @param {Object} row
			 */
			handleEdit(index, row) {
				// console.log(index, row);
				this.modifyForm.user_id = row.user_id
				this.modifyForm.build = row.build
				this.modifyForm.dom = row.dom
				this.modifyForm.id = row.id
				this.editdialogFormVisible = true
			},
			/**
			 * 添加一条水表信息
			 */
			handleAddRow(formName) {
				var _this = this
				_this.$refs[formName].validate((valid) => {
					if (valid) {
						if (!String(_this.addform.user_id).trim()) {
							_this.$message.error('请输入水表ID')
							return
						}
						if (!String(_this.addform.build).trim()) {
							_this.$message.error('请输入楼栋号')
							return
						}
						if (!String(_this.addform.dom).trim()) {
							_this.$message.error('请输入宿舍号')
							return
						}
						_this.$axios.get('/jxch-smartmp/HotWaters/wateraddBuild.action', {
								params: {
									user_id: String(_this.addform.user_id).trim(),
									dom: String(_this.addform.dom).trim(),
									build: String(_this.addform.build).trim()
								}
							})
							.then(res => {
								// console.log(res.data);
								if (typeof(res.data.msg) != 'undefined' && res.data.msg != '' && res.data
									.msg == '添加成功' && JSON
									.stringify(res.data) != '{}') {
									_this.$message.success('【数据添加】成功！');

									_this.addform.user_id = ''
									_this.addform.dom = ''
									_this.addform.build = ''

									let params = {
										page: _this.currentPage,
										rows: _this.pageRows
									}
									_this.updateTable('/HotWaters/waterlist.action', params)
									// 取得楼栋号，填充下拉列表
									_this.getBuildsFillSelect()
								} else {
									_this.$message.error('【数据添加】失败！');
								}
								_this.adddialogFormVisible = false
							})
							.catch(err => {
								// console.log(err);
								_this.$message.error('【数据添加】请求异常: ' + err);
							})
					} else {
						// _this.$message.error('表单验证失败！')
						return false;
					}
				});
			},
			/**
			 * 更新指定的id所在的行
			 */
			handleEditRow(formName) {
				var _this = this
				_this.$refs[formName].validate((valid) => {
					if (valid) {
						if (!String(_this.modifyForm.user_id).trim()) {
							_this.$message.error('请输入水表ID')
							return
						}
						if (!String(_this.modifyForm.build).trim()) {
							_this.$message.error('请输入楼栋号')
							return
						}
						if (!String(_this.modifyForm.dom).trim()) {
							_this.$message.error('请输入宿舍号')
							return
						}
						
						_this.$axios.get('/jxch-smartmp/HotWaters/waterupdateBuild.action', {
								params: {
									id: _this.modifyForm.id,
									user_id: String(_this.modifyForm.user_id).trim(),
									dom: String(_this.modifyForm.dom).trim(),
									build: String(_this.modifyForm.build).trim()
								}
							})
							.then(res => {
								// console.log(res.data);
								if (typeof(res.data.msg) != 'undefined' && res.data.msg != '' && res.data
									.msg == '修改成功' && JSON
									.stringify(res.data) != '{}') {
									_this.$message.success('【数据修改】成功！');
									let params = {
										page: _this.currentPage,
										rows: _this.pageRows
									}
									_this.updateTable('/jxch-smartmp/HotWaters/waterlist.action', params)
									// 取得楼栋号，填充下拉列表
									_this.getBuildsFillSelect()
								} else {
									_this.$message.error('【数据修改】失败！');
								}
								_this.editdialogFormVisible = false
							})
							.catch(err => {
								// console.log(err);
								_this.$message.error('【数据修改】请求异常: ' + err);
							})
					} else {
						// _this.$message.error('表单验证失败！')
						return false;
					}
				});
			},
			/**
			 * 更新输入框
			 * @param {Object} e
			 */
			idInputChange(e) {
				// console.log(e);
				this.$forceUpdate()
			},
			/**
			 * 根据设备id查找
			 */
			searchBtnSubmit() {
				// console.log(this.query_shuibiaoId);
				this.currentPage = 1

				var params = {}
				if (String(this.query_shuibiaoId).trim()) {
					// 查询指定水表id的信息
					if (this.form_select.value == 0) {
						params = {
							user_id: this.query_shuibiaoId,
							page: this.currentPage,
							rows: this.pageRows
						}
					} else {
						// 查询指定水表id + 楼栋的信息
						params = {
							user_id: this.query_shuibiaoId,
							build: this.form_select.label,
							page: 1,
							rows: this.pageRows
						}
					}
					this.updateTable('/jxch-smartmp/HotWaters/waterquerylist.action', params)
					this.$message.success('水表id包含：' + this.query_shuibiaoId + ' 查询完成！')
				} else {
					if (this.form_select.value == 0) {
						params = {
							page: 1,
							rows: this.pageRows
						}
						this.updateTable('/HotWaters/waterquerylist.action', params)
					} else {
						params = {
							build: this.form_select.label,
							page: 1,
							rows: this.pageRows
						}
						this.updateTable('/jxch-smartmp/HotWaters/waterquerylist.action', params)
					}
					// this.$message.error('请输入水表id 或 选择 楼栋号')
				}
			},
			/**
			 * 多选数组的获取
			 * @param {Object} val
			 */
			handleSelectionChange(val) {
				// console.log(val);
				// this.multipleSelection = val;
			}
		}
	}
</script>

<style scoped>
	@import url("DevMgr.css");
</style>
