<template>
	<div class="app-container">
		<div class="box-card">
			<div class="top-title">
				<span class="line"></span >
				<span class="title-text">设备管理</span>
			</div>
			<el-form
				:model="queryParams"
				ref="queryForm"
				size="small"
				:inline="true"
				label-width="80px"
				class="searchform"
			>
				<el-form-item label="设备名称:" prop="equipmentName">
					<el-select
					  v-model="queryParams.equipmentName"
					  clearable
					  placeholder="请选择设备"
					>
					  <el-option
					    v-for="item in selectList"
					    :key="item.value"
					    :label="item.name"
					    :value="item.value"
					  >
					  </el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="时间:" prop="time">
					<el-date-picker
						:default-time="['00:00:00', '23:59:59']"
						style="width: 350px !important;"
						v-model="queryParams.time"
						type="datetimerange"
						range-separator="至"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
						clearable
						value-format="yyyy-MM-dd HH:mm:ss"
					/>
				</el-form-item>
				<el-form-item>
					<el-button
						type="primary"
						icon="el-icon-search"
						@click="toSearch"
					>搜索</el-button>
					<el-button
						type="success"
						plain
						icon="el-icon-edit"
						@click="addEqupment('add')"
					>添加设备</el-button>
					<el-button
						type="info"
						icon="el-icon-setting"
						@click="resetTable"
						style="margin-left: 20px;"
					>重置</el-button>
				</el-form-item>
			</el-form>

			<el-table :data="dmList"  height="535">
				<el-table-column label="序号" align="center"  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="monitoringPoint" />
				<el-table-column label="监测类别" align="center" prop="monitoringType" />
				<el-table-column label="预警阈值" align="center" prop="alarmValue" />
				<el-table-column label="安装日期" align="center" prop="installDate" />
				<el-table-column label="生产厂家" align="center" prop="manufacturer" />
				<el-table-column label="操作" align="center" width="180">
					<template slot-scope="scope">
						<el-button
							size="mini"
							type="primary"
							icon="el-icon-edit"
							@click.native.prevent="addEqupment('eidt', 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="padding:10px 1px 10px 0px;margin-left: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 class="tableline">
						<el-form-item label="设备名称" prop="equipmentName">
							<el-input v-model="form.equipmentName" placeholder="请输入设备名称" :disabled="disabled"/>
						</el-form-item>
						<el-form-item label="监测点位" prop="monitoringPoint">
							<el-input v-model="form.monitoringPoint" placeholder="请输入监测点位" />
						</el-form-item>
						<el-form-item label="监测项目" prop="equipmentType">
								<el-input v-model="form.equipmentType" placeholder="请输入监测项目" />
						</el-form-item>
						<el-form-item label="安装日期" prop="installDate" style="margin-left:5px;">
							<el-date-picker
								style="width: 200px !important;"
								v-model="form.installDate"
								type="datetime"
								clearable
								value-format="yyyy-MM-dd HH:mm:ss"
								placeholder="选择日期时间"
								>
							</el-date-picker>
						</el-form-item>
					</div>
					<div class="tableline">
						<el-form-item label="设备编号" prop="equipmentNo">
							<el-input v-model="form.equipmentNo" placeholder="请输入设备编号"  />
						</el-form-item>
						<el-form-item label="监测类别" prop="monitoringType">
							<el-input v-model="form.monitoringType" placeholder="请输入监测类别"  />
						</el-form-item>
						<el-form-item label="预警阈值" prop="alarmValue">
							<el-input v-model="form.alarmValue" placeholder="请输入预警阈值"  />
						</el-form-item>
						<el-form-item label="生产厂家" prop="manufacturer">
							<el-input v-model="form.manufacturer" placeholder="请输入生产厂家" />
						</el-form-item>
					</div>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button type="primary" @click="submitForm">确 定</el-button>
				</div>
			</el-dialog>

		</div>
	</div>
</template>

<script>
import { tableList,addEqu,editEqu,deleteEqu,Equselect} from "@/api/historyData/device";
import { parseTime } from "../utils/index.js";
export default {
  data() {
    return {
      // 总条数
      total: 0,
      dmList: [],
	  selectList:[],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        equipmentName: null,
		time:null
      },
	  commonType:'',
	  searchTime:"",
	    // 表单参数
	    form: {},
	    // 表单校验
	    rules: {
			equipmentNo: [{ required: true, message: "设备编号不能为空", trigger: "blur" }],
			equipmentName: [{ required: true, message: "设备名称不能为空", trigger: "blur" }],
			monitoringPoint: [{ required: true, message: "监测点位不能为空", trigger: "blur" }],
			alarmValue: [{ required: true, message: "预警阈值不能为空", trigger: "blur" }],
			equipmentType: [{ required: true, message: "监测项目不能为空", trigger: "blur" }],
			manufacturer: [{ required: true, message: "生产厂家不能为空", trigger: "blur" }],
			installDate: [{ required: true, message: "安装日期不能为空", trigger: "change" }],
			monitoringType:[{ required: true, message: "监测类别不能为空", trigger: "blur" }]
	    },
		disabled:false
    };
  },
  mounted(){
		this.allData();
		this.select();
    this.$watermark.set(" ",this.$refs.content)
    },
    beforeDestroy() {
      this.$watermark.set("",this.$refs.content);
    },
  methods: {
	  //设备下拉
		select(){
			Equselect().then((res) => {
				var body = res.data||[];
				this.selectList = body;
			});
		},
		allData() {
			var param ={
				pageNum:this.queryParams.pageNum,
				pageSize: this.queryParams.pageSize
			}
	  	tableList(param).then((res) => {
			var body = res.rows || [];
			this.dmList = body;
			this.total = res.total;
	  	});
	  },
	  handleSizeChange(val) {
		this.queryParams.pageSize =val;
		this.toSearch()
	  },
	  handleCurrentChange(val) {
		this.queryParams.pageNum = val;
		this.toSearch()
	  },
	toSearch() {
		var param = this.queryParams;
		if (this.queryParams.time instanceof Array) {
			param.startTime = parseTime(new Date(this.queryParams.time[0]));
			param.endTime = parseTime(new Date(this.queryParams.time[1]));
		}

		tableList(param).then((res) => {
			var body = res.rows || [];
			this.dmList = body;
			this.total = res.total;
		});
	},
	resetTable(){
			this.queryParams={};
			this.allData()
	},
	// 新增
	addEqupment(type,item){
		this.commonType = type;
		if(type === 'add'){
			this.open = true;
			this.title = '新增设备'
			this.form = {};
		}else{
			this.open = true;
			this.title = "修改设备";
			this.form = Object.assign({}, item);
			this.disabled = true;
		}
	},
	submitForm() {
		if(this.commonType === 'add'){
			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();
							this.select();
							self.$message({
							  type: "success",
							  message: "新增成功",
							});
						}else{
							self.$message.error("新增失败");
						}
					});
				}
			})
		}else{
			this.$refs.form.validate((valid) => {
				if (valid) {
					var self = this;
					var param = this.form;
					editEqu(param).then((res) => {
						if(res.code === 200){
							this.open = 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>
	.box-card {
	  width: 100%;
	  background-color: #fff;
	  .top-title {
		width: 100%;
		height: 50px;
		display: flex;
		justify-content: flex-start;
		align-items:center;
		padding-left: 20px;
	    .line {
	      width: 6px;
	      height: 22px;
	      background: #0d85f4;
	    }
		.title-text{
			font-size: 18px;
			font-weight:bold;
			color: #333333;
			line-height: 30px;
			padding-left: 10px;
		}
	  }
	}
	.searchform{
		width: 100%;
		height: 75px;
		background-color: #fff;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding-left: 30px;
		.el-form-item{
			margin-bottom: 0px!important;
		}
	}
	.resetting{
		margin:20px 20px 20px 0px;
	}
	.el-table--scrollable-y .el-table__body-wrappe{
		overflow-y: scroll!important;
	}
	.tableline{
		width:50%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
</style>
