<template>
	<view class="room-tab">
		<view class="room-content">
			<!-- 房间列表 -->
			<scroll-view scroll-y @scrolltolower="handqixing" refresher-enabled @refresherrefresh="onRefresh" :refresher-triggered="isRefreshing" refresher-default-style="black" class="room-list">
				<view 
					v-for="(room, index) in roomList" 
					:key="index"
					class="room-item"
					@click="handleRoomClick(room)"
				>
					<!-- 通知徽章 -->
					<!-- <view v-if="room.notificationCount > 0" class="notification-badge">
						{{ room.notificationCount }}
					</view> -->
					
					<!-- 房间图片占位符 -->
					<view class="room-image-placeholder">
						<image :src="room.picture" mode="aspectFill"></image>
					</view>
					
					<!-- 房间信息 -->
					<view class="room-info">
						<text class="room-name">{{ room.name }}</text>
						<!-- <text class="room-temperature">{{ room.temperature }}°</text> -->
					</view>
					
					<!-- 右侧操作区域 -->
					<view class="room-actions">
						<text class="settings-icon" @click.stop="btnedit(room)">⚙️</text>
						<text class="arrow-icon">›</text>
					</view>
				</view>
				<view v-if="roomList.length == 0" class="" style="margin: auto;margin-top: 50rpx;width: 272rpx;height: 272rpx;border-radius: 50%;border: 1px solid #ccc;">
					<image style="width: 272rpx;height: 272rpx;" src="https://api.ccttiot.com/smartmeter/img/static/umA124Tcq2VMMgwye048" mode=""></image>
				</view>
				<!-- 添加房间按钮 -->
				<view class="add-device-btn" @click="showAddRoomModal">
					<text class="add-icon">+</text>
					<text class="add-text">{{ $i18n.t('addRoom') }}</text>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'RoomTab',
	data() {
		return {
			showModal: false,
			newRoomName: '',
			selectedRoomTypeIndex: 0,
			roomTypes: [],
			roomList: [],
			// 添加语言版本标识
			languageVersion: 0,
			isRefreshing:false,
			kjid:'',
			pageNum:1,
			pageSize:10,
			total:0,
			hasMore:true,
			requestInProgress:false
		}
	},
		computed: {
			// 计算当前语言，用于触发更新
			currentLanguage() {
				return this.$i18n.getCurrentLanguage()
			}
		},
		created() {
			this.getRoomList()
		},
		watch: {
			// 监听语言变化
			currentLanguage() {
				console.log('房间页面语言变化:', this.currentLanguage)
				this.languageVersion++ // 增加版本号
				this.getRoomList()
			}
		},
		onShow() {
			// this.getRoomList();
		},
		mounted() {
			// 监听语言变化事件
			uni.$on('languageChanged', this.handleLanguageChange)
			// 监听空间切换事件
			uni.$on('spaceChanged', this.handleSpaceChanged)
			// 监听房间更新事件
			uni.$on('roomUpdated', this.handleRoomUpdated)
			// 初始化空间ID并首次拉取列表
			this.kjid = uni.getStorageSync('kjid')
			this.getRoomList()
		},
		beforeDestroy() {
			// 移除事件监听
			uni.$off('languageChanged', this.handleLanguageChange)
			uni.$off('spaceChanged', this.handleSpaceChanged)
			uni.$off('roomUpdated', this.handleRoomUpdated)
		},
		methods: {
			// 请求房间列表
			getRoomList(){
				this.kjid = uni.getStorageSync('kjid')
				if(this.requestInProgress) return;
				this.requestInProgress = true
				this.$http.get(`/bst/room/list?spaceId=${this.kjid}&pageNum=${this.pageNum}&pageSize=${this.pageSize}`).then((res) => {
					if (res.code == 200) {
						this.total = Number(res.total || 0);
						const rows = Array.isArray(res.rows) ? res.rows : []
						if(this.pageNum == 1){
							this.roomList = rows
						}else{
							this.roomList = this.roomList.concat(rows)
						}
						this.hasMore = this.roomList.length < this.total
					}
				}).finally(()=>{
					this.requestInProgress = false
					if(this.isRefreshing){
						this.isRefreshing = false
					}
				})
			},
			handleSpaceChanged(payload){
				try{
					this.kjid = (payload && payload.kjid) || uni.getStorageSync('kjid')
					this.pageNum = 1
					this.getRoomList()
				}catch(e){
					console.warn('处理空间切换失败:', e);
				}
			},
			// 处理房间更新事件
			handleRoomUpdated(payload){
				try{
					console.log('收到房间更新事件:', payload);
					// 重新请求房间列表数据
					this.pageNum = 1;
					this.getRoomList();
				}catch(e){
					console.warn('处理房间更新失败:', e);
				}
			},
			// 上拉加载更多
			handqixing() {
				if(!this.hasMore) return;
				this.pageNum += 1;
				this.getRoomList();
			},
			// 下拉刷新
			onRefresh() {
				if(this.isRefreshing || this.requestInProgress) return;
				this.isRefreshing = true;
				setTimeout(()=>{
					this.pageNum = 1;
					this.getRoomList();
				},1000)
			},
			// 点击编辑房间
			btnedit(room){
				console.log(room);
				uni.navigateTo({
					url:'/pages/room/editroom?roomid=' + room.id
				})
			},
			
			handleLanguageChange(lang) {
				console.log('房间页面语言切换事件:', lang);
				this.languageVersion++; // 增加版本号
			},
			// 点击进入
			handleRoomClick(room) {
				console.log('点击房间:', room.name);
				// uni.navigateTo({
				// 	url:'/pages/room/roomdevice?roomid=' + room.id
				// })
				uni.navigateTo({
					url:'/pages/room/editroom?roomid=' + room.id
				})
			},
			// 点击添加房间
			showAddRoomModal() {
				uni.navigateTo({
					url:'/pages/room/addroom'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.room-tab {
       
	}
	.room-header {
		margin-bottom: 30rpx;
	}
	
	.room-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		display: block;
		margin-bottom: 10rpx;
	}
	
	.room-subtitle {
		font-size: 28rpx;
		color: #666;
	}
	
	.room-content {
		/* 内容区域样式 */
	}
	
	.room-list {
		margin-bottom: 30rpx;
		height: 76vh;
		overflow: scroll;
	}
	
	.room-item {
		position: relative;
		display: flex;
		align-items: center;
		padding: 20rpx;
		width: 700rpx;
		margin: auto;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		background: #fff;
		border-radius: 12rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
		// padding-left: 50rpx;
		box-sizing: border-box;
	}
	
	// 通知徽章
	.notification-badge {
		position: absolute;
		top: 30rpx;
		left: 0rpx;
		background: #ff4444;
		color: #fff;
		font-size: 22rpx;
		font-weight: bold;
		padding: 4rpx 12rpx;
		border-radius:0 8rpx 8rpx 0;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1;
	}
	
	// 房间图片占位符
	.room-image-placeholder {
		width: 128rpx;
		height: 128rpx;
		background: #f0f0f0;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 30rpx;
		border-radius: 20rpx;
		overflow: hidden;
		image{
			width: 128rpx;
			height: 128rpx;
		}
	}
	
	.room-icon {
		font-size: 40rpx;
	}
	
	// 房间信息
	.room-info {
		flex: 1;
	}
	
	.room-name {
		font-size: 30rpx;
		color: #333;
		font-weight: bold;
		margin-bottom: 8rpx;
		display: block;
	}
	
	.room-temperature {
		font-size: 26rpx;
		color: #999;
	}
	
	// 右侧操作区域
	.room-actions {
		display: flex;
		align-items: center;
	}
	
	.settings-icon {
		font-size: 28rpx;
		color: #999;
		margin-right: 15rpx;
	}
	
	.arrow-icon {
		font-size: 66rpx;
		color: #999;
		margin-bottom: 10rpx;
	}
	
	.add-device-btn {
		margin: 40rpx auto 0 auto;
		width: 700rpx;
		height: 80rpx;
		border: 2rpx solid #bbb;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		color: #333;
		background: #fff;
		transition: all 0.2s ease;
		
		.add-icon {
			font-size: 38rpx;
			margin-right: 16rpx;
		}
	}
	
	.add-device-btn:active {
		transform: scale(0.95);
		background: #f0f0f0;
		border-color: #999;
	}
</style> 