<template>
	<view>
		<view class="head">
			<view class="shang">
				<view class="shangItem">
					<text>冷水阀</text>
					<text>{{formData.LSF}}%</text>
				</view>
				<view class="shangItem">
					<text style="margin-left: 6rpx;">电加热</text>
					<view class="buttonItem">
						<button class="but" :class="{'active-but': formData.YJDJR_QT == 1}">一</button>
						<button class="but" :class="{'active-but': formData.EJDJR_QT == 1}">二</button>
						<button class="but" :class="{'active-but': formData.SJDJR_QT == 1}">三</button>
					</view>
				</view>
				<view class="shangItem">
					<text>加湿器</text>
					<text>{{formData.JSF}}%</text>
				</view>

			</view>


			<view class="comp"></view>


			<view class="xia">
				<view class="xiaItem">
					<text>初效滤网</text>
					<view class="xiaBut">
						<button class="xiaButton"
							:class="{'Red_button': formData.LWDS_CX == 1}">{{ formData.LWDS_CX === '0' ? '正常' : '报警' }}</button>
					</view>
				</view>
				<view class="xiaItem">
					<text>热水阀</text>
					<text>{{formData.RSF}}%</text>
				</view>
				<view class="xiaItem">
					<text>高温报警</text>
					<view class="xiaBut">
						<button class="xiaButton" :class="{'Red_button': formData.GW_BJ == 1}">
							{{ formData.GW_BJ === '0' ? '正常' : '报警' }}</button>
					</view>
				</view>
				<view class="xiaItem">
					<text>缺风压差</text>
					<view class="xiaBut">
						<button class="xiaButton"
							:class="{'Red_button': formData.QFYC_BJ == 1}">{{ formData.QFYC_BJ === '0' ? '正常' : '报警' }}</button>
					</view>
				</view>
				<view class="xiaItem">
					<text>中效滤网</text>
					<view class="xiaBut">
						<button class="xiaButton"
							:class="{'Red_button': formData.LWDS_ZX == 1}">{{ formData.LWDS_ZX === '0' ? '正常' : '报警' }}</button>
					</view>
				</view>

			</view>
		</view>

		<view class="hold">
			<view class="tiao">
				<text class="tiaoText">CK-1</text>
			</view>
			<view class="param">
				<view class="paramItem">
					<text class="name">温度</text>
					<text class="value">{{formData.WD_1}}℃</text>
				</view>
				<view class="paramItem">
					<text class="name">湿度</text>
					<text class="value">{{formData.SD_1}}%</text>
				</view>
				<view class="paramItem">
					<text class="name">含湿量</text>
					<text class="value">{{formData.HSL}}g/kg</text>
				</view>

			</view>
		</view>

		<view class="hold">
			<view class="tiao">
				<text class="tiaoText">CK-2</text>
			</view>
			<view class="param">
				<view class="paramItem">
					<text class="name">温度</text>
					<text class="value">{{formData.WD_2}}℃</text>
				</view>
				<view class="paramItem">
					<text class="name">湿度</text>
					<text class="value">{{formData.SD_2}}%</text>
				</view>
				<view class="paramItem">
					<text class="name">含湿量</text>
					<text class="value">无g/kg</text>
				</view>

			</view>
		</view>

		<view class="stop">
			<view class="stopTiao">
				<text class="stopTiaoText">停机延时：{{formData.JZ_YSTZ}}s</text>
			</view>
			<view class="param">
				<view class="paramItem1">
					<text class="name1">排风温度设定</text>
					<text class="value">{{formData.WD_SD}}℃</text>
				</view>
				<view class="paramItem1">
					<text class="name1">排风湿度设定</text>
					<text class="value">{{formData.SD_SD}}%</text>
				</view>
				<view class="paramItem1">
					<text class="name1">排风含湿量设定</text>
					<text class="value">{{formData.HSL_SD}}g/kg</text>
				</view>

			</view>
		</view>

		<view class="stopButton">
			<button class="Green_button" @tap="stopAndStart" :class="{'Red_button': formData.JZ_KGJ == 0}">开关按钮</button>
		</view>

		<view class="anniu" @tap="back">
			<image class="anniu" src="../../static/设备菜单/前往列表@2x.png"></image>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				deviceParams: [],

				formData: {
					RSF: '',
					LSF: '',
					JSF: '',
					sn: 'CK1',
					WD_1: '',
					SD_1: '',
					WD_2: '',
					SD_2: '',
					WD_SD: '',
					SD_SD: '',
					HSL: '',
					HSL_SD: '',
					JZ_YSTZ: '',
					Id: '',
					code: '',

					GW_BJ: '0', //高温报警(0:正常,1:报警)
					QFYC_BJ: '1', //缺风压差(0:正常,1:报警)
					LWDS_CX: '0', //初效故障报警(0:正常,1:故障)
					LWDS_ZX: '1', //中效故障报警(0:正常,1:故障)
					YJDJR_QT: '', //一级电加热启停(0:停止,1:启动)
					EJDJR_QT: '', //二级电加热启停(0:停止,1:启动)
					SJDJR_QT: '', //三级电加热启停(0:停止,1:启动)

					JZ_KGJ: '', //设备开关机(0:停止,1:启动)


				}
			}
		},
		onLoad(e) {
			this.getWD_1()
			this.getSD_1()
			this.getHSL()
			this.getWD_2()
			this.getSD_2()
			this.getYSTZ()
			this.getWD_SD()
			this.getSD_SD()
			this.getHSL_SD()
			this.getRSF()
			this.getLSF()
			this.getJSF()
			this.getGWBJ()
			this.getQFYC()
			this.getCXLW()
			this.getZXLW()
			this.getYJDJR()
			this.getEJDJR()
			this.getSJDJR()
			this.getJZ_KGJ()
		},
		methods: {
			back() {
				uni.navigateTo({
					url: '/pages/device/deviceInfo/deviceInfo'
				})
			},

			async list(e) {
				let vm = this;
				let url = uni.$api.deviceParam.list;
				let data = {
					sn: this.formData.sn,
				};

				let res = await uni.$http.get(url);

				this.deviceParams = res.data.data.deviceParams;
				console.log(res.data.data.deviceParams);

			},

			async getWD_1(e) {
				let vm = this;
				let url = uni.$api.deviceParam.detail;
				let data = {
					id: "207",
				};

				let res = await uni.$http.get(url, data);

				this.formData.WD_1 = res.data.data.deviceParam.value;
				console.log(this.formData.WD_1);
			},
			async getSD_1(e) {
				let vm = this;
				let url = uni.$api.deviceParam.detail;
				let data = {
					id: "293",
				};

				let res = await uni.$http.get(url, data);

				this.formData.SD_1 = res.data.data.deviceParam.value;
				console.log(this.formData.SD_1);
			},

			async getHSL(e) {
				let vm = this;
				let url = uni.$api.deviceParam.detail;
				let data = {
					id: "269",
				};

				let res = await uni.$http.get(url, data);

				this.formData.HSL = res.data.data.deviceParam.value;
				console.log(this.formData.HSL);
			},
			async getWD_2(e) {
				let vm = this;
				let url = uni.$api.deviceParam.detail;
				let data = {
					id: "308",
				};

				let res = await uni.$http.get(url, data);

				this.formData.WD_2 = res.data.data.deviceParam.value;
				console.log(this.formData.WD_2);
			},
			async getSD_2(e) {
				let vm = this;
				let url = uni.$api.deviceParam.detail;
				let data = {
					id: "309",
				};

				let res = await uni.$http.get(url, data);

				this.formData.SD_2 = res.data.data.deviceParam.value;
				console.log(this.formData.SD_2);
			},

			async getYSTZ(e) {
				let vm = this;
				let url = uni.$api.deviceParam.detail;
				let data = {
					id: "219",
				};

				let res = await uni.$http.get(url, data);

				this.formData.JZ_YSTZ = res.data.data.deviceParam.value;
				console.log(this.formData.JZ_YSTZ);
			},

			async getWD_SD(e) {
				let vm = this;
				let url = uni.$api.deviceParam.detail;
				let data = {
					id: "296",
				};

				let res = await uni.$http.get(url, data);

				this.formData.WD_SD = res.data.data.deviceParam.value;
				console.log(this.formData.WD_SD);
			},
			async getSD_SD(e) {
				let vm = this;
				let url = uni.$api.deviceParam.detail;
				let data = {
					id: "231",
				};

				let res = await uni.$http.get(url, data);

				this.formData.SD_SD = res.data.data.deviceParam.value;
				console.log(this.formData.SD_SD);
			},
			async getHSL_SD(e) {
				let vm = this;
				let url = uni.$api.deviceParam.detail;
				let data = {
					id: "227",
				};

				let res = await uni.$http.get(url, data);

				this.formData.HSL_SD = res.data.data.deviceParam.value;
				console.log(this.formData.HSL_SD);
			},

			async getRSF(e) {
				let vm = this;
				let url = uni.$api.deviceParam.detail;
				let data = {
					id: "216",
				};

				let res = await uni.$http.get(url, data);

				this.formData.RSF = res.data.data.deviceParam.value;
				console.log(this.formData.RSF);
			},
			async getLSF(e) {
				let vm = this;
				let url = uni.$api.deviceParam.detail;
				let data = {
					id: "268",
				};

				let res = await uni.$http.get(url, data);

				this.formData.LSF = res.data.data.deviceParam.value;
				console.log(this.formData.LSF);
			},
			async getJSF(e) {
				let vm = this;
				let url = uni.$api.deviceParam.detail;
				let data = {
					id: "212",
				};

				let res = await uni.$http.get(url, data);

				this.formData.JSF = res.data.data.deviceParam.value;
				console.log(this.formData.JSF);
			},



			async getGWBJ(e) {
				let vm = this;
				let url = uni.$api.deviceParam.detail;
				let data = {
					id: "294",
				};

				let res = await uni.$http.get(url, data);

				this.formData.GW_BJ = res.data.data.deviceParam.value;
			},
			async getQFYC(e) {
				let vm = this;
				let url = uni.$api.deviceParam.detail;
				let data = {
					id: "306",
				};

				let res = await uni.$http.get(url, data);

				this.formData.QFYC_BJ = res.data.data.deviceParam.value;
			},
			async getCXLW(e) {
				let vm = this;
				let url = uni.$api.deviceParam.detail;
				let data = {
					id: "283",
				};

				let res = await uni.$http.get(url, data);

				this.formData.LWDS_CX = res.data.data.deviceParam.value;
			},
			async getZXLW(e) {
				let vm = this;
				let url = uni.$api.deviceParam.detail;
				let data = {
					id: "303",
				};

				let res = await uni.$http.get(url, data);

				this.formData.LWDS_ZX = res.data.data.deviceParam.value;
			},

			async getYJDJR(e) {
				let vm = this;
				let url = uni.$api.deviceParam.detail;
				let data = {
					id: "215",
				};

				let res = await uni.$http.get(url, data);

				this.formData.YJDJR_QT = res.data.data.deviceParam.value;
			},
			async getEJDJR(e) {
				let vm = this;
				let url = uni.$api.deviceParam.detail;
				let data = {
					id: "211",
				};

				let res = await uni.$http.get(url, data);

				this.formData.EJDJR_QT = res.data.data.deviceParam.value;
			},
			async getSJDJR(e) {
				let vm = this;
				let url = uni.$api.deviceParam.detail;
				let data = {
					id: "213",
				};

				let res = await uni.$http.get(url, data);

				this.formData.SJDJR_QT = res.data.data.deviceParam.value;
			},

			async getJZ_KGJ(e) {
				let vm = this;
				let url = uni.$api.deviceParam.detail;
				let data = {
					id: "267",
				};

				let res = await uni.$http.get(url, data);

				this.formData.JZ_KGJ = res.data.data.deviceParam.value;
			},

			async stopAndStart(e) {
				this.formData.JZ_KGJ == 1 ? this.formData.JZ_KGJ = 0 : this.formData.JZ_KGJ = 1;


				let vm = this;
				let url = uni.$api.deviceParam.updateParam;
				let data = {
					id: "267",
					value: this.formData.JZ_KGJ,
					name: "JZ_KGJ",
					sn: "CK1"
				};

				let res = await uni.$http.get(url, data);
				console.log(res.data.data.value);
			}

		}
	}
</script>

<style>
	.anniu {
		width: 116rpx;
		height: 116rpx;
		float: right;
		margin-right: 10rpx;
	}

	.Green_button {
		background-color: mediumspringgreen;
		color: white;
		width: 654rpx;
		margin-left: 48rpx;
		margin-top: 44rpx;
	}

	.Red_button {
		background-color: crimson;
		color: white;
	}

	.name1 {
		color: #848586;
		font-size: 24rpx;
	}

	.name {
		color: #848586;
		font-size: 30rpx;

	}

	.value {
		font-size: 38rpx;
		color: #444546;
	}

	.paramItem {
		display: flex;
		flex-direction: column;
		margin-left: 58rpx;
		margin-right: 46rpx;
	}

	.paramItem1 {
		display: flex;
		flex-direction: column;
		margin-left: 40rpx;
		margin-right: 40rpx;
	}

	.param {
		display: flex;
		flex-direction: row;
		margin-left: 24rpx;
		align-items: center;
		justify-content: center;
		width: 702rpx;
		height: 140rpx;
		background-color: white;
		border-bottom-right-radius: 8rpx;
		border-bottom-left-radius: 8rpx;
	}

	.tiaoText {
		margin-left: 44rpx;
		font-size: 34rpx;
		font-weight: 550;

	}

	.stopTiaoText {
		margin-left: 44rpx;
		font-size: 36rpx;
		font-weight: 550;
	}

	.tiao {
		margin-top: 26rpx;
		border-top-left-radius: 8rpx;
		border-top-right-radius: 8rpx;
		margin-left: 24rpx;
		width: 702rpx;
		height: 60px;
		background: #EAF1FE;
		font-size: 30rpx;
		color: #007AFF;
		display: flex;
		align-items: center;
	}

	.stopTiao {
		margin-top: 26rpx;
		border-top-left-radius: 8rpx;
		border-top-right-radius: 8rpx;
		margin-left: 24rpx;
		width: 702rpx;
		height: 60px;
		background: #007AFF;
		font-size: 38rpx;
		color: white;
		display: flex;
		align-items: center;
	}

	.xia {

		display: flex;
		flex-direction: row;
	}

	.xiaItem {
		color: white;
		display: flex;
		flex-direction: column;
		margin-left: 20rpx;
		margin-right: 20rpx;
		align-items: center;
		justify-content: center;
		margin-bottom: 16rpx;
	}

	.shang {

		display: flex;
		flex-direction: row;
	}

	.shangItem {
		color: white;
		display: flex;
		flex-direction: column;
		margin-left: 30rpx;
		margin-right: 30rpx;
		align-items: center;
		justify-content: center;
		margin-bottom: 16rpx;
	}

	.buttonItem {
		display: flex;
		flex-direction: row;
		font-size: 20rpx;
		color: #444546;
	}

	.but {
		width: 50rpx;
		height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 10rpx;
		margin-top: 5rpx;
		font-size: 24rpx;

	}

	.active-but {
		background-color: #00ff99;
	}

	.xiaBut {
		display: flex;
		flex-direction: row;
		font-size: 20rpx;
		color: #444546;
	}

	.KGJ_button {
		background-color: #00ff99;
	}

	.xiaButton {
		width: 100rpx;
		height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 10rpx;
		margin-top: 5rpx;
		font-size: 24rpx;
	}

	.head {
		font-size: 26rpx;
		height: 300px;
		background: linear-gradient(180deg, #2A8FFB 0%, #0467FB 100%);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.comp {
		background-color: #D6D6D6;
		width: 702rpx;
		height: 200rpx;
		border-radius: 8rpx;
		margin-bottom: 20rpx;
	}
</style>
