<template>
	<view class="page">
		<u-navbar :is-back="true" :border-bottom="false" :background="bgc" title-color='#2E4975' title-size='36'
			height='40' :title="$t('gateway.listTitle')"></u-navbar>
		<view class="gateway-list">
			<view class="gateway-item" v-for="(item, index) in gatewayList" :key="index" @click="handleItemClick(item)">
				<view class="gateway-header">
					<view class="gateway-icon-wrapper">
						<image class="gateway-icon" :src="item.picture || item.modelPicture " mode="aspectFill"></image>
						<view class="status-dot" :class="item.onlineStatus == 1 ? 'status-online-dot' : 'status-offline-dot'"></view>
					</view>
					<view class="gateway-main-info">
						<view class="gateway-title-row">
							<text class="gateway-title">{{ item.deviceName || $t('gateway.unnamed') }}</text>
						</view>
						<view class="gateway-model">{{ item.modelName }}</view>
					</view>
					<view class="gateway-status-badge" :class="item.onlineStatus == 1 ? 'status-online' : 'status-offline'">
						{{ item.onlineStatus == 1 ? $t('gateway.online') : $t('gateway.offline') }}
					</view>
				</view>
				<view class="gateway-divider"></view>
				<view class="gateway-info-grid">
					<view class="info-item">
						<text class="info-label">SN</text>
						<text class="info-value">{{ item.sn || '--' }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">MAC</text>
						<text class="info-value">{{ item.mac || '--' }}</text>
					</view>
				</view>
				<view class="gateway-footer" v-if="item.activationTime">
					<text class="footer-text">{{ $t('gateway.activated') }}{{ formatTime(item.activationTime) }}</text>
				</view>
			</view>
			<view class="empty-state" v-if="gatewayList.length == 0">
				<text class="empty-text">{{ $t('gateway.empty') }}</text>
				<text class="empty-desc">{{ $t('gateway.emptyDesc') }}</text>
			</view>
		</view>
		<view class="saoma" @click="btnsm">
			{{ $t('gateway.scanBind') }}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					background: '#FFFFFF'
				},
				gatewayList: [],
				sn:''
			}
		},
		onLoad() {
			// 可以在这里请求网关列表数据
			this.getlist()
		},
		methods: {
			// 获取网关列表
			getlist(){
				let userId = uni.getStorageSync('userId')
				this.$u.get(`/app/device/list?userId=${userId}&classifyCodeList=6`).then((res) => {
					if (res.code == 200) {
						this.gatewayList = res.data
					}
				})
			},
			// 格式化时间
			formatTime(timeStr) {
				if (!timeStr) return '--'
				// 如果时间格式是 "2025-12-20 13:46:28"，直接返回
				if (timeStr.includes(' ')) {
					return timeStr
				}
				// 如果是时间戳，需要转换
				const date = new Date(timeStr)
				if (isNaN(date.getTime())) {
					return timeStr
				}
				const year = date.getFullYear()
				const month = String(date.getMonth() + 1).padStart(2, '0')
				const day = String(date.getDate()).padStart(2, '0')
				const hours = String(date.getHours()).padStart(2, '0')
				const minutes = String(date.getMinutes()).padStart(2, '0')
				const seconds = String(date.getSeconds()).padStart(2, '0')
				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
			},
			// 处理项目点击
			handleItemClick(item) {
				uni.navigateTo({
					url: `/pages/gateway/xq?id=${item.deviceId}`
				})
			},
			// 点击进行扫码
			btnsm(){
				uni.scanCode({
					onlyFromCamera: true,
					scanType: ['qrCode'],
					success: res => {
						console.log(res)
						function getQueryParam(url, paramName) {
							let regex = new RegExp(`[?&]${paramName}=([^&]*)`)
							let results = regex.exec(url)
							return results ? decodeURIComponent(results[1].replace(/\+/g, ' ')) : null
						}
						let sceneValue = res.result
						let decodedValue = decodeURIComponent(sceneValue)
						this.sn = getQueryParam(decodedValue, 's')
						let data = {
							sn:this.sn
						}
						this.$u.post(`/app/device/bindDevice`,data).then((res) => {
							if (res.code == 200) {
							   this.getlist()
							   uni.showToast({
							   	  title: '绑定成功',
							   	  icon: 'success',
								  duration:3000
							   })
							}else{
							  uni.showModal({
							    title: '提示',
							    content: res.msg,
							    showCancel: false,
							    confirmText: '知道了'
							  })
							}
						})
					},
					fail: err => {
						console.error('扫描失败：', err)
						uni.showToast({
							title: '扫描失败',
							icon: 'none'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
		background: linear-gradient(180deg, #F8F9FA 0%, #F0F2F5 100%);
	}
	.saoma{
		width: 680rpx;
		height: 90rpx;
		background-color: #48893B;
		color: #FFFFFF;
		font-size: 32rpx;
		font-weight: 600;
		text-align: center;
		line-height: 90rpx;
		border-radius: 30rpx;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 30rpx;
	}
	.gateway-list {
		padding: 24rpx;
		box-sizing: border-box;
		height: 82vh;
		overflow: scroll;
		.gateway-item {
			background: #FFFFFF;
			border-radius: 24rpx;
			margin-bottom: 24rpx;
			padding: 32rpx;
			box-sizing: border-box;
			box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
			transition: all 0.3s ease;
			&:active {
				transform: scale(0.98);
				box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
			}
			.gateway-header {
				display: flex;
				align-items: center;
				margin-bottom: 24rpx;
				.gateway-icon-wrapper {
					position: relative;
					margin-right: 24rpx;
					flex-shrink: 0;
					.gateway-icon {
						width: 120rpx;
						height: 120rpx;
						border-radius: 20rpx;
						background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
					}
					.status-dot {
						position: absolute;
						top: -4rpx;
						right: -4rpx;
						width: 24rpx;
						height: 24rpx;
						border-radius: 50%;
						border: 4rpx solid #FFFFFF;
						&.status-online-dot {
							background: #15C55D;
							box-shadow: 0 0 12rpx rgba(21, 197, 93, 0.4);
						}
						&.status-offline-dot {
							background: #999999;
						}
					}
				}
				.gateway-main-info {
					flex: 1;
					min-width: 0;
					.gateway-title-row {
						display: flex;
						align-items: center;
						margin-bottom: 12rpx;
						.gateway-title {
							font-size: 36rpx;
							color: #1A1A1A;
							font-weight: 600;
							margin-right: 16rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
						.tag-default {
							display: inline-block;
							padding: 4rpx 12rpx;
							background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
							color: #FFFFFF;
							font-size: 20rpx;
							border-radius: 8rpx;
							font-weight: 500;
							flex-shrink: 0;
						}
					}
					.gateway-model {
						font-size: 26rpx;
						color: #8E8E93;
						font-weight: 400;
					}
				}
				.gateway-status-badge {
					padding: 8rpx 20rpx;
					border-radius: 20rpx;
					font-size: 24rpx;
					font-weight: 500;
					flex-shrink: 0;
					&.status-online {
						background: rgba(21, 197, 93, 0.1);
						color: #15C55D;
					}
					&.status-offline {
						background: rgba(153, 153, 153, 0.1);
						color: #999999;
					}
				}
			}
			.gateway-divider {
				height: 1rpx;
				background: linear-gradient(90deg, transparent 0%, #E5E5E5 20%, #E5E5E5 80%, transparent 100%);
				margin: 24rpx 0;
			}
			.gateway-info-grid {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 24rpx;
				.info-item {
					display: flex;
					flex-direction: column;
					.info-label {
						font-size: 24rpx;
						color: #8E8E93;
						margin-bottom: 8rpx;
						font-weight: 400;
					}
					.info-value {
						font-size: 28rpx;
						color: #1A1A1A;
						font-weight: 500;
						&.voltage-value {
							color: #FF9500;
						}
						&.power-value {
							color: #007AFF;
						}
					}
				}
			}
			.gateway-footer {
				margin-top: 24rpx;
				padding-top: 24rpx;
				border-top: 1rpx solid #F0F2F5;
				.footer-text {
					font-size: 24rpx;
					color: #8E8E93;
				}
			}
		}
		.empty-state {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 120rpx 40rpx;
			.empty-icon {
				width: 200rpx;
				height: 200rpx;
				opacity: 0.3;
				margin-bottom: 32rpx;
			}
			.empty-text {
				font-size: 32rpx;
				color: #8E8E93;
				margin-bottom: 16rpx;
				font-weight: 500;
			}
			.empty-desc {
				font-size: 26rpx;
				color: #C7C7CC;
			}
		}
	}
</style>
