<template>
	<view class="device-detail">
		<!-- 自定义导航栏 -->
		<view class="tabback">
            <view class="rtjt" @click="btnback">←</view>
            <view class="name">{{ $t('setuptitle') }}</view>
			<view style="width: 36rpx;"></view>
		</view>
		<view class="" style="width: 100%;height: 204rpx;"></view>
		<view class="onebox">
			<view class="devicename">
				<view class="xi">
					{{ $t('deviceName') }}
				</view>
				<view class="cu">
					{{ $t('hubDefaultName') }}
				</view>
			</view>
			<view class="room">
				<view class="lt">
					<view class="xi">
						{{ $t('room') }}
					</view>
					<view class="">
						{{ $t('office') }}
					</view>
				</view>
				<view class="rt">
					<image src="https://api.ccttiot.com/smartmeter/img/static/uySh70FcAiX0ip7K2fPO" mode=""></image>
				</view>
			</view>
		</view>
		
		<view class="shuom" style="margin-top: 32rpx;border: 0;" @click="btnytw">
			<view class="lt">
				<image src="https://api.ccttiot.com/lcWLj0tHPDH986a20d18899c29d27b55b05fa1dfe643.png" mode=""></image> {{ $t('ethernet') }}
			</view>
			<image src="https://api.ccttiot.com/smartmeter/img/static/uBGHYzuIqjyZXGHiTT8q" mode=""></image>
		</view>
		<view class="shuom" @click="btnfwwl">
			<view class="lt">
				<image src="https://api.ccttiot.com/vBxWhmIbQpVL233717ad3849204319c2be8da6ed0618.png" mode=""></image> {{ $t('cellularNetwork') }}
			</view>
			<image src="https://api.ccttiot.com/smartmeter/img/static/uBGHYzuIqjyZXGHiTT8q" mode=""></image>
		</view>
		<view class="shuom" @click="btnwifi">
			<view class="lt">
				<image src="https://api.ccttiot.com/IvX2Pn3Osn8d456df53393ee0924017fe07b39847042.png" mode=""></image> {{ $t('wifi') }}
			</view>
			<image src="https://api.ccttiot.com/smartmeter/img/static/uBGHYzuIqjyZXGHiTT8q" mode=""></image>
		</view>
		<view class="shuom" @click="btnjpfwmm">
			<view class="lt">
				<image src="https://api.ccttiot.com/k64I4p2R27iUb5cdf675495b15571c60ff60c5991356.png" mode=""></image> {{ $t('keypadAccessPassword') }}
			</view>
			<image src="https://api.ccttiot.com/smartmeter/img/static/uBGHYzuIqjyZXGHiTT8q" mode=""></image>
		</view>
		<view class="shuom" @click="btnqycs"> 
			<view class="lt">
				<image src="https://api.ccttiot.com/T7zQtKaIM0PV0ab9c56b05ba3b2ca433974e60f60b80.png" mode=""></image> {{ $t('zoneTest') }}
			</view>
			<image src="https://api.ccttiot.com/smartmeter/img/static/uBGHYzuIqjyZXGHiTT8q" mode=""></image>
		</view>
		<view class="shuom" @click="btnmk">
			<view class="lt">
				<image src="https://api.ccttiot.com/mYHvlMDEiSYD7cde1bd0781ccda3b01f14d10680dd95.png" mode=""></image> {{ $t('modules') }}
			</view>
			<image src="https://api.ccttiot.com/smartmeter/img/static/uBGHYzuIqjyZXGHiTT8q" mode=""></image>
		</view>
		<view class="shuom" @click="btnsz">
			<view class="lt">
				<image src="https://api.ccttiot.com/9A0SuBLyi9SIafb908798799d1231292a76aea30a566.png" mode=""></image> {{ $t('setuptitle') }}
			</view>
			<image src="https://api.ccttiot.com/smartmeter/img/static/uBGHYzuIqjyZXGHiTT8q" mode=""></image>
		</view>
		<view class="shuom" @click="btnsyzn">
			<view class="lt">
				<image src="https://api.ccttiot.com/sAC6VB9h55udc24e383162d9d29f09814cd1ed420c1c.png" mode=""></image> {{ $t('userGuide') }}
			</view>
			<image src="https://api.ccttiot.com/smartmeter/img/static/uBGHYzuIqjyZXGHiTT8q" mode=""></image>
		</view>
		
		<view class="anniu" @click="btnjb">
			{{ $t('deldev') }}
		</view>
	</view>
</template>

<script>
import i18n from '@/common/i18n/index.js'
	export default {
		data() {
			return {
				id:'',
				xqobj:{},
				fwqflag:true,
				accelValue:0,
				accelValues:0,
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getxq()
		},
		methods: {
			// 进行设备详情请求
			getxq(){
				this.$http.get(`/bst/device/detail?id=${this.id}`).then(res => {
					if(res.code == 200){
						this.xqobj = res.data
					}
				})
			},
			btnjb(){
				// 显示确认解绑弹窗
				uni.showModal({
					title: this.$i18n.t('tip'),
					content: this.$i18n.t('confirmDeleteDeviceContent'),
					confirmText: this.$i18n.t('confirm'),
					cancelText: this.$i18n.t('cancel'),
					success: (res) => {
						if (res.confirm) {
							// 用户确认删除，执行删除操作
							this.performDelete()
						}
					}
				})
			},
			// 点击解绑设备
			performDelete(){
				let data = {
					deviceId:this.id
				}
				this.$http.put(`/bst/device/unbind`,data).then(res => {
					if(res.code == 200){
						uni.showToast({
							title: res.msg,
							icon: 'success',
							duration:5000
						})
						setTimeout(()=>{
							uni.reLaunch({
								url:'/pages/index/index'
							})
						},1000)
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration:5000
						})
					}
				})
			},
			$t(key) {
				return i18n.t(key)
			},
            // 点击返回上一级
			btnback(){
				uni.navigateBack()
			},
			// 点击以太网进行跳转
			btnytw(){
				uni.navigateTo({
					url:'/pages/device/hubytw'
				})
			},
			// 点击蜂窝网络进行跳转
			btnfwwl(){
				uni.navigateTo({
					url:'/pages/hubjihe/hubfwwl' 
				})
			},
			// 点击wifi进行跳转
			btnwifi(){
				if(!this.xqobj.mac){
					uni.showToast({
						title: 'MAC地址不存在',
						icon: 'none'
					})
					return
				}
				uni.navigateTo({
					url:'/pages/device/addhubwifi?mac=' + this.xqobj.mac
				})
				// uni.navigateTo({
				// 	url:'/pages/hubjihe/hubwifi'
				// })
			},
			// 点击键盘访问密码进行跳转
			btnjpfwmm(){
				
			},
			// 点击区域测试进行跳转
			btnqycs(){
				
			},
			// 点击模块进行跳转
			btnmk(){
				
			},
			// 点击设置进行跳转
			btnsz(){
				
			},
			// 点击使用指南进行跳转
			btnsyzn(){
				
			}
		}
	}
</script>

<style scoped lang="less">
	.anniu{
		width: 750rpx;
		height: 118rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		font-size: 36rpx;
		color: #FF5353;
		text-align: center;
		line-height: 118rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 999;
		box-shadow: 0rpx 20rpx 26rpx 4rpx #000;
	}
	.shuom{
		width: 750rpx;
		height: 128rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 32rpx;
		box-sizing: border-box;
		border-top: 1px solid #D8D8D8;
		.lt{
			display: flex;
			align-items: center;
			image{
				width: 80rpx;
				height: 80rpx;
				margin-right: 40rpx;
			}
		}
		image{
			width: 56rpx;
			height: 56rpx;
		}
	}
	.onebox{
		width: 750rpx;
		height: 288rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		margin-top: 32rpx;
		.devicename{
			padding: 24rpx 32rpx;
			box-sizing: border-box;
			border-bottom: 1px solid #D8D8D8;
			.xi{
				font-size: 28rpx;
				color: #7F7F7F;
			}
			.cu{
				font-size: 32rpx;
				color: #3D3D3D;
				margin-top: 10rpx;
				border-bottom: 1px solid #D8D8D8;
				padding-bottom: 18rpx;
				box-sizing: border-box;
			}
		}
		.room{
			padding: 18rpx 32rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 18rpx;
			.lt{
				.xi{
					font-size: 28rpx;
					color: #7F7F7F;
				}
				.cu{
					font-size: 32rpx;
					color: #3D3D3D;
					margin-top: 10rpx;
				}
			}
			.rt{
				image{
					width: 28rpx;
					height: 42rpx;
				}
			}
		}
	}
	.tabback{
		width: 750rpx;
		height: 204rpx;
		background: #FCFCFC;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 28rpx;
		box-sizing: border-box;
		border-bottom: 1px solid #D8D8D8;
		padding-top: 52rpx;
		z-index: 999;
		.name{
			font-size: 36rpx;
			color: #3D3D3D;
		}
		.rtjt {
			font-size: 36rpx;
		}
	}
	.device-detail{
		background-color: #F3F5F6;
		height: 100vh;
		overflow: scroll;
		padding-bottom: 186rpx;
		box-sizing: border-box;
	}
	
</style>