<template>
<div class="app-container">
	<el-form
		:model="queryParams"
		ref="queryForm"
		size="small"
		:inline="true"
		v-show="showSearch"
		label-width="68px"
		class="newform"
	>
		<el-form-item label="设备" prop="equipmentName" class="newitem">
			<el-input
				placeholder="请输入设备名称"
				v-model="queryParams.equipmentName"
				clearable>
			</el-input>
		</el-form-item>	
		<el-form-item>
		<el-button
			type="primary"
			icon="el-icon-search"
			size="mini"
			@click="toSearch"
			 style="height:35px;margin-left: 20px;"
			>搜索</el-button>
			<el-button
				type="success"
				plain
				icon="el-icon-edit"
				size="mini"
				 style="height:35px;margin-left: 20px; margin-top: 20px;"
				@click="addEqupment()"
			>新增设备</el-button>
		</el-form-item>
    </el-form>
    <el-row :gutter="10" class="threestyle">
		<el-col :span="1.5">
		<div></div>
		</el-col>
		<right-toolbar
			:showSearch.sync="showSearch"
			@queryTable="allData">
		</right-toolbar>
    </el-row>
    <el-table :data="dmList"  height="535">
		<el-table-column label="序号" align="center" prop="id" width="60" type="index"/>
		<el-table-column label="设备编号" align="center" prop="equipmentNo" />
		<el-table-column label="设备名称" align="center" prop="equipmentName" />
		<el-table-column label="设备类型" align="center" prop="equipmentType" />
		<el-table-column label="水表级别" align="center" prop="level" />
		<el-table-column label="精度等级" align="center" prop="accuracy" />
		<el-table-column label="单位" align="center" prop="equipmentUnit" />
		<el-table-column label="安装日期" align="center" prop="installDate" />
		<el-table-column label="校验时间" align="center" prop="timecheck" />
		</el-table-column>
		<el-table-column label="操作" fixed="right" width="180">
			<template slot-scope="scope">
				<el-button
					size="mini"
					type="primary"
					icon="el-icon-edit"
					@click="typeEdit($event, scope.$index, scope.row)"
					>编辑</el-button
				>
				<el-button
					size="mini"
					type="danger"
					icon="el-icon-delete"
					@click="typeDelete(scope.row)"
					>删除</el-button
				>
			</template>
		</el-table-column>
	</el-table>
   <el-pagination
		style="margin-top: 20px;"
		:page-sizes="[10, 20, 30, 40]"
		layout="total, sizes, prev, pager, next, jumper"
		:total="total"
		@size-change="handleSizeChange"
		@current-change="handleCurrentChange"
		@pagination="allData"
    />
	<!-- 添加对话框 -->
	<el-dialog :title="title" :visible.sync="open" append-to-body >
	  <el-form ref="form" :model="form" :rules="rules" label-width="80px" style="width:100%;height: 100%;display: flex;">
	    <div style="width:50%;height: 100%; display: flex;flex-direction: column;justify-content: center;align-items: center;">
				<el-form-item label="设备名称" prop="equipmentName">
					<el-input v-model="form.equipmentName" placeholder="请输入设备名称" />
				</el-form-item>
				<el-form-item label="数值单位" prop="equipmentUnit">
					<el-input v-model="form.equipmentUnit" placeholder="请输入数值单位" />
				</el-form-item>
				<el-form-item label="精度等级" prop="accuracy">
					<el-select v-model="form.accuracy" clearable placeholder="请选择精度等级"  >
						<el-option
							v-for="item in waterList"
							:label="item.name"
							:value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="安装日期" prop="installDate" style="margin-left:13px;">
					 <el-date-picker
					  v-model="form.installDate"
					  type="date"
					  placeholder="选择安装日期"
					  value-format="yyyy-MM-dd HH:mm:ss"
					  >
					</el-date-picker>
				</el-form-item>
				
	</div>
	
	<div style="width:50%;height: 100%; display: flex;flex-direction: column;justify-content: center;align-items: center;">
		<el-form-item label="设备编号" prop="equipmentNo">
			<el-input v-model="form.equipmentNo" placeholder="请输入设备编号"  />
		</el-form-item>
		<el-form-item label="设备类型" prop="equipmentType" style="margin-left:10px;" >
		<el-select v-model="form.equipmentType" clearable placeholder="请选择设备类型"  >
			<el-option
				v-for="item in equTypeList"
				:label="item.name"
				:value="item.value">
			</el-option>
		</el-select>
		</el-form-item>	
		<el-form-item label="水表级别" prop="level" style="margin-left:10px;" >
		<el-select v-model="form.level" clearable placeholder="请选择水表级别"  >
			<el-option
				v-for="item in levelList"
				:label="item.name"
				:value="item.value">
			</el-option>
		</el-select>
		</el-form-item>	
		<el-form-item label="校验时间" prop="timecheck" style="margin-left:13px;">
			 <el-date-picker
			  v-model="form.timecheck"
			  type="date"
			  placeholder="选择校验时间"
			  value-format="yyyy-MM-dd HH:mm:ss"
			  >
			</el-date-picker>
		</el-form-item>
		</div>
	  </el-form>
	  <div slot="footer" class="dialog-footer">
	    <el-button type="primary" @click="submitForm">确 定</el-button>
	  </div>
	</el-dialog>
	<!-- 编辑 -->
	<el-dialog :title="title" :visible.sync="openTwo" append-to-body >
	  <el-form ref="form" :model="form" :rules="rules" label-width="80px" style="width:100%;height: 100%;display: flex;">
	    <div style="width:50%;height: 100%; display: flex;flex-direction: column;justify-content: center;align-items: center;">
			<el-form-item label="设备名称" prop="equipmentName">
			  <el-input v-model="form.equipmentName" placeholder="请输入设备名称" />
			</el-form-item>
		
			<el-form-item label="数值单位" prop="equipmentUnit">
			  <el-input v-model="form.equipmentUnit" placeholder="请输入数值单位"/>
			</el-form-item>
			<el-form-item label="精度等级" prop="accuracy">
				<el-select v-model="form.accuracy" clearable placeholder="请选择精度等级"  >
					<el-option
						v-for="item in waterList"
						:label="item.name"
						:value="item.value">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="安装日期" prop="installDate" style="margin-left:13px;">
				 <el-date-picker
				  v-model="form.installDate"
				  type="date"
				  placeholder="选择安装日期">
				</el-date-picker>
			</el-form-item>
		</div>
		<div style="width:50%;height: 100%; display: flex;flex-direction: column;justify-content: center;align-items: center;">
			<el-form-item label="设备编号" prop="equipmentNo">
			  <el-input v-model="form.equipmentNo" placeholder="请输入设备编号" />
			</el-form-item>
			<el-form-item label="设备类型" prop="equipmentType" style="margin-left:10px;">
			 <el-select v-model="form.equipmentType" clearable placeholder="请选择设备类型">
			   <el-option
				 v-for="item in equTypeList"
				 :label="item.name"
				 :value="item.value">
			   </el-option>
			 </el-select>
			</el-form-item>
			<el-form-item label="水表级别" prop="level" style="margin-left:10px;" >
			<el-select v-model="form.level" clearable placeholder="请选择水表级别"  >
				<el-option
					v-for="item in levelList"
					:label="item.name"
					:value="item.value">
				</el-option>
			</el-select>
			</el-form-item>	
			<el-form-item label="校验时间" prop="timecheck" style="margin-left:13px;">
				 <el-date-picker
				  v-model="form.timecheck"
				  type="date"
				  placeholder="选择校验时间"
				  >
				</el-date-picker>
			</el-form-item>
		</div>
	  </el-form>
	  <div slot="footer" class="dialog-footer">
	    <el-button type="primary" @click="submitedit">确 定</el-button>
	  </div>
	</el-dialog>
  </div>
</template>

<script>
import { tableList,getList,addEqu,editEqu,deleteEqu} from "@/api/historyData/device";
import { parseTime } from "../../utils/index.js";
export default {
  data() {
    return {
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      dmList: [],
	  selectList:[],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
	  openTwo:false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        equipmentName: null,
      },
	  searchTime:"",
	    // 表单参数
	    form: {},
	    // 表单校验
	    rules: {
			equipmentNo: [{ required: true, message: "设备编号不能为空", trigger: "blur" }],
			equipmentName: [{ required: true, message: "设备名称不能为空", trigger: "blur" }],
			equipmentUnit: [{ required: true, message: "设备名称不能为空", trigger: "blur" }],
			accuracy: [{ required: true, message: "精度等级不能为空", trigger: "blur" }],
			equipmentType: [{ required: true, message: "设备类型不能为空", trigger: "change" }],
			level: [{ required: true, message: "水表级别不能为空", trigger: "change" }],
			installDate: [{ required: true, message: "安装日期不能为空", trigger: "change" }],
			timecheck: [{ required: true, message: "安装日期不能为空", trigger: "change" }],
	    },
	    equTypeList: [
	      {
			name:"超声波水表",
			value:"1",
	      },
	      {
			name:"电表",
			value:"2",
	      },
	      {
			name:"泵房水位",
			value:"3",
	      },
	    ],
		levelList:[
			{
				name:"一级水表",
				value:"1",
			},
			{
				name:"二级水表",
				value:"2",
			},
			{
				name:"三级水表",
				value:"3",
			},
			{
				name:"水位表",
				value:"4",
			},
			
		],
		waterList:[
			{
				name:"一级",
				value:"1",
			},
			{
				name:"二级",
				value:"2",
			},
		]
    };
  },
  mounted(){ 
		this.allData();
  },
  methods: {
	  allData() {
	  	var param ={
			pageNum:this.queryParams.pageNum,
			pageSize: this.queryParams.pageSize
		}
		console.log(param)
	  	tableList(param).then((res) => {
	  	   var body = res.rows || [];
		   this.dmList = body;
		   this.total = res.total;
	  	});
	  },
	  //获取全部信息管理分页
	  handleSizeChange(val) {
	  // 每页多少条
		this.queryParams.pageSize =val;
		this.allData()
	  },
	  handleCurrentChange(val) {
	  // 当前是多少页
		this.queryParams.pageNum = val;
		this.allData()
	  },
	  toSearch() {
		var param = this.queryParams;
			if (this.searchTime instanceof Array) {
			  param.startTime = parseTime(new Date(this.searchTime[0]));
			  param.endTime = parseTime(new Date(this.searchTime[1]));
			}
		tableList(param).then((res) => {
			var body = res.rows || [];
			this.dmList = body;
			this.total = res.total;
		});
	},
	
	// 新增
	addEqupment(){
	  this.open = true;
	  this.title = "新增设备";
	  this.form = {};
	},
	submitForm() {
		this.$refs.form.validate((valid) => {
			if (valid) {
				var self = this;
				var param = this.form;
				addEqu(param).then((res) =>{
					if(res.code === 200){
						this.open = false;
						this.allData();
						self.$message({
						  type: "success",
						  message: "新增成功",
						});
					}else{
						self.$message.error("新增失败");
					}
				});
			}
		}) 
	},
	// 修改
	typeEdit(e, index, item){
	  this.openTwo = true;
	  this.title = "修改设备";
	  this.form = Object.assign({}, item);
	},
	submitedit() {
		this.$refs.form.validate((valid) => {
			if (valid) {
				var self = this;
				var param = this.form;
				editEqu(param).then((res) => {
					if(res.code === 200){
						this.openTwo = false;
						this.allData();
						self.$message({
						  type: "success",
						  message: "编辑成功",
						});
					}else{
						self.$message.error("编辑失败");
					}
				});
			}
		}) 
	},
	// 删除
	typeDelete(item){
		var id = item.id;
		this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
			confirmButtonText: "确定",
			type: "warning",
		}).then(() => {
	    deleteEqu({id:id}).then((res) => {
			this.allData()
			if(res.code===200){
				this.$message({
					message: "删除成功",
					type: "success",
				});  
			}
		},
		() => {
			this.$message.error("删除失败");
		});
	  });
	},
  } 
};
</script>
<style rel="stylesheet/scss" lang="scss" scope>
	.newform{
		width: 1680px;
		height: 75px;
		background-color: #fff;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.newitem{
		margin-bottom: 0px!important;
	}
	.threestyle{
		margin-top: 15px;
		margin-bottom: 15px;
	}
  .el-table--scrollable-y .el-table__body-wrappe{
    overflow-y: scroll!important;
  }
</style>
