<!-- 测报灯短信预警 -->
<template>
  <div class=''>
    <div class="equipId">设备ID：{{equipId}}</div>
	<div class="innerBox">
		<!-- 1 -->
		<div class="category">
			<div class="wormItem">
				<div class="title">
					<h2>害虫种类数预警</h2>
					<el-switch
						v-model="switch1"
						active-color="#13ce66"
						inactive-color="#dcdfe6"
						@change="switch1Fun"
					></el-switch>
				</div>
				<div class="hint">
					每天害虫
					<span>种类数量</span>达到此值时，短信预警
				</div>
				<div class="limitValBox">
					<div>
						<el-input
							v-model="input1"
							type="number"
							ref="input"
							placeholder="请填写害虫数量"
							clearable
							@change="input1ChangeFun"
						></el-input>
					</div>
					
				</div>
			</div>
		</div>
		<!-- 2 -->
		<div class="category second">
			<div class="title">
				<h2>指定害虫数量预警</h2>
				<el-switch
					v-model="switch2"
					active-color="#13ce66"
					inactive-color="#dcdfe6"
					@change="switch2Fun"
				></el-switch>
			</div>
			<div class="hint">
				<div>
					每天<span>指定害虫数</span>达到此数量时，短信预警
				</div>
				<div class="addworm">
					<i class="el-icon-circle-plus-outline" @click="addWormKind"></i>
				</div>
			</div>
			<div class="wormItem">
				<div class="limitValBox">
					<div class="limitWormItem">
						<div class="limitWormItemBox" v-for="(item,index) in planKind" :key="index">
							<el-select v-model="item.value" placeholder="请选择害虫种类">
								<el-option v-for="num in cbdPestNum" :key="num" :label="cbdPest[num]" :value="num"></el-option>
							</el-select>
							<el-input
								v-model="item.nums"
								type="number"
								placeholder="请填写害虫数量"
								clearable
								@change="wormNumFun2"
							></el-input>
							<i v-if="index!=0" class="el-icon-delete" @click="delWormKind(index)"></i>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 3 -->
		<div class="category">
			<div class="title">
				<h2>害虫数量总和预警</h2>
				<el-switch
					v-model="switch3"
					active-color="#13ce66"
					inactive-color="#dcdfe6"
					@change="switch3Fun"
				></el-switch>
			</div>
			<div class="hint">
				每天害虫
				<span>种类数量</span>达到此值时，短信预警
			</div>
			<div class="wormItem">
				<div class="limitValBox">
					<div>
						<el-input
							v-model="input3"
							type="number"
							ref="input3"
							placeholder="请填写害虫数量"
							clearable
							@change="input3ChangeFun"
						></el-input>
					</div>
				</div>
			</div>
		</div>
		<!-- 4 -->
		<div class="category">
			<div class="title">
				<h2>综合预警</h2>
				<el-switch v-model="switch4" active-color="#13ce66" inactive-color="#dcdfe6"></el-switch>
			</div>
			<div class="hint">监测每天出现的害虫种类及数量，短信预警</div>
			<div class="wormItem">
			</div>
		</div>
		<!-- 5 -->
		<div class="category">
			<div class="title">
				<h2>信息接收</h2>
			</div>
			<div class="wormItem">
				<div class="limitValBox">
					<div class="receptionPhone">
						<el-input
							v-model="input5"
							ref="tel"
							type="tel"
							placeholder="请填写信息接收手机号"
							clearable
							@change="telRegular"
						></el-input>
					</div>
				</div>
			</div>
		</div>
		<div class="subBtn">
			<el-button type="blueInfo" @click="submitData()">提交</el-button>
			<el-button type="grayInfo">重置</el-button>
		</div>
	</div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import dict from '../../../../../static/js/cbd_pest_library.js'

export default {
props: ["equipId", "equipType","d_id"],
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {
  	switch1: false,
	input1: '',
	// 2
	switch2: false,
	input2: false,
	cbdPest: dict,
	cbdPestNum: 332,
	planKind: [
		{
			label: '',
			value: '',
			nums: 0
		},

	],
	// 3
	switch3: false,
	input3: '',
	// 4
	switch4: false,
	// 5
	input5: '',

	value: true,
	input: '',
};
},
//监听属性 类似于data概念
computed: {
	// 计算属性的 getter
	reversedMessage: function () {
		// `this` 指向 vm 实例
		var planKind = this.planKind
		var len = this.planKind.length
		for (var i = 0; i < len; i++) {
			if (!(planKind[i].value && planKind[i].nums != 0)) {
				return false
			}
			if (i == len - 1) {
				return true
			}
		}
	}
},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
	// 提交数据
	submitData() {
		let that = this
		var pestCategory = that.switch1 == true ? 'on' : 'off' //目标种类预警  pestCategory
		var appointPest = that.switch2 == true ? 'on' : 'off' //指定害虫数量预警 appointPest
		var pestTotal = that.switch3 == true ? 'on' : 'off' //害虫数量总和预警 pestTotal
		var pestWarn = that.switch4 == true ? 'on' : 'off' //综合预警 pestWarn
		console.log(that.planKind)
		var plantName = []
		var plantNums = []
		var plantObj = {}
		for (var i = 0; i < that.planKind.length; i++) {
			plantName.push(that.planKind[i].value)
			plantNums.push(that.planKind[i].nums)
			plantObj['appointPestNum' + (i + 1)] = that.planKind[i].nums
			plantObj['appointPestName' + (i + 1)] = that.planKind[i].value
		}
		plantObj['pestCategoryNum'] = that.input1 //目标种类预警
		plantObj['pestTotalNum'] = that.input3 //害虫数量总和预警
		plantObj['phone'] = that.input5 //信息接收
		plantObj['appointPestName'] = plantName.join('#') //指定害虫数量预警
		plantObj['appointPestNum'] = plantNums.join('#') //指定害虫数量预警
		plantObj['pestCategory'] = pestCategory
		plantObj['appointPest'] = appointPest
		plantObj['pestTotal'] = pestTotal
		plantObj['pestWarn'] = pestWarn

		let postData = that.qs.stringify({
			device_id: that.equipId,
			conf: JSON.stringify(plantObj)
		})

		that
			.$axios({
				method: 'post',
				url: '/api/api_gateway?method=forecast.forecast_system.cbd_msg_conf',
				data: postData
			})
			.then((res) => {
				if (res.data.data == true && res.data.message == '') {
					that.$message({
						showClose: true,
						message: '设置成功',
						type: 'success',
						duration: 1500
					})
				} else {
					that.$message({
						showClose: true,
						message: '设置失败',
						type: 'error',
						duration: 1500
					})
				}
			})
			.catch((err) => {
				console.log(err)
			})
	},

	// 请求数据返显
	warningData() {
		let that = this
		let postData = that.qs.stringify({
			device_id: that.$route.params.id,
			conf: ''
		})
		that
			.$axios({
				method: 'post',
				url: '/api/api_gateway?method=forecast.forecast_system.cbd_msg_conf',
				data: postData
			})
			.then((res) => {
				if (res.data.data !== null || res.data.data !== '') {
					var redata = JSON.parse(res.data.data)
					that.input1 = redata.pestCategoryNum //目标种类预警
					that.input2 = redata.appointPestNum1 //指定害虫数量预警
					that.input3 = redata.pestTotalNum //害虫数量总和预警
					that.input5 = redata.phone //信息接收

					that.planKind[0].nums = redata.appointPestNum1 //数量预警害虫数量
					that.planKind[0].value = redata.appointPestName1 //数量预警害虫

					that.switch1 = redata.pestCategory == 'on' ? true : false //目标种类预警
					that.switch2 = redata.appointPest == 'on' ? true : false //指定害虫数量预警
					that.switch3 = redata.pestTotal == 'on' ? true : false //害虫数量总和预警
					that.switch4 = redata.pestWarn == 'on' ? true : false //综合预警

					var val = redata.appointPestName
					var nums = redata.appointPestNum
					var arr = val.split('#')
					var arrA = nums.split('#')
					that.planKind = []
					for (let i = 0; i < arr.length; i++) {
						var obj = {}
						obj['value'] = parseInt(arr[i])
						obj['nums'] = arrA[i]
						obj['label'] = ''
						that.planKind.push(obj)
					}
				}
			})
			.catch((err) => {
				console.log(err)
			})
	},

	switch1Fun() {
		console.log(this.switch1)
		if (this.switch1 && !this.input1) {
			this.$message({
				message: '请将数据填写完整，再进行操作',
				type: 'warning'
			})
			this.$refs.input.focus()
			this.switch1 = false
		}
	},
	input1ChangeFun() {
		if (!this.input1) {
			this.switch1 = false
		}
	},
	// 2
	addWormKind() {
		var planKind = this.planKind
		var len = this.planKind.length
		for (var i = 0; i < len; i++) {
			if (!(planKind[i].value && planKind[i].nums != 0)) {
				this.$message({
					message: '请将数据填写完整，再进行添加',
					type: 'warning'
				})
				return false
			}
			if (i == len - 1) {
				planKind.push({
					label: '',
					value: '',
					nums: 0
				})
			}
		}
	},
	delWormKind(index) {
		var planKind = this.planKind
		planKind.splice(index, 1)
	},
	switch2Fun() {
		if (!this.reversedMessage) {
			this.$message({
				message: '请将数据填写完整，再进行操作',
				type: 'warning'
			})
			this.switch2 = false
		}
	},
	wormNumFun2() {
		if (!this.reversedMessage) {
			this.switch2 = false
		}
	},
	// 3
	switch3Fun() {
		console.log(this.switch1)
		if (this.switch3 && !this.input3) {
			this.$message({
				message: '请将数据填写完整，再进行操作',
				type: 'warning'
			})
			this.$refs.input3.focus()
			this.switch3 = false
		}
	},
	input3ChangeFun() {
		if (!this.input3) {
			this.switch3 = false
		}
	},
	// 5
	telRegular() {
		if (this.input5) {
			if (!/^1[3456789]\d{9}$/.test(this.input5)) {
				this.$message({
					message: '手机号码有误，请重填',
					type: 'warning'
				})
				this.$refs.tel.focus()
				return false
			}
		}
	},
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {

},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {
	this.warningData()
},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped lang="less">
.equipId{
  line-height: 33px;
  text-align: center;
  background: #eee;
}
.handAddFormBtn{
  margin-top: 20px;
  text-align: right;
}
// 时间input框
/deep/.el-date-editor.el-input, 
/deep/.el-date-editor.el-input__inner{
  width: 177px;
}
// 预警样式
.title{
	display: flex;
	justify-content: space-between;
	align-items: center;
	h2{
		padding-left: 10px;
		border-left: 5px solid #0295ff;
	}
}

.hint {
	margin-left: 5px;
	padding-left: 12px;
	line-height: 40px;
	font-size: 14px;
	position: relative;
	color: #606060;
	span {
		color: #000;
		font-weight: bold;
	}
}
.hint::before{
	position: absolute;
    content: "";
    width: 7px;
    height: 7px;
    background: #0295ff;
    left: 0;
    top: 17px;
}
.second {
	.hint{
		display: flex;
		justify-content: space-between;;
	}
}
.second .el-select,/deep/.second .el-select .el-input{
	width: 100%;
}
/deep/.second .el-input{
	width: 90%;
	margin-bottom: 10px;
}
.addworm{
	i{
		line-height: 40px;
		font-size: 21px;
		cursor: pointer;
		color: #0295ff;
	}
}
.el-icon-delete{
	line-height: 40px;
    font-size: 21px;
    cursor: pointer;
	color: #0295ff;
	margin-left: 5px;
}
.subBtn{
	text-align: right;
	margin-top: 20px;
}
</style>