<template>
	<view class="device-detail">
		<app-top-push-notice />
		<view class="bj">
			
		</view>
		<!-- 自定义导航栏 -->
    <view class="tabback" style="background-color: #fff;">
      <view class="rtjt" @click="btnback">{{ $i18n.t('cancel') }}</view>
      <view class="name">{{ $i18n.t('addDevice') }}</view>
			<view style="width: 36rpx;"></view>
		</view>
		
		<view class="" style="background-color: #F3F5F6;">
			<!-- 扫描说明文字 -->
            <view class="scan-tip">
                <text>{{ $i18n.t('tapToScanTip') }}</text>
            </view>
			
			<!-- 扫码按钮区域 -->
			<view class="scan-container">
				<view class="scan-button" @click="scanQRCode">
					<!-- 外框四角 -->
					<view class="outer-corner top-left"></view>
					<view class="outer-corner top-right"></view>
					<view class="outer-corner bottom-left"></view>
					<view class="outer-corner bottom-right"></view>
					<image style="width: 260rpx;height: 260rpx;" src="https://api.ccttiot.com/smartmeter/img/static/u4RbO9t9LQQEsfaua9k2" mode=""></image>
					<!-- 中间扫描框图标 -->
					<!-- <view class="scan-icon">
					</view> -->
				</view> 
			</view>
			<!-- 选项列表 -->
			<view class="options-list">
                <view class="option-item" @click="manualInput">
					<view class="option-icon"><image src="https://api.ccttiot.com/smartmeter/img/static/uqJHqdW3tH8Ijxhwqk7u" mode="aspectFill"></image>️</view>
                    <view class="option-text">{{ $i18n.t('manualInputCode') }}</view>
					<view class="option-arrow">〉</view>
				</view>
				<view class="option-item" @click="btnsousuo">
					<view class="option-icon"><image src="https://api.ccttiot.com/smartmeter/img/static/uqJHqdW3tH8Ijxhwqk7u" mode="aspectFill"></image>️</view>
				    <view class="option-text">{{ $i18n.t('searchNearbyDevicesToBind') }}</view>
					<view class="option-arrow">〉</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isFlashlightOn: false,
				cameraPosition: 'back',
			}
		},
		methods: {
			// 点击跳转搜索附近设备进行绑定
			btnsousuo(){
				uni.navigateTo({
					url:'/pages/luru/bangding'
				})
			},
			// 点击扫码
			scanQRCode() {
				uni.scanCode({
					onlyFromCamera: true,
					scanType: ['qrCode'],
					success: res => {
						console.log(res);
						uni.navigateTo({
							url:'/subpackage/device/deviceaddroom?deviceId=' + res.result
						})
					},
                    fail: err => {
                        console.error('扫描失败：', err)
                        uni.showToast({	
                            title: this.$i18n.t('scanFailed'),
                            icon: 'none'
                        })
                    }
				})
			},
            // 点击返回上一级
			btnback(){
				uni.navigateBack()
			},
			
			// 切换手电筒
            toggleFlashlight() {
				this.isFlashlightOn = !this.isFlashlightOn;
				uni.showToast({
                    title: this.isFlashlightOn ? this.$i18n.t('flashOn') : this.$i18n.t('flashOff'),
					icon: 'none'
				});
			},
			
			// 手动输入代码
			manualInput() {
				uni.navigateTo({
					url:'/subpackage/device/shoudongadd'
				})
			},
			
			// 添加第三方设备
            addThirdParty() {
				uni.showToast({
                    title: this.$i18n.t('thirdPartyFeature'),
					icon: 'none'
				});
			},
			
			// 相机扫描成功
            onScanCode(e) {
				console.log('扫描结果:', e.detail);
				uni.showToast({
                    title: this.$i18n.t('scanSuccess') + ': ' + e.detail.result,
					icon: 'success'
				});
				// 这里可以处理扫描到的二维码数据
			},
			
			// 相机初始化完成
			onCameraInitDone(e) {
				console.log('相机初始化完成');
			},
			
			// 相机错误
            onCameraError(e) {
				console.log('相机错误:', e.detail);
				uni.showToast({
                    title: this.$i18n.t('cameraStartFailed'),
					icon: 'none'
				});
			}
		}
	}
</script>

<style scoped lang="less">
	.bj{
		width: 100%;
		height: 50vh;
		position: fixed;
		top: 0;
		z-index: -1;
		background-color: #0F0F0F;
	}
	.tabback {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 126rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		background-color: #fff; 
		border: 1rpx solid #D8D8D8;
		margin-top: 102rpx;
		border-radius: 30rpx 30rpx 0 0;
		.rtjt {
			font-size: 36rpx;
			color: #333;
		}
		.name {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
		}
	}
	.device-detail {
		min-height: 100vh;
	}
	
	.scan-tip {
		text-align: center;
		padding: 40rpx 20rpx;
		color: #666;
		font-size: 28rpx;
	}
	
	.scan-container {
		display: flex;
		justify-content: center;
		padding: 40rpx 20rpx;
	}
	
	.scan-button {
		width: 400rpx;
		height: 400rpx;
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.3s ease;
		position: relative;
		
		&:active {
			transform: scale(0.98);
			box-shadow: 0 5rpx 20rpx rgba(0, 0, 0, 0.12);
		}
		
		.outer-corner {
			position: absolute;
			width: 80rpx;
			height: 80rpx;
			border: 4rpx solid #999;
			
			&.top-left {
				top: 30rpx;
				left: 30rpx;
				border-right: none;
				border-bottom: none;
			}
			
			&.top-right {
				top: 30rpx;
				right: 30rpx;
				border-left: none;
				border-bottom: none;
			}
			
			&.bottom-left {
				bottom: 30rpx;
				left: 30rpx;
				border-right: none;
				border-top: none;
			}
			
			&.bottom-right {
				bottom: 30rpx;
				right: 30rpx;
				border-left: none;
				border-top: none;
			}
		}
		
		.scan-icon {
			width: 120rpx;
			height: 120rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			
			.qr-frame {
				width: 80rpx;
				height: 80rpx;
				position: relative;
				
				.corner {
					position: absolute;
					width: 20rpx;
					height: 20rpx;
					border: 3rpx solid #999;
					
					&.tl {
						top: 0;
						left: 0;
						border-right: none;
						border-bottom: none;
					}
					
					&.tr {
						top: 0;
						right: 0;
						border-left: none;
						border-bottom: none;
					}
					
					&.bl {
						bottom: 0;
						left: 0;
						border-right: none;
						border-top: none;
					}
					
					&.br {
						bottom: 0;
						right: 0;
						border-left: none;
						border-top: none;
					}
				}
			}
		}
	}
	
	@keyframes scan {
		0% {
			top: 20rpx;
		}
		100% {
			top: 580rpx;
		}
	}
	
	.flashlight-btn {
		display: flex;
		justify-content: center;
		margin: 40rpx 0;
		
		.flashlight-icon {
			width: 120rpx;
			height: 60rpx;
			background-color: #333;
			border-radius: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 32rpx;
			transition: all 0.3s ease;
			
			&.active {
				background-color: #007aff;
				transform: scale(1.1);
			}
			
			.icon {
				font-size: 28rpx;
			}
		}
	}
	
	.options-list {
		padding: 0 20rpx;
		margin-top: 40rpx;
		background-color: #fff;
		.option-item {
			display: flex;
			align-items: center;
			padding: 30rpx 0;
			border-bottom: 1rpx solid #f0f0f0;
			
			.option-icon {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				background-color: #f5f5f5;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 20rpx;
				font-size: 24rpx;
				image{
					width: 64rpx;
					height: 64rpx;
				}
			}
			
			.option-text {
				flex: 1;
				font-size: 32rpx;
				color: #333;
			}
			
			.option-arrow {
				color: #ccc;
				font-size: 32rpx;
			}
		}
	}
</style>