<template>
	<view class="container">
		<u-loading-page :loading="loading" bg-color="#eef3f7" loadingText="iot-xcwl.cn"></u-loading-page>
		<view class="card" v-show="!loading">
			<view class="status-title">{{title}}</view>
			<view style="padding:20rpx;">
				<u--form labelPosition="left" labelWidth="100"
					:labelStyle="{ marginRight: '16px', lineHeight: '32px', width: '50px', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',color: '#000000' }">
					<view class="version-wrap"><u-form-item :label="$tt('status.deviceVersion')">
							<u-row>
								<u-col span="8">
									<u--text :text="'Version' + deviceInfo.firmwareVersion"></u--text>
								</u-col>
								<u-col span="4">
									<u-modal :title="$tt('status.deviceFirmware')" :show="show" :showCancelButton="true"
										:showConfirmButton="Object.keys(firmware).length !== 0 && deviceInfo.firmwareVersion < firmware.version"
										:confirmText="$tt('status.grade')" @confirm="confirmUpgrade"
										@cancel="cancelUpgrade">
										<view style="margin-top:10px;">
											<u--text
												v-if="Object.keys(firmware).length === 0 || deviceInfo.firmwareVersion >= firmware.version"
												lineHeight="80" align="center" prefixIcon="checkmark-circle"
												iconStyle="color:#5ac725;margin-right:5px;" type="info"
												:text="$tt('status.noNeedToUpgrade')"></u--text>
											<u--form labelPosition="left" labelWidth="45"
												v-if="Object.keys(firmware).length !== 0 && deviceInfo.firmwareVersion < firmware.version">
												<u--text type="success" prefixIcon="checkmark-circle"
													iconStyle="color:#5ac725;margin-right:5px;"
													:text="$tt('status.upgraded')"></u--text>
												<u-form-item :label="$tt('status.name')">
													<u--text type="info" :text="firmware.firmwareName"></u--text>
												</u-form-item>
												<u-form-item :label="$tt('status.version')">
													<u--text type="info"
														:text="'Version ' + firmware.version"></u--text>
												</u-form-item>
												<u-form-item :label="$tt('status.description')">
													<u--text type="info" :text="firmware.remark"
														customStyle="font-size:14px;"></u--text>
												</u-form-item>
											</u--form>
										</view>
									</u-modal>
								</u-col>
							</u-row>
						</u-form-item>
					</view>
				</u--form>
			</view>
		</view>
		<!-- 属性列表-->
		<view class="card" v-if="this.attributeList.length!=0">
			<view style="padding:25rpx 40rpx;">
				<u--text :text="$tt('status.attribute')" bold color="#333333" font-size="28rpx"></u--text>
				<view v-for="item in attributeList" :key="item.id">
					<u-form labelPosition="left" labelWidth="120">
						<u-form-item v-if="item.datatype.type=='bool'" :label="item.name">
							<u-switch v-model="item.shadow" @change="mqttPublish(deviceInfo, item)"
								:disabled="(shadowUnEnable || item.isReadonly==1)" inactiveValue="0" activeValue="1"
								activeColor="#3c9cff" inactiveColor="#c4c6c9" size="20"></u-switch>
						</u-form-item>
						<u-form-item v-if="item.datatype.type=='enum'" :label="item.name">
							<view class="enum-button-wrap"
								v-if="item.datatype.showWay && item.datatype.showWay === 'button'">
								<view class="enum-button" v-for="subItem in item.datatype.enumList"
									:key="subItem.value">
									<u-button size="mini" :disabled="(shadowUnEnable || item.isReadonly === 1)"
										type="primary" :plain="true" :text="subItem.text" :custom-style="{  
										        backgroundColor: subItem.value === item.shadow ? '#e8f4ff' : '',  
										        color: subItem.value === item.shadow ? '#1890ff' : '#000'
										      }" @click="enumButtonClick(deviceInfo, item, subItem.value)"></u-button>
								</view>
							</view>
							<uni-data-select v-else :class="(shadowUnEnable || item.isReadonly==1) ? 'disabled' : ''"
								:clear="false" v-model="item.shadow" :localdata="item.datatype.enumList"
								@change="dropdownChange(deviceInfo, item, $event)">
							</uni-data-select>
						</u-form-item>
						<u-form-item v-if="item.datatype.type=='string'" :label="item.name">
							<u-input v-model="item.shadow"
								:placeholder="$tt('status.inputString')+(item.datatype.unit?'，'+$tt('status.unit')+'：'+item.datatype.unit:'')"
								:disabled="(shadowUnEnable || item.isReadonly==1)">
								<u-button type="primary" :text="$tt('status.send')" size="mini"
									:slot="(shadowUnEnable || item.isReadonly === 1) ? '' : 'suffix'"
									@click="mqttPublish(deviceInfo, item)"></u-button>
							</u-input>
						</u-form-item>
						<u-form-item v-if="item.datatype.type=='decimal'" :label="item.name">
							<u-input v-model="item.shadow"
								:placeholder="$tt('status.decimals')+(item.datatype.unit?'，'+$tt('status.unit')+'：'+item.datatype.unit:'')"
								:disabled="shadowUnEnable || item.isReadonly==1">
								<u-button type="primary" :text="$tt('status.send')" size="mini"
									:slot="(shadowUnEnable || item.isReadonly === 1) ? '' : 'suffix'"
									@click="mqttPublish(deviceInfo, item)"></u-button>
							</u-input>
						</u-form-item>
						<u-form-item v-if="item.datatype.type=='integer'" :label="item.name">
							<u-input v-model="item.shadow"
								:placeholder="$tt('status.integer')+(item.datatype.unit?'，'+$tt('status.unit')+'：'+item.datatype.unit:'')"
								:disabled="shadowUnEnable || item.isReadonly==1">
								<u-button type="primary" :text="$tt('status.send')" size="mini"
									:slot="(shadowUnEnable || item.isReadonly === 1) ? '' : 'suffix'"
									@click="mqttPublish(deviceInfo, item)"></u-button>
							</u-input>
						</u-form-item>
						<u-form-item v-if="item.datatype.type === 'object'">
							<view class="object-wrap">
								<u--text class="object-title" prefixIcon="attach"
									iconStyle="font-size: 16px; margin-right: 4px" bold lineHeight="30"
									:text="item.name"></u--text>
								<view class="object-content">
									<u-form labelPosition="left" labelWidth="80"
										:labelStyle="{ lineHeight: '32px', width: '110px', overflow: 'hidden', textOverflow: 'ellipsis' }">
										<view v-for="param in item.datatype.params" :key="param.id">
											<u-form-item v-if="param.datatype.type === 'bool'" :label="param.name">
												<u-switch v-model="param.shadow"
													@change="mqttPublish(deviceInfo, param)"
													:disabled="(shadowUnEnable || param.isReadonly === 1)"
													inactiveValue="0" activeValue="1" activeColor="#3c9cff"
													inactiveColor="#c4c6c9" size="20">
												</u-switch>
											</u-form-item>
											<u-form-item v-if="param.datatype.type === 'enum'" :label="param.name">
												<view class="enum-button-wrap"
													v-if="param.datatype.showWay && param.datatype.showWay === 'button'">
													<view class="enum-button" v-for="subItem in param.datatype.enumList"
														:key="subItem.value">
														<u-button size="mini" :custom-style="{
															        backgroundColor: subItem.value === param.shadow ? '#e8f4ff' : '',  
															        color: subItem.value === param.shadow ? '#1890ff' : '#000'
															      }" :disabled="(shadowUnEnable || param.isReadonly === 1)" type="primary" :plain="true"
															:text="subItem.text"
															@click="enumButtonClick(deviceInfo, param, subItem.value)"></u-button>
													</view>
												</view>
												<uni-data-select v-else
													:class="(shadowUnEnable || param.isReadonly === 1) ? 'disabled' : ''"
													:clear="false" v-model="param.shadow"
													:localdata="param.datatype.enumList"
													@change="dropdownChange(deviceInfo, param, $event)">
												</uni-data-select>
											</u-form-item>
											<u-form-item v-if="param.datatype.type === 'string'" :label="param.name">
												<u-input v-model="param.shadow"
													:placeholder="$tt('status.inputString')+(item.datatype.unit?'，'+$tt('status.unit')+'：'+item.datatype.unit:'')"
													:disabled="(shadowUnEnable || param.isReadonly === 1)">
													<u-button type="primary" :text="$tt('status.send')" size="mini"
														:slot="(shadowUnEnable || param.isReadonly === 1) ? '' : 'suffix'"
														@click="mqttPublish(deviceInfo, param)"></u-button>
												</u-input>
											</u-form-item>
											<u-form-item v-if="param.datatype.type === 'decimal'" :label="param.name">
												<u-input v-model="param.shadow"
													:placeholder="$tt('status.decimals')+(item.datatype.unit?'，'+$tt('status.unit')+'：'+item.datatype.unit:'')"
													:disabled="shadowUnEnable || param.isReadonly === 1">
													<u-button type="primary" :text="$tt('status.send')" size="mini"
														:slot="(shadowUnEnable || param.isReadonly==1) ? '' : 'suffix'"
														@click="mqttPublish(deviceInfo, param)"></u-button>
												</u-input>
											</u-form-item>
											<u-form-item v-if="param.datatype.type === 'integer'" :label="param.name">
												<u-input v-model="param.shadow"
													:placeholder="$tt('status.integer')+(item.datatype.unit?'，'+$tt('status.unit')+'：'+item.datatype.unit:'')"
													:disabled="shadowUnEnable || param.isReadonly === 1">
													<u-button type="primary" :text="$tt('status.send')" size="mini"
														:slot="(shadowUnEnable || param.isReadonly === 1) ? '' : 'suffix'"
														@click="mqttPublish(deviceInfo, param)"></u-button>
												</u-input>
											</u-form-item>
										</view>
									</u-form>
								</view>
							</view>
						</u-form-item>
						<u-form-item v-if="item.datatype.type === 'array'">
							<view class="object-wrap" v-if="item.datatype.arrayType !== 'object'">
								<u--text class="object-title" prefixIcon="order"
									iconStyle="font-size: 16px; margin-right: 4px" bold lineHeight="30"
									:text="item.name"></u--text>
								<view class="object-content">
									<u--form labelPosition="left" labelWidth="80"
										:labelStyle="{ lineHeight: '32px', width: '110px', overflow: 'hidden', textOverflow: 'ellipsis' }">
										<view v-for="(model,index) in item.datatype.arrayModel" :key="model.id">
											<u-form-item v-if="item.datatype.arrayType=='string'"
												:label="item.name+(index+1)">
												<u-input v-model="model.shadow" :placeholder="$tt('status.inputString')"
													:disabled=" (shadowUnEnable || item.isReadonly==1)">
													<u-button type="primary" :text="$tt('status.send')" size="mini"
														:slot="(shadowUnEnable || item.isReadonly === 1) ? '' : 'suffix'"
														@click="mqttPublish(deviceInfo, model)"></u-button>
												</u-input>
											</u-form-item>
											<u-form-item v-if="item.datatype.arrayType=='decimal'"
												:label="item.name+(index+1)">
												<u-input v-model="model.shadow" :placeholder="$tt('status.inputString')"
													:disabled=" (shadowUnEnable || item.isReadonly==1)">
													<u-button type="primary" :text="$tt('status.send')" size="mini"
														:slot="(shadowUnEnable || item.isReadonly === 1) ? '' : 'suffix'"
														@click="mqttPublish(deviceInfo, model)"></u-button>
												</u-input>
											</u-form-item>
											<u-form-item v-if="item.datatype.arrayType=='integer'"
												:label="item.name+(index+1)">
												<u-input v-model="model.shadow" :placeholder="$tt('status.integer')"
													:disabled="(shadowUnEnable || item.isReadonly==1)">
													<u-button type="primary" :text="$tt('status.send')" size="mini"
														:slot="(shadowUnEnable || item.isReadonly === 1) ? '' : 'suffix'"
														@click="mqttPublish(deviceInfo, model)"></u-button>
												</u-input>
											</u-form-item>
										</view>
									</u--form>
								</view>
							</view>
							<view class="object-wrap" v-if="item.datatype.arrayType === 'object'">
								<u--text class="object-title" prefixIcon="order"
									iconStyle="font-size: 16px; margin-right: 4px" bold lineHeight="30"
									:text="item.name"></u--text>
								<view style="padding: 0px 4.5px;" class="object-content">
									<u-collapse :border="true">
										<u-collapse-item v-for="(arrayParam,index) in item.datatype.arrayParams"
											:key="index" :title="item.name+(index+1)" :name="item.id+(index+1)">
											<u--form labelPosition="left" labelWidth="80"
												:labelStyle="{ lineHeight: '32px', width: '110px', overflow: 'hidden', textOverflow: 'ellipsis' }">
												<view v-for="param in arrayParam" :key="param.id">
													<u-form-item v-if="param.datatype.type=='bool'" :label="param.name">
														<u-switch v-model="param.shadow"
															@change="mqttPublish(deviceInfo, param)"
															:disabled="(shadowUnEnable || param.isReadonly==1)"
															inactiveValue="0" activeValue="1" activeColor="#3c9cff"
															inactiveColor="#c4c6c9" size="20">
														</u-switch>
													</u-form-item>
													<u-form-item v-if="param.datatype.type === 'enum'"
														:label="param.name">
														<view class="enum-button-wrap"
															v-if="param.datatype.showWay && param.datatype.showWay === 'button'">
															<view class="enum-button"
																v-for="subItem in param.datatype.enumList"
																:key="subItem.value">
																<u-button size="mini"
																	:disabled="(shadowUnEnable || param.isReadonly === 1)"
																	type="primary" :plain="true" :text="subItem.text"
																	:custom-style="{
																	        backgroundColor: subItem.value === param.shadow ? '#e8f4ff' : '',  
																	        color: subItem.value === param.shadow ? '#1890ff' : '#000'
																	      }" @click="enumButtonClick(deviceInfo, param, subItem.value)"></u-button>
															</view>
														</view>
														<uni-data-select v-else
															:class="(shadowUnEnable || param.isReadonly==1) ? 'disabled' : ''"
															:clear="false" v-model="param.shadow"
															:localdata="param.datatype.enumList"
															@change="dropdownChange(deviceInfo, param, $event)">
														</uni-data-select>
													</u-form-item>
													<u-form-item v-if="param.datatype.type=='string'"
														:label="param.name">
														<u-input v-model="param.shadow"
															:placeholder="$tt('status.inputString')+(param.datatype.unit?'，'+$tt('status.unit')+'：'+param.datatype.unit:'')"
															:disabled="(shadowUnEnable || param.isReadonly==1)">
															<u-button type="primary" :text="$tt('status.send')"
																size="mini"
																:slot="(shadowUnEnable || param.isReadonly === 1) ? '' : 'suffix'"
																@click="mqttPublish(deviceInfo, param)">
															</u-button>
														</u-input>
													</u-form-item>
													<u-form-item v-if="param.datatype.type=='decimal'"
														:label="param.name">
														<u-input v-model="param.shadow"
															:placeholder="$tt('status.decimals')+(param.datatype.unit?'，'+$tt('status.unit')+'：'+param.datatype.unit:'')"
															:disabled="shadowUnEnable || param.isReadonly==1">
															<u-button type="primary" :text="$tt('status.send')"
																size="mini"
																:slot="(shadowUnEnable || param.isReadonly === 1) ? '' : 'suffix'"
																@click="mqttPublish(deviceInfo, param)">
															</u-button>
														</u-input>
													</u-form-item>
													<u-form-item v-if="param.datatype.type=='integer'"
														:label="param.name">
														<u-input v-model="param.shadow"
															:placeholder="$tt('status.integer')+(param.datatype.unit?'，'+$tt('status.unit')+'：'+param.datatype.unit:'')"
															:disabled="shadowUnEnable || param.isReadonly==1">
															<u-button type="primary" :text="$tt('status.send')"
																size="mini"
																:slot="(shadowUnEnable || param.isReadonly === 1) ? '' : 'suffix'"
																@click="mqttPublish(deviceInfo, param)">
															</u-button>
														</u-input>
													</u-form-item>
												</view>
											</u--form>
										</u-collapse-item>
									</u-collapse>
								</view>
							</view>
						</u-form-item>
					</u-form>
				</view>
			</view>
		</view>
		<!-- 操作列表-->
		<view class="card" v-if="this.operateList.length!=0">
			<view style="padding:25rpx 40rpx;">
				<u--text :text="$tt('status.operation')" bold color="#333333" font-size="28rpx"></u--text>
				<view v-for="item in operateList" :key="item.id">
					<u-form labelPosition="left" labelWidth="80">
						<u-form-item v-if="item.datatype.type=='bool'" :label="item.name">
							<u-switch v-model="item.shadow" @change="mqttPublish(deviceInfo, item)"
								:disabled="(shadowUnEnable || item.isReadonly==1)" inactiveValue="0" activeValue="1"
								activeColor="#3c9cff" inactiveColor="#c4c6c9" size="20"></u-switch>
						</u-form-item>
						<u-form-item v-if="item.datatype.type=='enum'" :label="item.name">
							<view class="enum-button-wrap"
								v-if="item.datatype.showWay && item.datatype.showWay === 'button'">
								<view class="enum-button" v-for="subItem in item.datatype.enumList"
									:key="subItem.value">
									<u-button size="mini" :disabled="(shadowUnEnable || item.isReadonly === 1)"
										type="primary" :plain="true" :text="subItem.text" :custom-style="{  
										        backgroundColor: subItem.value === item.shadow ? '#e8f4ff' : '',  
										        color: subItem.value === item.shadow ? '#1890ff' : '#000'
										      }" @click="enumButtonClick(deviceInfo, item, subItem.value)"></u-button>
								</view>
							</view>
							<uni-data-select v-else :class="(shadowUnEnable || item.isReadonly==1) ? 'disabled' : ''"
								:clear="false" v-model="item.shadow" :localdata="item.datatype.enumList"
								@change="dropdownChange(deviceInfo, item, $event)">
							</uni-data-select>
						</u-form-item>
						<u-form-item v-if="item.datatype.type=='string'" :label="item.name">
							<u-input v-model="item.shadow"
								:placeholder="$tt('status.inputString')+(item.datatype.unit?'，'+$tt('status.unit')+'：'+item.datatype.unit:'')"
								:disabled="(shadowUnEnable || item.isReadonly==1)">
								<u-button type="primary" :text="$tt('status.send')" size="mini"
									:slot="(shadowUnEnable || item.isReadonly === 1) ? '' : 'suffix'"
									@click="mqttPublish(deviceInfo, item)"></u-button>
							</u-input>
						</u-form-item>
						<u-form-item v-if="item.datatype.type=='decimal'" :label="item.name">
							<u-input v-model="item.shadow"
								:placeholder="$tt('status.decimals')+(item.datatype.unit?'，'+$tt('status.unit')+'：'+item.datatype.unit:'')"
								:disabled="shadowUnEnable || item.isReadonly==1">
								<u-button type="primary" :text="$tt('status.send')" size="mini"
									:slot="(shadowUnEnable || item.isReadonly === 1) ? '' : 'suffix'"
									@click="mqttPublish(deviceInfo, item)"></u-button>
							</u-input>
						</u-form-item>
						<u-form-item v-if="item.datatype.type=='integer'" :label="item.name">
							<u-input v-model="item.shadow"
								:placeholder="$tt('status.integer')+(item.datatype.unit?'，'+$tt('status.unit')+'：'+item.datatype.unit:'')"
								:disabled="shadowUnEnable || item.isReadonly==1">
								<u-button type="primary" :text="$tt('status.send')" size="mini"
									:slot="(shadowUnEnable || item.isReadonly === 1) ? '' : 'suffix'"
									@click="mqttPublish(deviceInfo, item)"></u-button>
							</u-input>
						</u-form-item>
						<u-form-item v-if="item.datatype.type === 'object'">
							<view class="object-wrap">
								<u--text class="object-title" prefixIcon="attach"
									iconStyle="font-size: 16px; margin-right: 4px" bold lineHeight="30"
									:text="item.name"></u--text>
								<view class="object-content">
									<u-form labelPosition="left" labelWidth="80"
										:labelStyle="{ lineHeight: '32px', width: '110px', overflow: 'hidden', textOverflow: 'ellipsis' }">
										<view v-for="param in item.datatype.params" :key="param.id">
											<u-form-item v-if="param.datatype.type === 'bool'" :label="param.name">
												<u-switch v-model="param.shadow"
													@change="mqttPublish(deviceInfo, param)"
													:disabled="(shadowUnEnable || param.isReadonly === 1)"
													inactiveValue="0" activeValue="1" activeColor="#3c9cff"
													inactiveColor="#c4c6c9" size="20">
												</u-switch>
											</u-form-item>
											<u-form-item v-if="param.datatype.type === 'enum'" :label="param.name">
												<view class="enum-button-wrap"
													v-if="param.datatype.showWay && param.datatype.showWay === 'button'">
													<view class="enum-button" v-for="subItem in param.datatype.enumList"
														:key="subItem.value">
														<u-button size="mini"
															:disabled="(shadowUnEnable || param.isReadonly === 1)"
															type="primary" :plain="true" :text="subItem.text"
															:custom-style="{
															        backgroundColor: subItem.value === param.shadow ? '#e8f4ff' : '',  
															        color: subItem.value === param.shadow ? '#1890ff' : '#000'
															      }" @click="enumButtonClick(deviceInfo, param, subItem.value)"></u-button>
													</view>
												</view>
												<uni-data-select v-else
													:class="(shadowUnEnable || param.isReadonly === 1) ? 'disabled' : ''"
													:clear="false" v-model="param.shadow"
													:localdata="param.datatype.enumList"
													@change="dropdownChange(deviceInfo, param, $event)">
												</uni-data-select>
											</u-form-item>
											<u-form-item v-if="param.datatype.type === 'string'" :label="param.name">
												<u-input v-model="param.shadow"
													:placeholder="$tt('status.inputString')+(item.datatype.unit?'，'+$tt('status.unit')+'：'+item.datatype.unit:'')"
													:disabled="(shadowUnEnable || param.isReadonly === 1)">
													<u-button type="primary" :text="$tt('status.send')" size="mini"
														:slot="(shadowUnEnable || param.isReadonly === 1) ? '' : 'suffix'"
														@click="mqttPublish(deviceInfo, param)"></u-button>
												</u-input>
											</u-form-item>
											<u-form-item v-if="param.datatype.type === 'decimal'" :label="param.name">
												<u-input v-model="param.shadow"
													:placeholder="$tt('status.decimals')+(item.datatype.unit?'，'+$tt('status.unit')+'：'+item.datatype.unit:'')"
													:disabled="shadowUnEnable || param.isReadonly === 1">
													<u-button type="primary" :text="$tt('status.send')" size="mini"
														:slot="(shadowUnEnable || param.isReadonly==1) ? '' : 'suffix'"
														@click="mqttPublish(deviceInfo, param)"></u-button>
												</u-input>
											</u-form-item>
											<u-form-item v-if="param.datatype.type === 'integer'" :label="param.name">
												<u-input v-model="param.shadow"
													:placeholder="$tt('status.integer')+(item.datatype.unit?'，'+$tt('status.unit')+'：'+item.datatype.unit:'')"
													:disabled="shadowUnEnable || param.isReadonly === 1">
													<u-button type="primary" :text="$tt('status.send')" size="mini"
														:slot="(shadowUnEnable || param.isReadonly === 1) ? '' : 'suffix'"
														@click="mqttPublish(deviceInfo, param)"></u-button>
												</u-input>
											</u-form-item>
										</view>
									</u-form>
								</view>
							</view>
						</u-form-item>
						<u-form-item v-if="item.datatype.type === 'array'">
							<view class="object-wrap" v-if="item.datatype.arrayType !== 'object'">
								<u--text class="object-title" prefixIcon="order"
									iconStyle="font-size: 16px; margin-right: 4px" bold lineHeight="30"
									:text="item.name"></u--text>
								<view class="object-content">
									<u--form labelPosition="left" labelWidth="80"
										:labelStyle="{ lineHeight: '32px', width: '110px', overflow: 'hidden', textOverflow: 'ellipsis' }">
										<view v-for="(model,index) in item.datatype.arrayModel" :key="model.id">
											<u-form-item v-if="item.datatype.arrayType=='string'"
												:label="item.name+(index+1)">
												<u-input v-model="model.shadow" :placeholder="$tt('status.inputString')"
													:disabled="(shadowUnEnable
													|| item.isReadonly==1)">
													<u-button type="primary" :text="$tt('status.send')" size="mini"
														:slot="(shadowUnEnable || item.isReadonly === 1) ? '' : 'suffix'"
														@click="mqttPublish(deviceInfo, model)"></u-button>
												</u-input>
											</u-form-item>
											<u-form-item v-if="item.datatype.arrayType=='decimal'"
												:label="item.name+(index+1)">
												<u-input v-model="model.shadow" :placeholder="$tt('status.inputString')"
													:disabled=" (shadowUnEnable || item.isReadonly==1)">
													<u-button type="primary" :text="$tt('status.send')" size="mini"
														:slot="(shadowUnEnable || item.isReadonly === 1) ? '' : 'suffix'"
														@click="mqttPublish(deviceInfo, model)"></u-button>
												</u-input>
											</u-form-item>
											<u-form-item v-if="item.datatype.arrayType=='integer'"
												:label="item.name+(index+1)">
												<u-input v-model="model.shadow" :placeholder="$tt('status.integer')"
													:disabled="(shadowUnEnable || item.isReadonly==1)">
													<u-button type="primary" :text="$tt('status.send')" size="mini"
														:slot="(shadowUnEnable || item.isReadonly === 1) ? '' : 'suffix'"
														@click="mqttPublish(deviceInfo, model)"></u-button>
												</u-input>
											</u-form-item>
										</view>
									</u--form>
								</view>
							</view>
							<view class="object-wrap" v-if="item.datatype.arrayType === 'object'">
								<u--text class="object-title" prefixIcon="order"
									iconStyle="font-size: 16px; margin-right: 4px" bold lineHeight="30"
									:text="item.name"></u--text>
								<view style="padding: 0px 4.5px;" class="object-content">
									<u-collapse :border="true">
										<u-collapse-item v-for="(arrayParam,index) in item.datatype.arrayParams"
											:key="index" :title="item.name+(index+1)" :name="item.id+(index+1)">
											<u--form labelPosition="left" labelWidth="80"
												:labelStyle="{ lineHeight: '32px', width: '110px', overflow: 'hidden', textOverflow: 'ellipsis' }">
												<view v-for="param in arrayParam" :key="param.id">
													<u-form-item v-if="param.datatype.type=='bool'" :label="param.name">
														<u-switch v-model="param.shadow"
															@change="mqttPublish(deviceInfo, param)"
															:disabled="(shadowUnEnable || param.isReadonly==1)"
															inactiveValue="0" activeValue="1" activeColor="#3c9cff"
															inactiveColor="#c4c6c9" size="20">
														</u-switch>
													</u-form-item>
													<u-form-item v-if="param.datatype.type === 'enum'"
														:label="param.name">
														<view class="enum-button-wrap"
															v-if="param.datatype.showWay && param.datatype.showWay === 'button'">
															<view class="enum-button"
																v-for="subItem in param.datatype.enumList"
																:key="subItem.value">
																<u-button size="mini"
																	:disabled="(shadowUnEnable || param.isReadonly === 1)"
																	type="primary" :plain="true" :text="subItem.text"
																	:custom-style="{
																	        backgroundColor: subItem.value === param.shadow ? '#e8f4ff' : '',  
																	        color: subItem.value === param.shadow ? '#1890ff' : '#000'
																	      }" @click="enumButtonClick(deviceInfo, param, subItem.value)">
																</u-button>
															</view>
														</view>
														<uni-data-select v-else
															:class="(shadowUnEnable || param.isReadonly==1) ? 'disabled' : ''"
															:clear="false" v-model="param.shadow"
															:localdata="param.datatype.enumList"
															@change="dropdownChange(deviceInfo, param, $event)">
														</uni-data-select>
													</u-form-item>
													<u-form-item v-if="param.datatype.type=='string'"
														:label="param.name">
														<u-input v-model="param.shadow"
															:placeholder="$tt('status.inputString')+(param.datatype.unit?'，'+$tt('status.unit')+'：'+param.datatype.unit:'')"
															:disabled="(shadowUnEnable || param.isReadonly==1)">
															<u-button type="primary" :text="$tt('status.send')"
																size="mini"
																:slot="(shadowUnEnable || param.isReadonly === 1) ? '' : 'suffix'"
																@click="mqttPublish(deviceInfo, param)">
															</u-button>
														</u-input>
													</u-form-item>
													<u-form-item v-if="param.datatype.type=='decimal'"
														:label="param.name">
														<u-input v-model="param.shadow"
															:placeholder="$tt('status.decimals')+(param.datatype.unit?'，'+$tt('status.unit')+'：'+param.datatype.unit:'')"
															:disabled="shadowUnEnable || param.isReadonly==1">
															<u-button type="primary" :text="$tt('status.send')"
																size="mini"
																:slot="(shadowUnEnable || param.isReadonly === 1) ? '' : 'suffix'"
																@click="mqttPublish(deviceInfo, param)">
															</u-button>
														</u-input>
													</u-form-item>
													<u-form-item v-if="param.datatype.type=='integer'"
														:label="param.name">
														<u-input v-model="param.shadow"
															:placeholder="$tt('status.integer')+(param.datatype.unit?'，'+$tt('status.unit')+'：'+param.datatype.unit:'')"
															:disabled="shadowUnEnable || param.isReadonly==1">
															<u-button type="primary" :text="$tt('status.send')"
																size="mini"
																:slot="(shadowUnEnable || param.isReadonly === 1) ? '' : 'suffix'"
																@click="mqttPublish(deviceInfo, param)">
															</u-button>
														</u-input>
													</u-form-item>
												</view>
											</u--form>
										</u-collapse-item>
									</u-collapse>
								</view>
							</view>
						</u-form-item>
					</u-form>
				</view>
			</view>
		</view>
		<view class="card" :style="loading ? 'visibility:hidden' : 'visibility:visible'"
			v-if="monitorChart.length != 0">
			<view style="padding:25rpx 40rpx">
				<u--text :text="$tt('status.monitior')" bold color="#606266"></u--text>
			</view>
			<view class="wrapper">
				<view class="item" v-for="(chart, index) in monitorChart" :key="index">
					<view class="dashboard">
						<qiun-data-charts type="gauge" :opts="chart.opts" :chartData="chart.data" :canvas2d="true"
							:pixelRatio="100" />
					</view>
				</view>
			</view>
		</view>

		<view class="card" v-if="!loading && deviceInfo.isShadow == 1 && deviceInfo.status != 3">
			<view style="padding:25rpx 40rpx">
				<u--text :text="$tt('status.offline')" bold color="#333333" font-size="28rpx"></u--text>
				<u--form labelPosition="left" labelWidth="80"
					:labelStyle="{ marginRight: '16px', width: '50px', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }">
					<view v-for="item in deviceInfo.thingsModels" :key="item.id">
						<u-form-item v-if="item.datatype.type=='bool'" :label="item.name">
							<u-switch v-model="item.value" @change="mqttPublish(deviceInfo, item)" inactiveValue="0"
								activeValue="1" activeColor="#3c9cff" inactiveColor="#c4c6c9" size="20"
								disabled></u-switch>
						</u-form-item>
						<u-form-item v-if="item.datatype.type=='enum'" :label="item.name">
							<view class="enum-button-wrap"
								v-if="item.datatype.showWay && item.datatype.showWay === 'button'">
								<view class="enum-button" v-for="subItem in item.datatype.enumList"
									:key="subItem.value">
									<u-button size="mini" :disabled="(shadowUnEnable || item.isReadonly === 1)"
										type="primary" :plain="true" :text="subItem.text" :custom-style="{
																	        backgroundColor: subItem.value === item.shadow ? '#e8f4ff' : '',  
																	      }" @click="enumButtonClick(deviceInfo, item, subItem.value)" disabled></u-button>
								</view>
							</view>
							<uni-data-select v-else class="disabled" :clear="false" v-model="item.value"
								:localdata="item.datatype.enumList" @change="dropdownChange(deviceInfo, item, $event)">
							</uni-data-select>
						</u-form-item>
						<u-form-item v-if="item.datatype.type=='string'" :label="item.name">
							<u-input v-model="item.value" :placeholder="$tt('status.inputString')" disabled>
							</u-input>
						</u-form-item>
						<u-form-item v-if="item.datatype.type=='decimal'" :label="item.name">
							<u-input v-model="item.value" :placeholder="$tt('status.decimals')" disabled>
							</u-input>
						</u-form-item>
						<u-form-item v-if="item.datatype.type=='integer'" :label="item.name">
							<u-input v-model="item.value" :placeholder="$tt('status.integer')" disabled>
							</u-input>
						</u-form-item>
						<u-form-item v-if="item.datatype.type=='object'">
							<view class="object-wrap">
								<u--text class="object-title" prefixIcon="attach"
									iconStyle="font-size: 16px; margin-right: 4px" bold lineHeight="30"
									:text="item.name"></u--text>
								<view class="object-content">
									<u-form labelPosition="left" labelWidth="80"
										:labelStyle="{ lineHeight: '32px', width: '110px', overflow: 'hidden', textOverflow: 'ellipsis' }">
										<view v-for="param in item.datatype.params" :key="param.id">
											<u-form-item v-if="param.datatype.type=='bool'" :label="param.name">
												<u-switch v-model="param.value" @change="mqttPublish(deviceInfo, param)"
													inactiveValue="0" activeValue="1" activeColor="#3c9cff"
													inactiveColor="#c4c6c9" size="20" disabled>
												</u-switch>
											</u-form-item>
											<u-form-item v-if="param.datatype.type=='enum'" :label="param.name">
												<view class="enum-button-wrap"
													v-if="param.datatype.showWay && param.datatype.showWay === 'button'">
													<view class="enum-button" v-for="subItem in param.datatype.enumList"
														:key="subItem.value">
														<u-button size="mini"
															:disabled="(shadowUnEnable || param.isReadonly === 1)"
															type="primary" :plain="true" :text="subItem.text"
															@click="enumButtonClick(deviceInfo, param, subItem.value)"
															:custom-style="{
																	        backgroundColor: subItem.value === param.shadow ? '#e8f4ff' : '',  
																	        color: subItem.value === param.shadow ? '#1890ff' : '#000'
																	      }" disabled></u-button>
													</view>
												</view>
												<uni-data-select v-else class="disabled" :clear="false"
													v-model="param.value" :localdata="param.datatype.enumList"
													@change="dropdownChange(deviceInfo, param, $event)">
												</uni-data-select>
											</u-form-item>
											<u-form-item v-if="param.datatype.type=='string'" :label="param.name">
												<u-input v-model="param.value" :placeholder="$tt('status.inputString')"
													disabled>
												</u-input>
											</u-form-item>
											<u-form-item v-if="param.datatype.type=='decimal'" :label="param.name">
												<u-input v-model="param.value" :placeholder="$tt('status.decimals')"
													disabled>
												</u-input>
											</u-form-item>
											<u-form-item v-if="param.datatype.type=='integer'" :label="param.name">
												<u-input v-model="param.value" :placeholder="$tt('status.integer')"
													disabled>
												</u-input>
											</u-form-item>
										</view>
									</u-form>
								</view>
							</view>
						</u-form-item>
						<u-form-item v-if="item.datatype.type=='array'">
							<view class="object-wrap" v-if="item.datatype.arrayType!='object'">
								<u--text class="object-title" prefixIcon="order"
									iconStyle="font-size: 16px; margin-right: 4px" bold lineHeight="30"
									:text="item.name"></u--text>
								<view class="object-content">
									<u--form labelPosition="left" labelWidth="80"
										:labelStyle="{ lineHeight: '32px', width: '110px', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }">
										<view v-for="(model,index) in item.datatype.arrayModel" :key="model.id">
											<u-form-item v-if="item.datatype.arrayType=='string'"
												:label="item.name+(index+1)">
												<u-input v-model="model.value" :placeholder="$tt('status.inputString')"
													disabled>
												</u-input>
											</u-form-item>
											<u-form-item v-if="item.datatype.arrayType=='decimal'"
												:label="item.name+(index+1)">
												<u-input v-model="model.value" :placeholder="$tt('status.decimals')"
													disabled>
												</u-input>
											</u-form-item>
											<u-form-item v-if="item.datatype.arrayType=='integer'"
												:label="item.name+(index+1)">
												<u-input v-model="model.value" :placeholder="$tt('status.integer')"
													disabled>
												</u-input>
											</u-form-item>
										</view>
									</u--form>
								</view>
							</view>
							<view class="object-wrap" v-if="item.datatype.arrayType=='object'">
								<u--text class="object-title" prefixIcon="order"
									iconStyle="font-size: 16px; margin-right: 4px" bold lineHeight="30"
									:text="item.name"></u--text>
								<view style="padding: 0px 4.5px;" class="object-content">
									<u-collapse :border="true">
										<u-collapse-item v-for="(arrayParam,index) in item.datatype.arrayParams"
											:key="index" :title="item.name+(index+1)" :name="item.id+(index+1)">
											<u--form labelPosition="left" labelWidth="80"
												:labelStyle="{marginRight:'16px',lineHeight:'32px',width:'110px',overflow:'hidden',textOverflow:'ellipsis'}">
												<view v-for="param in arrayParam" :key="param.id">
													<u-form-item v-if="param.datatype.type=='bool'" :label="param.name">
														<u-switch v-model="param.value"
															@change="mqttPublish(deviceInfo, param)" inactiveValue="0"
															activeValue="1" activeColor="#3c9cff"
															inactiveColor="#c4c6c9" size="20" disabled>
														</u-switch>
													</u-form-item>
													<u-form-item v-if="param.datatype.type=='enum'" :label="param.name">
														<view class="enum-button-wrap"
															v-if="param.datatype.showWay && param.datatype.showWay === 'button'">
															<view class="enum-button"
																v-for="subItem in param.datatype.enumList"
																:key="subItem.value">
																<u-button size="mini"
																	:disabled="(shadowUnEnable || param.isReadonly === 1)"
																	type="primary" :plain="true" :text="subItem.text"
																	@click="enumButtonClick(deviceInfo, param, subItem.value)"
																	disabled :custom-style="{
																	        backgroundColor: subItem.value === param.shadow ? '#e8f4ff' : '',  
																	        color: subItem.value === param.shadow ? '#1890ff' : '#000'
																	      }"></u-button>
															</view>
														</view>
														<uni-data-select v-else class="disabled" :clear="false"
															v-model="param.value" :localdata="param.datatype.enumList"
															@change="dropdownChange(deviceInfo, param, $event)">
														</uni-data-select>
													</u-form-item>
													<u-form-item v-if="param.datatype.type=='string'"
														:label="param.name">
														<u-input v-model="param.value"
															:placeholder="$tt('status.inputString')" disabled>
														</u-input>
													</u-form-item>
													<u-form-item v-if="param.datatype.type=='decimal'"
														:label="param.name">
														<u-input v-model="param.value"
															:placeholder="$tt('status.decimals')" disabled>
														</u-input>
													</u-form-item>
													<u-form-item v-if="param.datatype.type=='integer'"
														:label="param.name">
														<u-input v-model="param.value"
															:placeholder="$tt('status.integer')" disabled>
														</u-input>
													</u-form-item>
												</view>
											</u--form>
										</u-collapse-item>
									</u-collapse>
								</view>
							</view>
						</u-form-item>
					</view>
				</u--form>
			</view>
		</view>
	</view>
</template>

<script>
	import projectConfig from '@/env.config.js';
	import {
		getLatestFirmware,
		relateChannelList,
		getOrderControl
	} from '@/apis/modules/device.js';
	import {
		serviceInvoke
	} from '@/apis/modules/runtime.js';
	import {
		getSipStatusInfo,
		getLocationWayInfo
	} from '@/helpers/common.js'

	export default {
		name: 'baseStatus',
		props: {
			device: {
				type: Object,
				default: null,
				required: true
			}
		},
		watch: {
			// 兼容小程序
			device: function(newVal, oldVal) {
				if (newVal.deviceName !== '') {
					this.deviceInfo = newVal;
					if (this.deviceInfo.deviceType != 3) {
						//分-属性和操作
						this.operateList = this.deviceInfo.thingsModels && this.deviceInfo.thingsModels.filter((
								item) =>
							item.isReadonly == '0');
						this.attributeList = this.deviceInfo.thingsModels && this.deviceInfo.thingsModels.filter((
								item) =>
							item.isReadonly == '1');
						//排序
						this.attributeList = this.attributeList.sort((a, b) => b.order - a.order);
						this.operateList = this.operateList.sort((a, b) => b.order - a.order);
					}
					this.updateDeviceStatus(this.deviceInfo);
					this.initChart();
					console.log("wumoxing", JSON.stringify(this.deviceInfo.thingsModels))


				}
			}
		},
		data() {
			return {
				// 设备升级模态窗
				show: false,
				// 固件
				firmware: {},
				// 加载图标
				loading: true,
				// 图表数据集合
				monitorChart: [{
					opts: {},
					data: {
						categories: [],
						series: [],
					},
					id: '',
				}],
				// 控制模块标题
				title: this.$tt('status.control'),
				// 未启用设备影子
				shadowUnEnable: false,
				// 控制项标题背景
				statusColor: {
					background: '#67C23A',
					color: '#fff'
				},
				// 模块背景色
				bgStyle: '',
				// 设备信息
				deviceInfo: {
					chartList: [],
				},
				//通道列表
				channelList: [],
				// 设备通道
				channelLoadStatus: 'nomore',
				queryParams: {
					deviceSipId: '', //设备sipid
				},
				//属性列表
				attributeList: [],
				//动作列表
				operateList: [],
			};
		},
		created() {
			// 获取设备状态(兼容H5和APP)
			if (this.device !== null && Object.keys(this.device).length !== 0) {
				this.deviceInfo = this.device;
				this.updateDeviceStatus(this.deviceInfo);
				this.initChart();
			};
			// 回调处理
			this.mqttCallback();
		},
		methods: {
			/* Mqtt回调处理 */
			mqttCallback() {
				this.$mqttTool.client.on('message', (topic, message, buffer) => {
					let topics = topic.split('/');
					let productId = topics[1];
					let deviceNum = topics[2];
					message = JSON.parse(message.toString());
					if (topics[3] == 'status') {
						console.log('接收到【设备状态-运行】主题：', topic);
						console.log('接收到【设备状态-运行】内容：', message);
						// 更新列表中设备的状态
						if (this.deviceInfo.serialNumber == deviceNum) {
							this.deviceInfo.status = message.status;
							this.deviceInfo.isShadow = message.isShadow;
							this.deviceInfo.rssi = message.rssi;
							this.updateDeviceStatus(this.deviceInfo);
						}
					}
					//兼容设备回复
					if (topics[4] == 'reply') {
						uni.showToast({
							icon: 'none',
							title: message,
						})
					}
					if (topics[3] == 'property' || topics[3] == 'function' || topic.endsWith(
							'ws/service')) {
						console.log('接收到【物模型】主题：', topic);
						console.log('接收到【物模型】内容：', message);
						// 更新列表中设备的属性
						if (this.deviceInfo.serialNumber == deviceNum) {
							for (let j = 0; j < message.message.length; j++) {
								let isComplete = false;
								// 设备状态
								for (let k = 0; k < this.deviceInfo.thingsModels.length && !
									isComplete; k++) {
									if (this.deviceInfo.thingsModels[k].id == message.message[j].id) {
										// 普通类型
										this.deviceInfo.thingsModels[k].shadow = message.message[j].value;
										isComplete = true;
										break;
									} else if (this.deviceInfo.thingsModels[k].datatype.type ==
										"object") {
										// 对象类型
										for (let n = 0; n < this.deviceInfo.thingsModels[k]
											.datatype.params
											.length; n++) {
											if (this.deviceInfo.thingsModels[k].datatype.params[n]
												.id == message.message[j]
												.id) {
												this.deviceInfo.thingsModels[k].datatype.params[n]
													.shadow =
													message.message[j].value;
												isComplete = true;
												break;
											}
										}
									} else if (this.deviceInfo.thingsModels[k].datatype.type ==
										"array") {
										// 数组类型
										if (this.deviceInfo.thingsModels[k].datatype.arrayType ==
											"object") {
											// 1.对象类型数组,id为数组中一个元素,例如：array_01_gateway_temperature
											if (String(message.message[j].id).indexOf("array_") == 0) {
												for (let n = 0; n < this.deviceInfo.thingsModels[k]
													.datatype
													.arrayParams.length; n++) {
													for (let m = 0; m < this.deviceInfo
														.thingsModels[k].datatype
														.arrayParams[n].length; m++) {
														if (this.deviceInfo.thingsModels[k]
															.datatype.arrayParams[n]
															[m].id == message.message[j].id) {
															this.deviceInfo.thingsModels[k]
																.datatype.arrayParams[n]
																[m].shadow = message.message[j].value;
															isComplete = true;
															break;
														}
													}
													if (isComplete) {
														break;
													}
												}
											} else {
												// 2.对象类型数组，例如：gateway_temperature,消息ID添加前缀后匹配
												for (let n = 0; n < this.deviceInfo.thingsModels[k]
													.datatype
													.arrayParams.length; n++) {
													for (let m = 0; m < this.deviceInfo
														.thingsModels[k].datatype
														.arrayParams[n].length; m++) {
														let index = n > 9 ? String(n) : '0' + k;
														let prefix = 'array_' + index + '_';
														if (this.deviceInfo.thingsModels[k]
															.datatype.arrayParams[n]
															[m].id == prefix + message.message[j].id) {
															this.deviceInfo.thingsModels[k]
																.datatype.arrayParams[n]
																[m].shadow = message.message[j].value;
															isComplete = true;
														}
													}
													if (isComplete) {
														break;
													}
												}
											}
										} else {
											// 整数、小数和字符串类型数组
											for (let n = 0; n < this.deviceInfo.thingsModels[k]
												.datatype.arrayModel
												.length; n++) {
												if (this.deviceInfo.thingsModels[k].datatype
													.arrayModel[n].id ==
													message.message[j].id) {
													this.deviceInfo.thingsModels[k].datatype
														.arrayModel[n].shadow =
														message.message[j].value;
													isComplete = true;
													break;
												}
											}
										}
									}
								};
								// 监测数据
								for (let k = 0; k < this.deviceInfo.chartList.length && !
									isComplete; k++) {
									if (this.deviceInfo.chartList[k].id.indexOf("array_") == 0) {
										// 数组类型匹配,例如：array_00_gateway_temperature
										if (this.deviceInfo.chartList[k].id == message.message[j].id) {
											// let shadows = message[j].value.split(",");
											this.deviceInfo.chartList[k].shadow = message.message[j].value;
											// 更新图表
											for (let m = 0; m < this.monitorChart.length; m++) {
												if (this.deviceInfo.chartList[k].id == this
													.monitorChart[m].id) {
													// uchart中data取值范围0-1，需要最小数+监测值，然后除于区间值
													let value = (Number(message.message[j].value) + Math
														.abs(this
															.deviceInfo.chartList[k].datatype
															.min)) / (Math.abs(
															this.deviceInfo.chartList[k]
															.datatype.min) + Math
														.abs(this.deviceInfo.chartList[k]
															.datatype.max));
													this.monitorChart[m].data.series[0].data =
														value;
													this.monitorChart[m].opts.title.name = message.message[
															j].value + ' ' +
														this.deviceInfo.chartList[k].datatype.unit;
													break;
												}
											}
											isComplete = true;
											break;
										}
									} else {
										// 普通类型匹配
										if (this.deviceInfo.chartList[k].id == message.message[j].id) {
											this.deviceInfo.chartList[k].shadow = message.message[j].value;
											// 更新图表
											for (let m = 0; m < this.monitorChart.length; m++) {
												if (this.deviceInfo.chartList[k].id == this
													.monitorChart[m].id) {
													// uchart中data取值范围0-1，需要最小数+监测值，然后除于区间值
													let value = (Number(message.message[j].value) + Math
														.abs(this
															.deviceInfo.chartList[k].datatype
															.min)) / (Math.abs(
															this.deviceInfo.chartList[k]
															.datatype.min) + Math
														.abs(this.deviceInfo.chartList[k]
															.datatype.max));
													this.monitorChart[m].data.series[0].data =
														value;
													this.monitorChart[m].opts.title.name = message.message[
															j].value + ' ' +
														this.deviceInfo.chartList[k].datatype.unit;
													break;
												}
											}
											isComplete = true;
											break;
										}
									}
									if (isComplete) {
										break;
									}
								};
							}
						}
					}
				});
			},
			//发送指令
			async mqttPublish(device, model) {
				const command = {};
				command[model.id] = model.shadow;
				const params = {
					deviceId: device.deviceId,
					modelId: model.modelId
				}
				//判断是否有权限
				const response = await getOrderControl(params);
				if (response.code != 200) {
					uni.$u.toast(response.msg);
					return;
				}
				const data = {
					serialNumber: device.serialNumber,
					productId: device.productId,
					remoteCommand: command,
					identifier: model.id,
					modelName: model.name,
					isShadow: device.status != 3,
					type: model.type,
				}
				serviceInvoke(data).then(response => {
					if (response.code === 200) {
						uni.showToast({
							icon: 'none',
							title: this.$tt('status.service')
						});
					}
				})
			},
			// 获取下载路径前缀
			getDownloadUrl(path) {
				return projectConfig.baseUrl + path;
			},
			/** 检查升级 */
			selectUpgrade() {
				// 获取升级固件
				getLatestFirmware(this.deviceInfo.deviceId).then(response => {
					this.firmware = response.data || {};
					this.show = true;
				});
				this.show = true;
			},
			// 确认升级
			confirmUpgrade() {
				let model = {};
				model.name = this.$tt('status.equip');
				model.type = 3;
				this.mqttPublish(this.deviceInfo, model);
				this.show = false;
			},
			// 取消升级
			cancelUpgrade() {
				this.show = false;
			},
			/** 更新设备状态 */
			updateDeviceStatus(device) {
				if (device.status === 3) {
					this.title = this.$tt('status.online');
					this.bgStyle =
						'background-color:#5ac725;border-top-left-radius:6px;border-top-right-radius:6px;';
					this.shadowUnEnable = false;
				} else {
					if (device.isShadow === 1) {
						this.bgStyle =
							'background-color:#3c9cff;border-top-left-radius:6px;border-top-right-radius:6px;';
						this.title = this.$tt('status.shadow');
						this.shadowUnEnable = false;
					} else {
						this.bgStyle =
							'background-color:#909399;border-top-left-radius:6px;border-top-right-radius:6px;';
						this.title = this.$tt('status.deviceOffline');
						this.shadowUnEnable = true;
					}
				}
			},
			/** 下拉菜单改变事件*/
			dropdownChange(device, model, eventData) {
				model.shadow = eventData;
				// 防止uni-data-select在初始化的时候也触发change，产生不必要的错误
				if (eventData !== "") {
					// 发布物模型
					this.mqttPublish(device, model);
				}
			},
			// 设备通道
			getRelateChannelList() {
				return new Promise((resolve, reject) => {
					relateChannelList(this.deviceInfo.deviceId).then(response => {
						this.channelList = response.data;
						response.data.map(item => {
							item.statusInfo = getSipStatusInfo(item.status);
							return item;
						})
						resolve(response.data);
					}).catch(error => {
						reject(error);
					});
				});
			},
			gotoDevicePlayer(deviceSipId, channelSipId, status) {
				let statusInfo = getSipStatusInfo(status)
				if (status !== 3) {
					uni.showToast({
						icon: 'none',
						title: `无法查看${getSipStatusInfo(status).name}数据`
					});
					return;
				}
				// #ifdef H5
				uni.$u.route('/pages_player/list/devicePlayer', {
					deviceId: deviceSipId,
					channelSipId: channelSipId,
				});
				//#endif
				// #ifdef APP-PLUS
				uni.$u.route('/pages_player/list/devicePlayerApp', {
					deviceId: deviceSipId,
					channelSipId: channelSipId,
				});
				//#endif
				// #ifdef MP-WEIXIN
				uni.showToast({
					icon: 'none',
					title: this.$tt('timing.nosupported')
				});
				//#endif
			},
			/**监测图表*/
			initChart() {
				console.log(111)
				this.monitorChart = [];
				if (this.deviceInfo.chartList && this.deviceInfo.chartList.length !== 0) {
					for (let i = 0; i < this.deviceInfo.chartList.length; i++) {
						let data = {};
						let res = {
							categories: [{
								value: 0.2,
								color: '#409EFF'
							}, {
								value: 0.8,
								color: '#12d09f'
							}, {
								value: 1,
								color: '#F56C6C'
							}],
							series: [{
								name: this.deviceInfo.chartList[i].name,
								// uchart中data取值范围0-1，需要最小数+监测值，然后除于区间值
								data: (Number(this.deviceInfo.chartList[i].shadow) + Math.abs(
										this.deviceInfo
										.chartList[i].datatype.min)) /
									(Math.abs(this.deviceInfo.chartList[i].datatype.min) + Math
										.abs(this
											.deviceInfo
											.chartList[i].datatype.max))
							}]
						};
						data = JSON.parse(JSON.stringify(res));

						//这里的 opts 是图表类型 type="gauge" 的全部配置参数，您可以将此配置复制到 config-ucharts.js 文件中下标为 ['gauge'] 的节点中来覆盖全局默认参数。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
						// #ifdef MP-WEIXIN
						let gaugeWidth = 30;
						let pointerWidth = 30;
						// #endif
						// #ifndef MP-WEIXIN
						let gaugeWidth = 10;
						let pointerWidth = 10;
						// #endif
						let opts = {
							update: true,
							timing: 'easeOut',
							duration: 1000,
							rotate: false,
							rotateLock: false,
							color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272',
								'#FC8452',
								'#9A60B4',
								'#ea7ccc'
							],
							padding: undefined,
							fontSize: 13,
							fontColor: '#666666',
							dataLabel: true,
							dataPointShape: true,
							dataPointShapeType: 'solid',
							touchMoveLimit: 60,
							enableScroll: false,
							enableMarkLine: false,
							title: {
								name: `${!this.deviceInfo.chartList[i].shadow || this.deviceInfo.chartList[i].shadow == ' ' ? 0 : this.deviceInfo.chartList[i].shadow} ${this.deviceInfo.chartList[i].datatype.unit}`,
								fontSize: 24,
								color: '#2fc25b',
								offsetY: 95,
								offsetX: 0
							},
							subtitle: {
								name: this.deviceInfo.chartList[i].name,
								fontSize: 14,
								color: '#333',
								offsetY: 10,
								offsetX: 0
							},
							extra: {
								gauge: {
									type: 'default',
									width: gaugeWidth,
									labelColor: '#666666',
									startAngle: 0.75,
									endAngle: 0.25,
									startNumber: this.deviceInfo.chartList[i].datatype.min,
									endNumber: this.deviceInfo.chartList[i].datatype.max,
									format: 'dashboardKeepTwoDecimals',
									labelFormat: '',
									splitLine: {
										fixRadius: 0,
										splitNumber: 10,
										width: 30,
										color: '#FFFFFF',
										childNumber: 5,
										childWidth: 10
									},
									pointer: {
										width: pointerWidth,
										color: 'auto'
									},
									labelOffset: 16
								}
							}
						};
						this.monitorChart.push({
							opts: opts,
							data: data,
							id: this.deviceInfo.chartList[i].id
						});
					}
				};
				// 延时1秒执行
				setTimeout(x => {
					this.loading = false;
				}, 1000);
			},
			// 下拉刷新
			deviceStatusRefresh() {
				this.updateDeviceStatus(this.deviceInfo);
				this.monitorChart = [];
				this.initChart();
				uni.stopPullDownRefresh();
			},
			/** 枚举类型按钮单击 */
			enumButtonClick(device, model, value) {
				model.shadow = value;
				this.mqttPublish(device, model);
			},
			getKey(id, index) {
				if (index || index === 0) {
					return `${id}-${index}`;
				} else {
					return id;
				}
			},
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		height: 100%;
	}

	.wrapper {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-content: flex-start;
		padding: 20rpx;
	}

	.wrapper .item {
		width: 100%;
		height: 250px;
		text-align: center;
		// border-top: 1px solid #efefef;
	}

	.wrapper .item .dashboard {
		width: 60%;
		margin: auto;
	}

	.card {
		box-shadow: 0 1px 0px 0 rgba(0, 0, 0, 0.1);
		border-radius: 20rpx;
		background-color: #fff;

		&:not(:last-child) {
			margin-bottom: 20rpx;
		}

		.status-title {
			font-weight: bold;
			font-size: 15px;
			color: #333333;
			line-height: 42rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
			padding: 15rpx 28rpx;
		}

		.version-wrap {
			background-color: #F7F7F7;
			border-radius: 10rpx;
			padding: 0 42rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #000000;
			line-height: 42rpx;
			text-align: left;
			font-style: normal;
		}
	}

	.disabled {
		pointer-events: none;
		cursor: default;
		background-color: rgb(245, 247, 250);
	}

	.object-wrap {
		width: 100%;

		.object-title {}

		.object-content {
			// border: 1px #f1f3f4 solid;
			padding: 0px 18px;
			border-radius: 5px;

			::v-deep .u-line:first-child {
				border-bottom: transparent !important;
			}
		}
	}

	.enum-button-wrap {
		.enum-button {
			display: inline-block;
			margin-right: 10px;

			&:not(:first-child) {
				margin-top: 10px
			}
		}
	}

	.channel_wrap {
		padding: 6px 0;

		.item_body {
			position: relative;
			display: flex;
			align-items: center;
			margin-bottom: 6px;
			background: #fff;

			.img {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				border-radius: 5px;
				width: 90px;
				height: 60px;
				background: #e5e5e5;
				margin: 10px;
			}

			.status {
				position: absolute;
				right: 13px;
				top: 13px;
			}
		}
	}
</style>