<template>
	<view class="maincontent contentBg">

		<uni-nav-bar :border="false" @clickLeft="prevPage" fixed="true" statusBar="true" background-color="#121212"
			color="#FFFFFF" :title="Status.navbar.title">
			<template v-slot:left>
				<view>
					<uni-icons type="left" size="24" color="#FFFFFF"></uni-icons>
				</view>
			</template>
			<block slot="right">
				<view class="navbarRight center">
					<image @click.stop="handleRightClick(index,item)" v-for="item,index in Status.navbar.icons"
						class="img" :src="item.src" mode="aspectFit"></image>
				</view>

			</block>
		</uni-nav-bar>

		<view class="eq" :style="{marginTop:Status.navbar.height+'px'}">
			<view class="leftImg" @click.stop="previewImg(device.devicePic?device.devicePic:formData.img)">
				<image class="img" :src="device.devicePic?device.devicePic:formData.img" mode="aspectFit"></image>
			</view>
			<view class="rightTxt">
				<view class="row">
					<image class="img" src="/static/images/common/battry.png" mode="aspectFit"></image>
					<view class="txt">
						<view class="bigTxt">{{formData.battary}}%</view>
						<view class="smallTxt">电量</view>
					</view>
				</view>
				<view class="row">
					<image class="img" src="/static/images/common/time.png" mode="aspectFit"></image>
					<view class="txt">
						<view class="bigTxt">{{formData.xuhang}}</view>
						<view class="smallTxt">续航时间</view>
					</view>
				</view>
			</view>
		</view>
		<view class="eqinfo">
			<view class="item">
				<text class="lbl">设备名称</text>
				<text class="value valueFont">{{device.deviceName}}</text>
			</view>


			<view class="item">
				<text class="lbl">Mac地址</text>
				<text class="value">{{device.deviceMac}}</text>
			</view>
			<view class="item">
				<text class="lbl">蓝牙名称</text>
				<text class="value valueFont">{{device.bluetoothName}}</text>
			</view>

			<view class="item">
				<text class="lbl">设备状态</text>
				<text class="value valueFont">{{formData.sta_system}}</text>
			</view>
			<view class="item" @click.top="bleStatuToggle">
				<text class="lbl">蓝牙状态</text>
				<text class="value" :class="formData.bleStatu?'green':'red'">{{getbleStatu}}</text>
			</view>
			<view class="item">
				<text class="lbl">信道:{{formData.sta_Channel}}</text>
				<text class="value green" @click.stop="ShowChannelEdit()">修改</text>
			</view>
		</view>


		<view class="lampMode">
			<view class="mode type " :class="{'active':formData.sta_Ms=='M'}" @click.stop="MsSetting('M')">
				<view class="txt center">M</view>
			</view>
			<view class="mode type" :class="{'active':formData.sta_Ms=='S'}" @click.stop="MsSetting('S')">
				<view class="txt center">S</view>
			</view>
		</view>

		<view class="optTitle">
			开关模式
		</view>
		<view class="btn-container">
			<view class="btn" @click.stop="btnSetting(0,'warnSwitch')" :class="{'active':Status.warnSwitch==0}">总开关
			</view>
			<view class="btn" @click.stop="btnSetting(-1,'warnSwitch')" :class="{'active':Status.warnSwitch==-1}">左侧
			</view>
			<view class="btn" @click.stop="btnSetting(1,'warnSwitch')" :class="{'active':Status.warnSwitch==1}">右侧
			</view>
		</view>
		<view class="lampMode">

			<view class="mode " :class="getSwitchActive(item,index,'warn')" v-for="item,index in dic.warLight"
				v-on:click.stop="lightsetting(item,index,'warn')">
				<view class="leftImg">

					<image class="img image" :src="item.img" mode="aspectFit"></image>
					<image class="img imageA" :src="item.imgA" mode="aspectFit"></image>
				</view>
				<view class="rightTxt">
					<text class="bigTxt">{{item.text}}</text>

				</view>
			</view>

		</view>


		<view class="optTitle">
			泛光灯
		</view>
		<view class="btn-container">
			<view class="btn" @click.stop="btnSetting(0,'fanSwitch')" :class="{'active':Status.fanSwitch==0}">前置</view>
			<view class="btn" @click.stop="btnSetting(-1,'fanSwitch')" :class="{'active':Status.fanSwitch==-1}">左侧
			</view>
			<view class="btn" @click.stop="btnSetting(1,'fanSwitch')" :class="{'active':Status.fanSwitch==1}">右侧</view>
		</view>

		<view class="fanMode">
			<view class="fanItem" :class="getSwitchActive(item,index,'fan')" v-for="item,index in dic.fanLight"
				v-on:click.stop="lightsetting(item,index,'fan')">
				<view class="topImg">

					<image class="img image" :src="item.img" mode="aspectFit"></image>
					<image class="img imageA" :src="item.imgA" mode="aspectFit"></image>
				</view>
				<view class="bottomTxt">
					<text class="bigTxt">{{item.text}}</text>

				</view>
			</view>
		</view>


		<ProParams :id="device.id"></ProParams>

		<MsgBox ref="msgPop" />

		<global-loading ref="loading" />

		<MsgBox ref="msgEditChannel">
			<view class="popup-prompt">
				<text class="popup-prompt-title">修改信道</text>
				<input class="popup-prompt-input" type="number" placeholder="大于0的整数"
					placeholder-class="popup-prompt-input-placeHolder" v-model="formData.tmp_Channel" />

			</view>
		</MsgBox>
	</view>
</template>

<script>
	import request from '@/utils/request.js';
	import {
		showLoading,
		hideLoading,
		updateLoading
	} from '@/utils/loading.js';

	import {
		MsgSuccess,
		MsgError,
		MsgClose,
		MsgWarning,
		showPop,
		MsgInfo,
		MsgPrompt
	} from '@/utils/MsgPops.js'
	import Common from '@/utils/Common.js';
	import BleTool from '@/utils/BleHelper.js'
	import BleReceive from '@/utils/BleReceive';


	var eventChannel = null;
	var these = null;
	var ble = null;
	var recei = null;
	var mq = null;
	var pagePath = "pages/008A/HBY008A";

	export default {
		data() {
			return {
				Status: {
					msgOkIntval: null, //紧急通知等待的时间
					msgOkTime: null, //
					pageHide: false,
					apiType: "listA",
					navbar: {
						icons: [{
								type: 'msg',
								src: '/static/images/common/msg.png'
							},
							{
								type: 'share',
								src: '/static/images/common/shape.png'
							}
						],
						title: 'HBY008A',
						showBack: true,
						height: 90
					},
					usrToggle: true,
					bleLinkCnt: 0,
					warnSwitch: 0,
					fanSwitch: 0
				},
				formData: {
					img: '/static/images/common/HBY008A.png',
					deviceId: "",
					sta_leftLight: null,
					sta_rightLight: null,
					sta_frontFan: null,
					sta_leftFan: null,
					sta_rightFan: null,
					sta_channel: null,
					sta_Ms: 'S',
					sta_PowerPercent: null,
					sta_PowerTime: null,
					sta_system: null,
					bleStatu: null,
					tmp_Channel: null
				},
				device: {
					id: "",
					deviceName: "",
					deviceImei: "",
					deviceMac: "",
					communicationMode: 0,
					devicePic: "",
					typeName: "",
					bluetoothName: null,
					deviceStatus: null,
					bindingTime: "",
					onlineStatus: 0,
					battery: "0",
					latitude: null,
					longitude: null,
					alarmStatus: null,
					detailPageUrl: "/pages/670/HBY670",
					showConfirm: false
				},
				dic: {
					fanLight: [{
							text: '强光',
							value: 1,
							img: '/static/images/lightImg/qiang.png',
							imgA: '/static/images/lightImg/qiangActive.png',
						},
						{
							text: '工作光',
							value: 2,
							img: '/static/images/lightImg/work.png',
							imgA: '/static/images/lightImg/workActive.png',
						},
						{
							text: '爆闪',
							value: 4,
							img: '/static/images/lightImg/light.png',
							imgA: '/static/images/lightImg/lightActive.png',
						}
					],
					warLight: [{
							text: '红色长亮',
							value: 1,
							img: '/static/images/lightImg/liting.png',
							imgA: '/static/images/lightImg/litingActive.png',
						},
						{
							text: '红色爆闪',
							value: 2,
							img: '/static/images/lightImg/light.png',
							imgA: '/static/images/lightImg/lightActive.png',
						},
						{
							text: '红蓝双闪',
							value: 3,
							img: '/static/images/lightImg/rb.png',
							imgA: '/static/images/lightImg/rbActive.png',
						},
						{
							text: '黄色长亮',
							value: 4,
							img: '/static/images/lightImg/liting.png',
							imgA: '/static/images/lightImg/litingActive.png',
						},
						{
							text: '黄色爆闪',
							value: 5,
							img: '/static/images/lightImg/light.png',
							imgA: '/static/images/lightImg/lightActive.png',
						}
					]
				},
				permissions: []

			}
		},
		computed: {
			getbleStatu() {
				if (this.formData.bleStatu === true) {
					return '已连接';
				}
				if (this.formData.bleStatu === 'connecting') {
					return '连接中';
				}
				if (this.formData.bleStatu === 'dicconnect') {
					return '正在断开';
				}
				if (this.formData.bleStatu === 'err') {
					return '连接异常';
				}
				return '未连接';
			}
		},
		created() {
			this.Status.navbar.height = uni.getSystemInfoSync().statusBarHeight + 44;
		},
		onUnload() {
			console.log("页面卸载,释放资源");
			let statusTopic = `A/${this.formData.imei?this.formData.imei:this.device.deviceImei}`;
			if (ble) {
				ble.removeAllCallback(pagePath);
				ble.removeReceiveCallback(pagePath);
			}

			if (mq) {
				mq.unsubscribe(statusTopic);
				mq.disconnect();
				mq = null;
			}

		},
		onShow() {
			this.Status.pageHide = false;
		},
		onHide: function() {
			this.Status.pageHide = true;
		},

		onLoad() {

			these = this;
			recei = BleReceive.getBleReceive();
			ble = BleTool.getBleTool();


			ble.addReceiveCallback(these.bleValueNotify, pagePath);
			ble.addStateBreakCallback(these.bleStateBreak, pagePath);
			ble.addStateRecoveryCallback(these.bleStateRecovry, pagePath);
			ble.addDisposeCallback(these.deviceDispose, pagePath);
			ble.addRecoveryCallback(these.deviceRecovry, pagePath);

			eventChannel = this.getOpenerEventChannel();

			eventChannel.on('detailData', (data) => {

				console.log("收到父页面的参数：" + JSON.stringify(data));
				var device = data.data;
				these.Status.apiType = data.apiType;
				these.device = device;


				these.formData.usrid = device.deviceImei;
				if (data.apiType !== 'listA') {
					Common.getdeviceShareId(data.data.id).then(res => {
						if (res.code == 200) {
							if (res.data.permission) {
								these.permissions = res.data.permission.split(',');
							}
						}
					});
				}

				let f = ble.data.LinkedList.find((v) => {
					if (v.macAddress == device.deviceMac) {
						console.log("找到设备了", v);
						these.formData.deviceId = v.deviceId;
						return true;
					}
					if(v.device){
						if(v.device.id==device.id){
							these.formData.deviceId = v.deviceId;
							return true;
						}
					}
					return false;
				});
				if (!f) {
					these.showBleUnConnect();

					return;
				}
				let form = f.formData;
				if (form) {
					let keys = Object.keys(form);
					for (var i = keys.length; i >= 0; i--) {
						let key = keys[i];

						these.formData[key] = form[key];
					}
				}



				these.formData.bleStatu = 'connecting';
				ble.LinkBlue(f.deviceId, f.writeServiceId, f.wirteCharactId, f.notifyCharactId).then(res => {
					these.formData.bleStatu = true;
				}).catch(ex => {
					these.formData.bleStatu = 'err';
					MsgError("连接错误:" + ex.msg, "确定", these);
				});
			});


		},
		methods: {
			btnSetting(val, type) {
				if (this.Status[type] == val) {
					return;
				}
				this.Status[type] = val;
			},
			MsSetting(type) {
				let f = this.getDevice();

				if (!f) {
					this.showBleUnConnect();
					return;
				}

				let json = {
					ins_Ms: type
				};
				ble.sendString(f.deviceId, json).then(res => {
					MsgSuccess("发送设置指令成功,等待设备响应", '', this, null, false);
				}).catch(ex => {
					MsgError(ex.msg, '', this, null, false);
				});
			},
			ShowChannelEdit() {
				if (!this.permissions.includes('55') && this.Status.apiType !== 'listA') {
					MsgError("无操作权限", '', this, null, false);
					return;
				}

				let f = this.getDevice();

				if (!f) {
					this.showBleUnConnect();
					return;
				}

				MsgPrompt(this, 'msgEditChannel', () => {
					let json = {
						ins_channel: this.formData.tmp_Channel
					};
					ble.sendString(f.deviceId, json).then(res => {
						MsgSuccess("发送设置指令成功,等待设备响应", '', this, null, false);
					}).catch(ex => {
						MsgError(ex.msg, '', this, null, false);
					});
				}, true, true);

			},
			lightsetting(item, index, type) {
				debugger;
				if (!this.permissions.includes('1') && this.Status.apiType !== 'listA') {
					MsgError("无操作权限", '', this, null, false);
					return;
				}
				let f = this.getDevice();
				if (!f) {
					this.showBleUnConnect();
					return;
				}

				let key = type == 'warn' ? 'warnSwitch' : 'fanSwitch'
				let json = {};
				switch (this.Status[key]) {
					case -1: //左
						if (type == 'warn') {
							if (this.formData.sta_leftLight == item.value) {
								json.ins_leftLight = 0;
							} else {
								json.ins_leftLight = item.value;
							}
						} else {
							if (this.formData.sta_leftFan == item.value) {
								json.ins_leftFan = 0;
							} else {
								json.ins_leftFan = item.value;
							}
						}


						break;

					case 0: //总开关
						if (type == 'warn') {
							if (this.formData.sta_leftLight == item.value && this.formData.sta_rightLight == item.value) {
								json.ins_leftLight = 0;
								json.ins_rightLight = 0;
							} else {
								json.ins_leftLight = item.value;
								json.ins_rightLight = item.value;
							}
						} else {
							if (this.formData.sta_leftFan == item.value && this.formData.sta_rightFan == item.value) {
								json.ins_frontFan = 0;

							} else {
								json.ins_frontFan = item.value;

							}
						}
						break;

					case 1: //右
						if (type == 'warn') {
							if (this.formData.sta_rightLight == item.value) {
								json.ins_rightLight = 0;
							} else {
								json.ins_rightLight = item.value;
							}
						} else {
							if (this.formData.sta_rightFan == item.value) {
								json.ins_rightFan = 0;
							} else {
								json.ins_rightFan = item.value;
							}
						}
						break;
				}

				ble.sendString(f.deviceId, json).then(res => {
					let keys = Object.keys(json);
					for (let i = 0; i < keys.length; i++) {
						let val = json[keys[i]];
						let key = keys[i].replace('ins_', 'sta_');
						this.formData[key] = val;
					}
				}).catch(ex => {
					MsgError(ex.msg, '', this, null, false);
				});

			},
			getSwitchActive(item, index, type) {

				let flag = false;
				let key = type == 'warn' ? 'warnSwitch' : 'fanSwitch'

				switch (this.Status[key]) {
					case -1: //左

						if (key == 'warnSwitch') {
							flag = this.formData.sta_leftLight == item.value;
						} else {
							flag = this.formData.sta_leftFan == item.value;
						}
						break;
					case 0: //总开关
						if (key == 'warnSwitch') {
							flag = this.formData.sta_leftLight == item.value && this.formData.sta_rightLight == item.value;
						} else {
							flag = this.formData.sta_frontFan == item.value;
						}
						break;
					case 1: //右
						if (key == 'warnSwitch') {
							flag = this.formData.sta_rightLight == item.value;
						} else {
							flag = this.formData.sta_rightFan == item.value;
						}
						break;
				}
				if (flag) {
					return 'active';
				}
				return '';
			},
		
			bleStatuToggle() {
				let f = this.getDevice();
				if (!f) {
					this.showBleUnConnect();
					return;
				}
				if (this.formData.bleStatu === true) {
					this.formData.bleStatu = 'dicconnect';
					ble.disconnectDevice(f.deviceId).finally(r => {
						this.formData.bleStatu = false;
					});
					return;
				}

				if (this.formData.bleStatu === false || this.formData.bleStatu === 'err') {
					this.formData.bleStatu = 'connecting';
					ble.LinkBlue(f.deviceId, f.writeServiceId, f.wirteCharactId, f.notifyCharactId).then(res => {
						these.formData.bleStatu = true;
					}).catch(ex => {
						these.formData.bleStatu = 'err';
						MsgError("连接错误:" + ex.msg, "确定", these);
					});
					return;
				}


			},
			getDevice: function() {
				
				let f = ble.data.LinkedList.find((v) => {
					let flag=v.macAddress == these.device.deviceMac ;
					if(!flag && v.device){
						flag= v.device.id==these.device.id;						
					}
					if(flag){
						these.formData.deviceId = v.deviceId;
					}
					return flag;
				});
				
				// #ifdef WEB
				f = {
					deviceId: '123'
				}
				// #endif
				
				return f;
			},
			showBleUnConnect() {
				MsgError("蓝牙未连接过该设备,请使用蓝牙重新添加该设备", "去连接", these, () => {
					uni.navigateTo({
						url: "/pages/common/addBLE/addEquip",
						events: {
							BindOver: function(data) {
								console.log(data)
								these.formData.bleStatu = true;
							}
						},
						success: function(res) {
							// 通过eventChannel向被打开页面传送数据
							res.eventChannel.emit('detailData', {
								data: these.device
							})
						},
						fail(ex) {
							console.log("跳转失败", ex);
						}
					})

				})

			},

			bleValueNotify: function(receive, device, path, recArr) { //订阅消息
				if (receive.deviceId !== this.formData.deviceId) {
					return;
				}
				let data = recei.ReceiveData(receive, device, pagePath, recArr);
				console.log("蓝牙收到消息", data)
				this.receivData(data);
			},
			receivData(data) { //处理蓝牙/MQ的数据
				let keys = Object.keys(data);
				keys.forEach(key => {
					this.formData[key] = data[key];
				});
				this.setBleFormData();
			},
			setBleFormData() {
				let f = ble.data.LinkedList.find((v) => {
					if (v.deviceId == these.formData.deviceId) {
						v.formData = these.formData;

						return true;
					}
					return false;
				});
				if (f) {
					uni.setStorageSync(ble.StorageKey, ble.data.LinkedList);
				}

			},
			deviceRecovry(res) {
				if (this.Status.pageHide) {
					return;
				}
				if (res.deviceId == these.formData.deviceId) {
					this.formData.bleStatu = true;

				}

			},
			deviceDispose(res) {
				if (this.Status.pageHide) {
					return;
				}
				if (res.deviceId == these.formData.deviceId) {
					if (res.device) {
						these.formData.bleStatu = 'connecting';
					} else {
						this.formData.bleStatu = false;
					}
					setTimeout(() => {
						hideLoading(these, 1000);
					});
					uni.showToast({
						icon: 'fail',
						title: '蓝牙连接已断开'
					});
				}

			},
			bleStateBreak() {
				if (this.Status.pageHide) {
					return;
				}
				//蓝牙适配器不可用
				this.formData.bleStatu = false;
				uni.showToast({
					icon: 'fail',
					title: '蓝牙已不可用'
				})
				hideLoading(this);
			},
			bleStateRecovry() {
				console.log("蓝牙可用");
				if (this.Status.pageHide) {
					return;
				}
				console.log("蓝牙可用");
				//蓝牙适配器再次可用,尝试恢复连接
				showLoading(this, {
					text: "蓝牙恢复可用,正在连接设备"
				});
				this.formData.bleStatu = 'connecting';
				ble.LinkBlue(these.formData.deviceId).then(() => {
					these.formData.bleStatu = true;
					updateLoading(these, {
						text: '连接成功'
					});
				}).catch(ex => {
					updateLoading(these, {
						text: ex.msg
					})
					these.formData.bleStatu = 'err';
					MsgError("连接错误:" + ex.msg, "确定", these);
				}).finally(() => {
					setTimeout(() => {
						hideLoading(these);
					}, 1000);

				});
			},

			prevPage() {
				uni.navigateBack({

				});
			},
			handleRightClick: function(s, e) {

				if (s === 0) {

					return;
				} else if (s === 1) {
					console.log("分享");
					uni.navigateTo({
						url: '/pages/common/share/index',
						events: {
							ack: function(data) {}
						},
						success: (res) => {
							let json = {
								persissonType: '6075'
							};
							Object.assign(json, this.device);
							res.eventChannel.emit('share', {
								data: json
							});
						}
					})
				}
			},

		}
	}
</script>

<style>
	.content {
		padding: 30rpx;
		box-sizing: border-box;
	}

	.eq {
		width: 100%;
		height: 250rpx;
		border-radius: 8px;
		background: rgba(26, 26, 26, 1);
		box-sizing: border-box;
		padding: 24rpx 28rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		justify-content: center;
		align-items: center;
		margin-bottom: 24rpx;
	}

	.eq .leftImg {
		box-sizing: border-box;
		padding: 36rpx;
		border-radius: 16rpx;
		background: rgba(42, 42, 42, 0.5);
	}

	.eq .leftImg,
	.eq .rightTxt {
		width: 50%;
		height: 100%;
	}

	.eq .rightTxt {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		align-content: flex-start;
		justify-content: space-evenly;
		align-items: flex-start;
	}

	.eq .leftImg .img {
		width: 100%;
		height: 100%;
	}

	.eq .rightTxt .img {
		width: 52rpx;
		height: 52rpx;
	}

	.eq .rightTxt .row {
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		justify-content: flex-start;
		align-items: center;
		box-sizing: border-box;
		padding-left: 50rpx;
	}

	.eq .rightTxt .row .txt {
		padding-left: 20rpx;
	}

	.eq .bigTxt {
		color: rgba(255, 255, 255, 0.87);
		font-family: PingFang SC;
		font-size: 28rpx;
		font-weight: 400;
	}

	.eq .smallTxt {
		color: rgba(255, 255, 255, 0.6);
		font-family: PingFang SC;
		font-size: 24rpx;
		font-weight: 400;
	}


	.eqinfo {
		border-radius: 16rpx;
		background: rgba(26, 26, 26, 1);
		box-sizing: border-box;
		padding: 14rpx 0rpx;
	}

	.eqinfo .item {
		width: 100%;
		min-height: 60rpx;
		height: auto;
		line-height: 60rpx;
		padding: 0rpx 28rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		justify-content: space-between;
		align-items: center;
	}

	.eqinfo .lbl {
		color: rgba(255, 255, 255, 0.87);
		font-family: PingFang SC;
		font-size: 28rpx;
		font-weight: 400;
		width: 140rpx;
		letter-spacing: 0.07px;
		text-align: left;
	}

	.eqinfo .value {
		color: rgba(255, 255, 255, 0.6);
		font-family: 'PingFang SC';
		font-size: 28rpx !important;
		font-weight: 400;

		letter-spacing: 0.07px;
		text-align: left;
	}


	.eqinfo .valueFont {
		font-family: 'PingFang SC';
		font-size: 28rpx !important;
		font-weight: 400;
		color: rgba(255, 255, 255, 0.6);
	}

	.eqinfo .multiValue {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		align-content: flex-end;
		align-items: flex-end;
		justify-content: flex-start;
		width: calc(100% - 140rpx)
	}

	.eqinfo .valueItem {
		height: auto;
		line-height: 40rpx;
		color: rgba(255, 255, 255, 0.6);
		font-family: PingFang SC;
		font-size: 14px;
		font-weight: 400;
		letter-spacing: 0.07px;
	}

	.lamp {
		margin-top: 24rpx;
	}

	.lamp .title {
		width: 100%;
		height: 60rpx;
		line-height: 60rpx;
		padding: 0rpx 28rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
	}

	.lampMode {
		padding: 0rpx 0rpx;
		width: 100%;
		box-sizing: border-box;
		display: flex;
		align-content: space-around;
		justify-content: space-between;
		align-items: center;
		justify-items: stretch;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.lampMode .mode {
		width: calc(calc(100% - 34rpx) / 2);
		border-radius: 8px;
		margin-top: 20rpx;
		background: rgba(26, 26, 26, 1);
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		align-items: center;
		justify-content: flex-start;
		padding: 30rpx;
		box-sizing: border-box;
		border: 0.5px solid #00000000;
		height: 140rpx;
	}

	.lampMode .mode.active {

		border: 1rpx solid rgba(174, 214, 0, 1);
	}

	.lampMode .mode.active .bigTxt {

		color: rgba(174, 214, 0, 1) !important;
	}

	.lampMode .type {
		border-radius: 75rpx !important;
		box-sizing: border-box;
		border-style: solid;
		border-width: 5rpx;
		border-color: #00000000;
		padding: 5rpx;
		height:130rpx !important;
	}

	.lampMode .type .txt {
		color: rgba(255, 255, 255, 0.5);
		background-color: #00000000;
		font-family: "PingFang SC";
		font-size: 50rpx;
		font-weight: 400;
		width: 100%;
		height: 100%;
		border-radius: 70rpx;
	}

	.lampMode .type.active {
		border-color: #AED600 !important;
	}

	.lampMode .type.active .txt {
		background-color: #AED600 !important;
		color: rgba(26, 26, 26, 1) !important;
	}

	.lampMode .mode.active:not(.type) {

		border: 1rpx solid rgba(174, 214, 0, 1) !important;
	}

	.lampMode .mode.active .bigTxt {

		color: rgba(174, 214, 0, 1) !important;
	}

	.mode.marginLeft {
		margin-left: 34rpx !important;
	}

	.mode .leftImg {
		width: 70rpx;
		height: 70rpx;
		border-radius: 4px;
		background: rgba(255, 255, 255, 0.06);
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		justify-content: center;
		align-items: center;
	}

	.mode .leftImg .img {
		width: 40rpx;
		height: 40rpx;
	}

	.mode .imageA {
		display: none;
	}

	.mode.active .image {
		display: none !important;
	}

	.mode.active .imageA {
		display: block !important;
	}

	.mode .rightTxt {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		align-content: flex-start;
		justify-content: center;
		align-items: flex-start;
		padding-left: 20rpx;
	}

	.mode .bigTxt {
		color: rgba(255, 255, 255, 0.87);
		font-family: PingFang SC;
		font-size: 28rpx;
		font-weight: 400;

		letter-spacing: 0.07px;

	}

	.mode .smallTxt {
		color: rgba(255, 255, 255, 0.6);
		font-family: PingFang SC;
		font-size: 24rpx;
		font-weight: 400;

		letter-spacing: 0.07px;

	}

	.usrinfo {
		border-radius: 8px;
		width: 100%;
		box-sizing: border-box;
		padding: 24rpx 28rpx;
		background: rgba(26, 26, 26, 1);
		margin-bottom: 20rpx;
	}

	.usrtitle {
		color: rgba(255, 255, 255, 0.87);
		font-family: PingFang SC;
		font-size: 28rpx;
		font-weight: 400;
		height: 40rpx;
		line-height: 40rpx;
		letter-spacing: 0.07px;

	}

	.usrinfo .btnSend {
		line-height: 65rpx;
		border-radius: 8px;
		width: 120rpx;
		height: 65rpx;
		color: rgba(35, 35, 35, 0.87);
		font-family: PingFang SC;
		font-size: 24rpx;
		font-weight: 400;
		letter-spacing: 0.15rpx;
		text-align: center;
		background-color: #BBE600;
	}

	.usrinfo .item {
		border-radius: 8px;
		width: 100%;
		box-sizing: border-box;
		line-height: 90rpx;
		height: 90rpx;
		background: rgba(42, 42, 42, 1);
		margin-top: 24rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		justify-content: flex-start;
		align-items: center;
	}

	.usrinfo .lbl {
		width: 120rpx;
		height: 100%;
		padding-left: 24rpx;
		box-sizing: border-box;

		text-align: right;

		color: rgba(255, 255, 255, 0.87);
		font-family: PingFang SC;
		font-size: 28rpx;
		font-weight: 400;

		letter-spacing: 0.07px;

	}

	.usrinfo .value {
		width: calc(100% - 120rpx);
		height: 100%;

		font-size: 28rpx;
		font-weight: 400;

		letter-spacing: 0.07px;
		text-align: left;

	}

	.usrinfo .value .uni-input-input {
		color: rgba(255, 255, 255, 0.87);
		font-family: PingFang SC;

	}


	.usrplace {
		color: rgba(255, 255, 255, 0.4);
		font-family: PingFang SC;
		font-size: 28rpx;
		font-weight: 400;
		letter-spacing: 0.07px;
		text-align: left;
	}

	.proinfo .itemcontent {
		display: flex;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		justify-content: space-evenly;
	}

	.proinfo .item {
		width: 180rpx;
		height: 180rpx;
		box-sizing: border-box;
		padding: 40rpx;
		border-radius: 16rpx;
		background: rgba(26, 26, 26, 1);
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		align-content: center;
		justify-content: center;
		align-items: center;
	}

	.proinfo .item .img {
		width: 50rpx;
		height: 50rpx;


	}

	.proinfo .item .txt {
		color: rgba(255, 255, 255, 0.6);
		font-family: PingFang SC;
		font-size: 24rpx;
		font-weight: 400;
		margin-top: 20rpx;
		letter-spacing: 0.07px;
		text-align: left;
	}


	.slider-container {
		padding: 0px;
	}




	.addIco {
		width: 100%;
		height: 360rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		justify-content: center;
		align-items: center;
	}

	.icoContent {
		width: 240rpx;
		height: 240rpx;
		border-radius: 8rpx;


		background: rgba(58, 58, 58, 1);
	}

	.icoContent .img {
		width: 70rpx;
		height: 70rpx;
	}

	.modeSetting {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		justify-content: space-around;
		align-items: center;
		border-radius: 8px;
		background: rgba(26, 26, 26, 1);
		box-sizing: border-box;
		padding: 30rpx 0rpx;
	}

	.modeSetting .item {
		width: 120rpx;
		height: 120rpx;
		background: rgba(42, 42, 42, 1);
		border-radius: 50%;

		color: rgba(255, 255, 255, 0.87);

		font-family: PingFang SC;
		font-size: 28rpx;
		font-weight: 400;
		line-height: 0px;

		box-sizing: border-box;
	}

	.modeSetting .item.active {
		border: 4rpx solid rgba(174, 214, 0, 1);
		background: rgba(26, 26, 26, 1);
		padding: 6rpx;
		color: rgba(26, 26, 26, 0.87);
	}

	.modeSetting .item.active .p100 {
		background: rgba(174, 214, 0, 1);
		border-radius: 50%;

	}


	.usrinfo .image {
		width: 30rpx;
		height: 40rpx;
	}

	.usrinfo .img {
		width: 30rpx;
		height: 40rpx;
	}

	.content {

		box-sizing: border-box;
		width: 100%;
		min-height: 100vh;
		height: auto;
	}

	.contentBg {
		background-color: #121212;
		color: #ffffffde;
	}

	.fleft {
		float: left;
	}

	.fright {
		float: right;
	}

	.clear {
		clear: both;
	}

	.displayNone {
		display: none !important;
	}

	.p100 {
		width: 100%;
		height: 100%;
	}

	.center {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		justify-content: center;
		align-items: center;
	}

	.centerLeft {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		justify-content: flex-start;
		align-items: center;
	}

	.warnnig {
		border-radius: 16rpx;
		width: 100%;
		height: 70rpx;
		line-height: 70rpx;
		background: rgba(224, 52, 52, 1);
		box-sizing: border-box;
		padding: 0rpx 30rpx;
		margin-top: 20rpx;
		color: rgba(255, 255, 255, 0.87);
		font-family: 'PingFang SC';
		font-size: 28rpx;
		font-weight: 400;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		justify-content: space-between;
		align-items: center;
	}

	.optTitle {
		color: rgba(255, 255, 255, 0.87);

		font-family: 'PingFang SC';
		font-size: 28rpx;
		font-weight: 400;

		letter-spacing: 0.14rpx;
		text-align: left;
		width: 100%;
		box-sizing: border-box;
		margin-top: 20rpx;
	}

	.sosContent {
		width: 100%;
		height: 130rpx;

		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		justify-content: space-between;
		align-items: center;
	}

	.sosContent .item {
		width: calc(calc(100% - 80rpx) / 2);
		height: 100%;
		box-sizing: border-box;
		border-radius: 16rpx;
		background: rgba(26, 26, 26, 1);
		color: rgba(255, 255, 255, 0.87);
		font-family: 'PingFang SC';
		font-size: 28rpx;
		font-weight: 400;
		letter-spacing: 0.14rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		justify-content: center;
		align-items: center;
	}

	.sosContent .item.active {
		border: 1px solid rgba(224, 52, 52, 1);
		color: rgba(224, 52, 52, 1);
	}

	.sosContent .imgContent {
		width: 55rpx;
		height: 55rpx;
		background-color: #232323;
		border-radius: 4rpx;
		margin-right: 30rpx;
	}

	.sosContent .imgContent .img {
		width: 70%;
		height: 70%;

	}

	.sosContent .item.active .imgContent {
		background-color: #E034340F;
	}

	.lightMode {
		width: 100%;
		height: 180rpx;
		border-radius: 16rpx;
		background: rgba(26, 26, 26, 1);
		margin-bottom: 30rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		justify-content: space-between;
		align-items: center;
	}


	.lightMode .item {
		width: calc(calc(100% - 90rpx) / 3);
		height: 100%;
		box-sizing: border-box;
		border-radius: 16rpx;

		color: rgba(255, 255, 255, 0.87);
		font-family: 'PingFang SC';
		font-size: 28rpx;
		font-weight: 400;
		letter-spacing: 0.14rpx;
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		align-content: center;
		justify-content: space-evenly;
		align-items: center;
	}

	.lightMode .item.active {

		color: #AED600;
	}

	.lightMode .imgContent {
		width: 80rpx;
		height: 100rpx;
	}

	.lightMode .imgContent .img {
		width: 100%;
		height: 100%;

	}

	.picVideo .btnImg {
		width: 100%;
		height: 100rpx;
		border-radius: 16rpx;
		background: rgba(42, 42, 42, 1);
	}

	.picVideo .btnImg .img {
		width: 40rpx;
		height: 40rpx;
	}


	.netContent {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: flex-end;
		justify-content: space-around;
		align-items: flex-end;
		width: 50rpx;
	}

	.net {
		width: 7rpx;
		background: rgba(255, 255, 255, 0.3);
	}

	.net.netone {
		height: 11rpx;
	}

	.net.nettwo {
		height: 17rpx;
	}

	.net.netsiri {
		height: 23rpx;
	}

	.net.netfour {
		height: 29rpx;
	}

	.net.netfive {
		height: 35rpx;
	}

	.net.active {
		background: #FFFFFF !important;
	}

	.navbarRight .img {
		width: 35rpx;
		height: 35rpx;
		margin-right: 30rpx;
	}

	.uni-navbar--fixed {
		top: 0rpx;
	}

	/deep/ .uni-navbar--fixed {
		top: 0px;
	}

	/deep/ .uni-navbar__placeholder {
		display: none !important;
	}

	.btn-container {
		width: 100%;
		height: 60rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		align-items: center;
		justify-content: space-between;
		margin: 20rpx 0rpx;
	}

	.btn-container .btn {
		width: 140rpx;
		height: 100%;
		border-radius: 8px;
		background-color: #2A2A2A;
		color: rgba(255, 255, 255, 0.87);
		color: rgba(255, 255, 255, 0.87);

		font-family: "PingFang SC";
		font-style: Medium;
		font-size: 24rpx;
		font-weight: 400;
		line-height: 60rpx;
		letter-spacing: 0.14rpx;
		text-align: center;
	}

	.btn-container .btn.active {
		background-color: rgba(174, 214, 0, 1) !important;
		color: rgba(26, 26, 26, 1) !important;
	}

	.popup-prompt {
		width: 100%;
		box-sizing: border-box;
		padding: 30rpx 15%;
	}


	.popup-prompt-title {

		text-align: center;
		width: 100%;
		float: left;
		box-sizing: border-box;
		white-space: nowrap;
		color: rgba(255, 255, 255, 0.87);
		font-family: PingFang SC;
		font-size: 28rpx;
		font-weight: 400;
		line-height: 40rpx;
		letter-spacing: 0.14rpx;


	}

	.popup-prompt-input {

		width: 100%;
		height: 60rpx;
		line-height: 60rpx;
		color: rgba(255, 255, 255, 0.87);
		box-sizing: border-box;
		border-bottom: 2rpx solid rgba(255, 255, 255, 0.4);
		font-size: 28rpx;
		font-weight: 400;
		letter-spacing: 0.14px;
	}

	.popup-prompt-input-placeHolder {
		color: rgba(255, 255, 255, 0.4);

		font-family: PingFang SC;
		font-size: 28rpx;
		font-weight: 400;

		letter-spacing: 0.14px;
		text-align: center;

	}


	.fanMode {
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		align-items: center;
		justify-content: space-between;
		margin-top: 25rpx;
	}

	.fanMode .fanItem {
		width: 25%;
		height: auto;
		min-height: 180rpx;
		padding: 24rpx 30rpx 18rpx 30rpx;
		background-color: rgba(26, 26, 26, 1);
		border-radius: 16rpx;
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		align-content: center;
		align-items: center;
		justify-content: space-around;
		white-space: nowrap;
		color: rgba(255, 255, 255, 0.87);
		border: 1rpx solid #00000000;
		font-family: "PingFang SC";
		font-style: Regular;
		font-size: 28rpx;
		font-weight: 400;

		letter-spacing: 0.14rpx;
		text-align: center;
	}

	.fanMode .fanItem.active {
		color: rgba(174, 214, 0, 1) !important;
		border: 1rpx solid rgba(174, 214, 0, 1);
	}

	.fanMode .fanItem .imageA {
		display: none;
	}

	.fanMode .fanItem.active .imageA {
		display: inline !important;
	}

	.fanMode .fanItem.active .image {
		display: none !important;
	}

	.fanItem .topImg {
		width: 60rpx;
		height: 60rpx;
	}

	.fanItem .topImg .img {
		width: 100%;
		height: 100%;
	}

	.fanItem .bottomTxt {}
</style>