<template>
	<view class="page">
		<u-navbar :title="title" :border-bottom="false" :background="bgc" title-color='#000' title-size='36'
			:title-bold='true' height='45' id="navbar">
		</u-navbar>


		<view class="tit">
			蜂箱温度预警
			<u-switch v-model="form.enableTemperature" active-color="#FFC107" @change="chang"></u-switch>
		</view>
		<view class="iptbox" @click="btnfx(1)">
			<input type="text" class="ips" v-model="form.address"
				:placeholder="'低于' + form.minTemperature + '℃或高于' + form.maxTemperature + '℃时'"
				placeholder-class="my-placeholder" disabled />
			<image src="https://api.ccttiot.com/smartmeter/img/static/ugAdKZm5ZHZ4to1cDsNI" mode=""></image>
		</view>
		<view class="tit">
			蜂箱湿度预警
			<u-switch v-model="form.enableHumidity" active-color="#FFC107" @change="chang"></u-switch>
		</view>
		<view class="iptbox" @click="btnfx(2)">
			<input type="text" class="ips" v-model="form.address"
				:placeholder="'低于' + form.minHumidity + '%或高于' + form.maxHumidity + '%时'"
				placeholder-class="my-placeholder" disabled />
			<image src="https://api.ccttiot.com/smartmeter/img/static/ugAdKZm5ZHZ4to1cDsNI" mode=""></image>
		</view>
		<view class="tit">
			蜂箱重量预警
			<u-switch v-model="form.enableWeight" active-color="#FFC107" @change="chang"></u-switch>
		</view>
		<view class="iptbox" @click="btnfx(3)">
			<input type="text" class="ips" v-model="form.address"
				:placeholder="'低于' + form.minWeight + 'g或高于' + form.maxWeight + 'g时'" placeholder-class="my-placeholder"
				disabled />
			<image src="https://api.ccttiot.com/smartmeter/img/static/ugAdKZm5ZHZ4to1cDsNI" mode=""></image>
		</view>
		<view class="tit">
			蜂箱进出量预警
			<u-switch v-model="form.enableIo" active-color="#FFC107" @change="chang"></u-switch>
		</view>
		<view class="iptbox" @click="btnfx(4)">
			<input type="text" class="ips" v-model="form.address"
				:placeholder="'低于' + form.minIo + '只或高于' + form.maxIo + '只时'" placeholder-class="my-placeholder"
				disabled />
			<image src="https://api.ccttiot.com/smartmeter/img/static/ugAdKZm5ZHZ4to1cDsNI" mode=""></image>
		</view>
		<view class="tit">
			蜂箱电量预警
			<u-switch v-model="form.enablePower" active-color="#FFC107" @change="chang"></u-switch>
		</view>
		<view class="iptbox" @click="btnfx(5)">
			<input type="text" class="ips" v-model="form.address" :placeholder="'低于' + form.minPower + '%时'"
				placeholder-class="my-placeholder" disabled />
			<image src="https://api.ccttiot.com/smartmeter/img/static/ugAdKZm5ZHZ4to1cDsNI" mode=""></image>
		</view>
		<view class="tit">
			蜂箱频率预警
			<u-switch v-model="form.enableHz" active-color="#FFC107" @change="chang"></u-switch>
		</view>
		<view class="iptbox" @click="btnfx(6)">
			<input type="text" class="ips" v-model="form.address"
				:placeholder="'低于' + form.minHz + '或高于' + form.maxHz + '时'" placeholder-class="my-placeholder"
				disabled />
			<image src="https://api.ccttiot.com/smartmeter/img/static/ugAdKZm5ZHZ4to1cDsNI" mode=""></image>
		</view>
		<view class="tit">
			电子围栏范围预警
			<u-switch v-model="form.enableFence" active-color="#FFC107" @change="chang"></u-switch>
		</view>
		<view class="iptbox" @click="btnfx(7)">
			<input type="text" class="ips" v-model="form.address" :placeholder="'低于' + form.minFence + 'Km时'"
				placeholder-class="my-placeholder" disabled />
			<image src="https://api.ccttiot.com/smartmeter/img/static/ugAdKZm5ZHZ4to1cDsNI" mode=""></image>
		</view>

		<!-- 弹窗 -->
		<view class="tanc" v-if="maskflag">
			<image src="https://api.ccttiot.com/smartmeter/img/static/uvvzP7sIDIFpA8ErtRaL" mode=""></image>
			<view class="top">
				蜂箱{{fxtxt}}预警范围
			</view>
			<view class="shuzhi" v-if="dange">
				低于<input type="text" v-model="di" /> {{danwei}}或高于 <input type="text" v-model="gao" /> {{danwei}}时
			</view>
			<view class="shuzhi" v-if="fxtxt == '电量'">
				低于<input type="text" v-model="zhong" /> {{danwei}}时
			</view>
			<view class="shuzhi" v-if="fxtxt == '范围'">
				超过<input type="text" v-model="zhong" /> {{danwei}}时
			</view>
			<view class="anniu">
				<view class="qux" @click="btnqx">
					取消
				</view>
				<view class="qd" @click="btnqd">
					确定
				</view>
			</view>
		</view>
		<view class="mask" v-if="maskflag"></view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: " #F4FAF8",
				},
				title: "预警设置",
				apiaryId: '',
				fxtxt: '',
				danwei: '',
				di: '',
				zhong: '',
				gao: '',
				dange: true,
				form: {
					id:'',
					enableTemperature: false,
					enableHumidity: false,
					enableWeight: false,
					enableIo: false,
					enablePower: false,
					enableHz: false,
					enableFence: false,
					minTemperature: '',
					maxTemperature: '',
					minHumidity: '',
					maxHumidity: '',
					minWeight: '',
					maxWeight: '',
					minIo: '',
					maxIo: '',
					minPower: '',
					minHz: '',
					maxHz: '',
					minFence: '',
					zhong: ''
				},
				maskflag: false,
			}
		},
		onLoad(option) {
			this.apiaryId = option.apiaryId
			this.getlist()
		},
		onShow() {

		},
		methods: {
			chang(e){
				this.btnqd()
			},
			btnqd() {
				if(this.fxtxt == '温度'){
					this.form.minTemperature = this.di
					this.form.maxTemperature = this.gao
				}else if(this.fxtxt == '湿度'){
					this.form.minHumidity = this.di
					this.form.maxHumidity = this.gao
				}else if(this.fxtxt == '重量'){
					this.form.minWeight = this.di
					this.form.maxWeight = this.gao
				}else if(this.fxtxt == '进出量'){
					this.form.minIo = this.di
					this.form.maxIo = this.gao
				}else if(this.fxtxt == '电量'){
					this.form.minPower = this.zhong
				}else if(this.fxtxt == '频率'){
					this.form.minHz = this.di
					this.form.maxHz = this.gao
				}else if(this.fxtxt == '范围'){
					this.form.minFence = this.zhong
				}
				let data = this.form
				this.$u.put(`/farm/warnSetting`,data).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '操作成功',
							icon: 'success',
							duration: 1000
						})
						this.getlist()
						this.maskflag = false
						this.dange = true
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			btnqx() {
				this.maskflag = false
				this.dange = true
			},
			btnfx(num) {
				this.maskflag = true
				if (num == 1) {
					this.danwei = '℃'
					this.fxtxt = '温度'
					this.di = this.form.minTemperature
					this.gao = this.form.maxTemperature
				} else if (num == 2) {
					this.danwei = '%'
					this.fxtxt = '湿度'
					this.di = this.form.minHumidity
					this.gao = this.form.maxHumidity
				} else if (num == 5) {
					this.danwei = '%'
					this.fxtxt = '电量'
					this.zhong = this.form.minPower
					this.dange = false
				} else if (num == 3) {
					this.danwei = 'g'
					this.fxtxt = '重量'
					this.di = this.form.minWeight
					this.gao = this.form.maxWeight
				} else if (num == 4) {
					this.danwei = '只'
					this.fxtxt = '进出量'
					this.di = this.form.minIo
					this.gao = this.form.maxIo
				} else if (num == 6) {
					this.danwei = ''
					this.fxtxt = '频率'
					this.di = this.form.minHz
					this.gao = this.form.maxHz
				} else if (num == 7) {
					this.danwei = 'Km'
					this.fxtxt = '范围'
					this.zhong = this.form.minFence
					this.dange = false
				}
			},
			getlist() {
				this.$u.get(`/farm/warnSetting/apiary/${this.apiaryId}`).then(res => {
					if (res.code == 200) {
						this.form = res.data
						console.log(this.form);
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F4FAF8;
	}

	.page {
		// position: relative;
		padding-bottom: 200rpx;
		width: 750rpx;

		.mask {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 97;
			width: 100%;
			height: 100vh;
			background: rgba(61, 61, 61, 0.2);
		}

		.tanc {
			width: 594rpx;
			height: 420rpx;
			background: #FFFFFF;
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			position: fixed;
			left: 50%;
			transform: translateX(-50%);
			top: 506rpx;
			z-index: 98;

			.anniu {
				display: flex;
				justify-content: space-between;
				padding: 0 44rpx;
				box-sizing: border-box;
				margin-top: 64rpx;
				width: 100%;

				.qux {
					width: 234rpx;
					height: 80rpx;
					border-radius: 40rpx 40rpx 40rpx 40rpx;
					border: 2rpx solid #FFC107;
					font-size: 36rpx;
					color: #FFC107;
					text-align: center;
					line-height: 80rpx;
				}

				.qd {
					width: 234rpx;
					height: 80rpx;
					background: #FFC107;
					border-radius: 40rpx 40rpx 40rpx 40rpx;
					font-size: 36rpx;
					color: #FFFFFF;
					text-align: center;
					line-height: 80rpx;
				}
			}

			.shuzhi {
				display: flex;
				align-items: center;
				// justify-content: space-between;
				justify-content: center;
				// padding:  0 60rpx;
				margin-top: 50rpx;
				box-sizing: border-box;

				input {
					width: 96rpx;
					height: 76rpx;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					border: 2rpx solid #808080;
					padding-left: 10rpx;
					box-sizing: border-box;
					margin: 0 10rpx;
				}
			}

			.top {
				font-weight: 600;
				font-size: 36rpx;
				color: #3D3D3D;
				width: 100%;
				text-align: center;
				padding-top: 40rpx;
				box-sizing: border-box;
			}

			image {
				width: 198rpx;
				height: 172rpx;
				position: absolute;
				top: 12rpx;
				right: 20rpx;
				opacity: .5;
			}
		}

		.tit {
			margin-right: 49rpx;
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			justify-content: space-between;
			margin-top: 40rpx;
			margin-left: 50rpx;
			font-weight: 600;
			font-size: 32rpx;
			color: #3D3D3D;
		}

		.iptbox {
			display: flex;
			align-items: center;
			flex-wrap: nowrap;
			padding: 22rpx;
			margin: 28rpx auto 0;
			width: 658rpx;
			height: 88rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.15);
			border-radius: 20rpx 20rpx 20rpx 20rpx;

			.ips {
				width: 630rpx;

			}

			image {
				width: 18rpx;
				height: 32rpx;
			}

			.my-placeholder {
				font-weight: 400;
				font-size: 32rpx;
				color: #808080;
			}
		}



	}
</style>