<template>
	<div>
		<el-row>
			<el-col :span="24" class="first-row">
				<div class="tag">设备管理</div>
				<span class="right-btn">
					<el-button type="primary" size="small">表格导入</el-button>
					<el-link type="primary">模板下载</el-link>
				</span>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24" class="second-row">
				<el-form :inline="true" :model="form_select" class="demo-form-inline">
					<el-form-item label="水表ID:" class="shuibiaoId">
						<el-input placeholder="请输入水表ID"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="onSubmit">查找</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">添加</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="80">
						<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" :total="rows_total"></el-pagination>
					</div>
					<div class="export-table">
						<el-button type="primary" size="small" @click="toggleSelection">表格导出</el-button>
					</div>
				</div>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24" class="forth-row">
				<!-- 编辑对话框 -->
				<el-dialog title="编辑" :visible.sync="editdialogFormVisible" width="500px" top="0vh" class="my-dialog">
					<hr
						style="width: 100%; position: absolute; top: 60px; left: 0px;background-color: #CCCCCC;height: 1px;border: 0;">
					<el-form :model="form">
						<el-form-item label="水表ID：" :label-width="formLabelWidth">
							<el-input v-model="form.user_id" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="楼栋号：" :label-width="formLabelWidth">
							<el-input v-model="form.build" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="宿舍号：" :label-width="formLabelWidth">
							<el-input v-model="form.dom" autocomplete="off"></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="editdialogFormVisible = false">确 定</el-button>
					</div>
				</el-dialog>
				<!-- 删除对话框 -->
				<el-dialog :visible.sync="delDialogVisible" 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="delDialogVisible = false">确 定</el-button>
					</span>
				</el-dialog>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				editdialogFormVisible: false,
				delDialogVisible: false,
				form: {
					id: 'KB580002652',
					drom: '18',
					room: '118'
				},
				formLabelWidth: '120px',
				form_select: {
					builds: [{
						value: 0,
						label: '全部'
					}],
					value: 0
				},
				tableData: [],
				rows_total: 100,
				multipleSelection: []
			}
		},
		created() {
			this.getTableData()
		},
		methods: {
			/**
			 * 获取下拉列表选择的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.$axios.get('/api/HotWaters/waterlist.action?page=1&rows=8')
					.then(res => {
						// console.log(res.data);
						this.$message.success('获取数据成功！');
						this.tableData = res.data.rows
						this.rows_total = res.data.total
						this.form_select.builds = [{
							value: 0,
							label: '全部'
						}]
						for (var i = 0; i < res.data.rows.length; i++) {
							this.form_select.builds.push({
								value: res.data.rows[i].id,
								label: res.data.rows[i].build
							})
						}
					})
					.catch(err => {
						console.log(err);
						this.$message.error('请求异常');
					})
			},
			/**
			 * 获取数据，填充表格变量
			 */
			getTableData() {
				let param = {
					page: 1,
					rows: 8
				}
				this.$axios.get('/api/HotWaters/waterlist.action?page=1&rows=8')
					.then(res => {
						// console.log(res.data);
						this.$message.success('获取数据成功！');
						this.tableData = res.data.rows
						this.rows_total = res.data.total
						this.form_select.builds = [{
							value: 0,
							label: '全部'
						}]
						for (var i = 0; i < res.data.rows.length; i++) {
							this.form_select.builds.push({
								value: res.data.rows[i].id,
								label: res.data.rows[i].build
							})
						}
					})
					.catch(err => {
						console.log(err);
						this.$message.error('请求异常');
					})
			},
			onSubmit() {
				console.log('submit!');
			},
			handleOpen(key, keyPath) {
				console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
				console.log(key, keyPath);
			},
			toggleSelection() {
				console.log();
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			handleEdit(index, row) {
				this.editdialogFormVisible = true
				console.log(index, row);
			},
			handleDelete(index, row) {
				this.delDialogVisible = true
				console.log(index, row);
			}
		}
	}
</script>

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