<template>
	<PageLayout :navbarShow="false">
		<view class="container">
			<!-- 房间头部 -->
			<view class="room-header">
				<view>
					<text class="room-title">{{ fjh }}室</text>
				</view>
				<view>
					<uni-icons type="home" size="40" color="#3498db"></uni-icons>
				</view>
			</view>

			<!-- 照明控制卡片 -->
			<view class="device-card" :class="{ 'disabled-card': !kgpd }">
				<view class="card-header">
					<view class="card-icon light-icon">
						<uni-icons type="lightbulb" size="26" color="#fff"></uni-icons>
					</view>
					<view>
						<text class="card-title">照明控制</text>
						<text class="card-subtitle">智能灯光系统</text>
					</view>
				</view>

				<view class="control-container" v-if="kgpd">
					<view class="switch-container">
						<view class="status-indicator" :class="device.key2 === 1 ? 'status-on' : 'status-off'"></view>
						<text class="switch-label">{{ device.key2 === 1 ? '已开启' : '已关闭' }}</text>
					</view>
					<wd-switch v-model="lightStatus" active-color="#2ecc71" @change="onChange" />
					<!-- <switch :checked="lightStatus"   /> -->
				</view>

				<view class="power-consumption" v-if="kgpd">
					<view class="power-item">
						<text class="power-value">0W</text>
						<text class="power-label">当前功率</text>
					</view>
					<view class="power-item">
						<text class="power-value">0kWh</text>
						<text class="power-label">今日用电</text>
					</view>
					<view class="power-item">
						<text class="power-value">0h</text>
						<text class="power-label">本月用时</text>
					</view>
				</view>
			</view>

			<!-- 空调控制卡片 -->
			<view class="device-card" :class="{ 'disabled-card': !ktpd }">
				<view class="card-header">
					<view class="card-icon ac-icon">
						<uni-icons type="fan" size="26" color="#fff"></uni-icons>
					</view>
					<view>
						<text class="card-title">空调控制</text>
						<text class="card-subtitle">智能温控系统</text>
					</view>
				</view>

				<view class="ac-controls" v-if="ktpd">
					<button class="ac-btn" :class="{ 'active': acMode === 1 }" @click="conditioning(1)">
						<uni-icons type="snow" size="20" color="#3498db"></uni-icons>
						<text>制冷 25°C</text>
					</button>
					<button class="ac-btn" :class="{ 'active': acMode === 2 }" @click="conditioning(2)">
						<uni-icons type="fire" size="20" color="#e74c3c"></uni-icons>
						<text>制热 27°C</text>
					</button>
					<button class="ac-btn" :class="{ 'active': acMode === 0 }" @click="conditioning(0)">
						<uni-icons type="close" size="20" color="#7f8c8d"></uni-icons>
						<text>关闭空调</text>
					</button>
				</view>

				<view class="power-consumption" v-if="ktpd">
					<view class="power-item">
						<text class="power-value">{{ acMode === 0 ? '--' : '0' }}</text>
						<text class="power-label">当前温度</text>
					</view>
					<view class="power-item">
						<text class="power-value">{{ acMode === 0 ? '0.0' : '0.0' }}kW</text>
						<text class="power-label">当前功率</text>
					</view>
					<view class="power-item">
						<text class="power-value">0kWh</text>
						<text class="power-label">今日用电</text>
					</view>
				</view>
			</view>
		</view>
	</PageLayout>
</template>

<script setup>
	import {
		pushMqttsubscribeForYKQ,
		subscribeByOneTopic,
		pushMqttsubscribeforSendInfo,
		pushMqttsubscribe,
		getsblb
	} from '@/api/devicecontrol/officedevice';
	import {
		useMessage,
		useToast
	} from 'wot-design-uni';

	// const checked = ref(true);
	const homenumber = ref(''); //房间代码
	const kgpd = ref(false); //开关状态
	const ktpd = ref(false); //空调状态
	const kgkzbm = ref(''); //开关控制编码
	const ktkzbm = ref(''); //空调控制编码
	const kgopen = ref(''); //开关-开-代码
	const kgclose = ref(''); //开关-关-代码
	const kgzt = ref(''); //开关状态
	const ktzlopen = ref(0) //空调制冷
	const ktzropen = ref(0) //空调制热
	const ktclose = ref(0) //空调关
	const device = ref({})
	const fjh = ref(''); //房间号
	const lightStatus = ref(false);//开关状态
	const toast = useToast();

	const gethomesblb = (id) => {
		getsblb({
			fjbid: id
		}).then((res) => {
			console.log("房间表返回的信息--11111---", res.result)
			if (res.success) {
				for (const item of res.result) {
					// console.log("房间表返回的信息--11111-item--", item)
					if (item.sblb == '开关') {
						kgpd.value = true;
						kgkzbm.value = item.sbkzbm;
						kgopen.value = item.kgopen; //开关-开-代码
						kgclose.value = item.kgclose; //开关-关-代码
						kgzt.value = item.kgzt; //开关状态
						testone();
					}
					if (item.sblb == '空调') {
						ktpd.value = true
						ktkzbm.value = item.sbkzbm;
						ktzlopen.value = item.ktzlopen; //空调制冷
						ktzropen.value = item.ktzropen; //空调制热
						ktclose.value = item.ktclose; //空调关
						//初始化的时候订阅空调
						subconditioning();
					}
				}
				console.log("kgpd===-", kgpd.value)
				console.log("ktpd===-", ktpd.value)
			}
		})
		//添加原初始化代码
		subscribeByOneTopic({
			topic: 's' + kgkzbm.value,
			qos: 0
		}).then(res => {
			console.log("res--subscribeByOneTopic---", res)
		})
	}
	//初始化的时候订阅空调createdSwitch
	const subconditioning = () => {
		var param = {
			topic: 's' + ktkzbm.value,
			qos: 0
		}
		console.log("param----subconditioning--22222空调---", param)
		subscribeByOneTopic(param).then(res => {
			console.log("res---空调--222233333333-------", res)
		})
	}
	//空调遥控器--1为制冷-25°；0代表关；2 代表 制热 温度27
	const conditioning = (sendcode) => {
		let sendmassage = '';
		if (sendcode == 0) { //关
			sendmassage = ktclose.value;
		}
		if (sendcode == 1) { //制冷
			sendmassage = ktzlopen.value;
		}
		if (sendcode == 2) { //制热
			sendmassage = ktzropen.value;
		}
		var param = {
			topic: 'f' + ktkzbm.value,
			pushMessageone: sendmassage
		};
		console.log("参数-空调遥控器--444444-", param)
		pushMqttsubscribeForYKQ(param).then(res => {
			console.log("res------------", res)
			if (res.success) {
				toast.success('指令发送成功!')
				// this.$message.success("指令发送成功！")
			} else {
				toast.warning('指令发送失败!')
				// this.$message.error("指令发送失败！")
			}
		})
	}
	const testone = async () => {
		console.log("this.kgkzbm--2222222---", kgkzbm.value)
		await subscribeByOneTopic({
			topic: 's' + kgkzbm.value,
			qos: 0
		}).then(res => {
			console.log("res--单个接受-2222--333333--", res)
			if (res.success) {
				getswitch();
			} else {}
		})

	}
	const onChange = async (checked) => {
		// console.log('开关状态改变:targetStatus', checked.detail);
		// 你可以在这里处理开关状态改变后的逻辑
		if (checked) {
			console.log('点击了开关---');
			if (device.value.key2 == 1) {
				console.log("--当前状态-开---")
				
				await closeswitch(); //关闭开关
				testone();
			} 
			else if (device.value.key2 == 0) {
				console.log("--当前状态-关----")
				
				await openswitch(); //打开开关
				testone();
			}
		}
	}
	const openswitch = () => {
		console.log("this.kgkzbm----", kgkzbm.value)
		var param = {
			topic: 'f' + kgkzbm.value,
			pushMessage: kgopen.value,
			switchinfoMessage: kgzt.value
			// pushMessage: "{'type':'event','key2':1}"
		};
		pushMqttsubscribe(param).then(res => {
			console.log("res------开------", res)
		})
	}
	const closeswitch = () => {
		var param = {
			topic: 'f' + kgkzbm.value,
			pushMessage: kgclose.value,
			switchinfoMessage: kgzt.value
			// pushMessage: "{'type':'event','key2':0}"
		};
		pushMqttsubscribe(param).then(res => {
			console.log("res-------关-----", res)
		})
	}
	const getswitch = async () => {
		// console.log("this.kgzt-----", kgzt.value)
		await pushMqttsubscribeforSendInfo({
			topic: 'f' + kgkzbm.value,
			pushMessage: kgzt.value
		}).then(res => {
			// console.log("---获取开关状态---", res)
			device.value = JSON.parse(res.message);
			if(device.value.key2=='0'){
				console.log("---获取开关状态-关--", device.value.key2)
				lightStatus.value=false;
			}
			else if(device.value.key2=='1'){
				console.log("---获取开关状态--开-", device.value.key2)
				lightStatus.value=true;
			}else{
				lightStatus.value=false;
			}
		})
		// console.log("---获取开关状态-2222222--", device.value)
		
		
	}

	onMounted(() => {
		// getofficehomelist();
	})
	onLoad((options) => {
		console.log("传进来的参数--00000-", options)
		console.log("传进来的参数-房间号-00000-", options.fjh)
		fjh.value = options.fjh;
		// queryById(options.id)
		//以下为方法
		kgpd.value = false;
		ktpd.value = false;
		if (options.id) {
			//添加设备信息查询，如果没有绑定空调则不显示
			gethomesblb(options.id);
		} else {
			kgpd.value = false;
			ktpd.value = false;
		}
	})
</script>
<style lang="scss" scoped>
	.container {
		padding: 15px;
	}

	.room-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: white;
		border-radius: 20px;
		padding: 20px;
		box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
		margin-bottom: 25px;
		position: relative;
		overflow: hidden;

		&::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 5px;
			background: linear-gradient(90deg, #3498db, #8e44ad);
		}
	}

	.room-title {
		font-size: 24px;
		font-weight: 700;
		color: #2c3e50;
		display: block;
		margin-bottom: 5px;
	}

	.room-id {
		background: #f0f4f8;
		padding: 6px 12px;
		border-radius: 50px;
		font-size: 14px;
		color: #7f8c8d;
	}

	.device-card {
		background: white;
		border-radius: 20px;
		padding: 25px;
		margin-bottom: 25px;
		box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
		transition: transform 0.3s ease, box-shadow 0.3s ease;

		&:hover {
			transform: translateY(-5px);
			box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
		}
	}

	.card-header {
		display: flex;
		align-items: center;
		margin-bottom: 20px;
		padding-bottom: 15px;
		border-bottom: 1px solid #f0f4f8;
	}

	.card-icon {
		width: 45px;
		height: 45px;
		border-radius: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 15px;

		&.light-icon {
			background: linear-gradient(135deg, #ffd700 0%, #ff9a00 100%);
		}

		&.ac-icon {
			background: linear-gradient(135deg, #3498db 0%, #1abc9c 100%);
		}
	}

	.card-title {
		font-size: 20px;
		font-weight: 600;
		color: #2c3e50;
		display: block;
	}

	.card-subtitle {
		font-size: 14px;
		color: #7f8c8d;
		margin-top: 3px;
		display: block;
	}

	.control-container {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.switch-container {
		display: flex;
		align-items: center;
	}

	.status-indicator {
		width: 12px;
		height: 12px;
		border-radius: 50%;
		margin-right: 12px;

		&.status-on {
			background: #2ecc71;
			box-shadow: 0 0 10px rgba(46, 204, 113, 0.5);
		}

		&.status-off {
			background: #e74c3c;
		}
	}

	.switch-label {
		font-size: 16px;
		color: #34495e;
		font-weight: 500;
	}

	.ac-controls {
		display: grid;
		grid-template-columns: repeat(3, 1fr); // 固定三列布局
		gap: 12px; // 按钮之间的间距
		margin-top: 10px;
		width: 100%; // 确保占满父容器宽度
	}

	.ac-btn {
		// 保持原有样式，可适当调整内边距确保内容居中
		// padding: 12px 5px; // 减少左右内边距，避免小屏幕拥挤
		position: null;
		font-size: 14px; // 微调字体大小
		border: none;
		// border-radius: 15px;
		// padding: 15px 10px;
		// font-size: 15px;
		font-weight: 500;
		background: #f8f9fc;
		color: #4a6fa5;
		cursor: pointer;
		transition: all 0.3s ease;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		&:hover {
			background: #eef2f7;
		}

		&.active {
			background: linear-gradient(135deg, #3498db 0%, #1abc9c 100%);
			color: white;
			box-shadow: 0 6px 15px rgba(52, 152, 219, 0.3);
		}

		&:nth-child(1) {
			color: #3498db;
		}

		&:nth-child(2) {
			color: #e74c3c;
		}

		&:nth-child(3) {
			color: #7f8c8d;
		}
	}

	.disabled-card {
		opacity: 0.6;
		position: relative;
		overflow: hidden;

		&::after {
			content: "设备未连接";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(255, 255, 255, 0.85);
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 600;
			color: #e74c3c;
			border-radius: 20px;
		}
	}

	.power-consumption {
		display: flex;
		justify-content: space-around;
		background: #f8f9fc;
		border-radius: 15px;
		padding: 15px;
		margin-top: 20px;
	}

	.power-item {
		flex: 1;
		text-align: center;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	/* 分隔线 */
	.power-item:not(:last-child)::after {
		content: "";
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		height: 60%;
		width: 1px;
		background: #f0f4f8;
	}

	.power-value {
		font-size: 20px;
		font-weight: 700;
		color: #2c3e50;
	}

	.power-label {
		font-size: 13px;
		color: #7f8c8d;
		margin-top: 5px;
	}

	@media (max-width: 480px) {

		// 注释或删除这行：.ac-controls { grid-template-columns: 1fr; }
		// 保持三列布局，确保小屏幕下也横向排列
		.ac-btn {
			// padding: 10px 3px; // 更小屏幕下进一步调整内边距
			// font-size: 13px;
		}

		.ac-controls {
			// grid-template-columns: 1fr;
		}

		.room-title {
			font-size: 20px;
		}

		.device-card {
			padding: 20px;
		}
	}
</style>