<template>
	<view class="electricity">
		<view class="electricity-header">
			<view class="electricity-info">
				<view class="electricity-info-title-box">
					<view class="electricity-info-title">
						{{deviceInfoData && deviceInfoData.deviceName}}
					</view>
					<view class="btn-box">
						<span class="diconfont dicon-icon_xiugai" @click="editMenuShow=true"></span>
					</view>
				</view>
				<view class="electricity-info-msg">
					<view class="electricity-info-msg-text">
						<view class="msg-row">
							<view class="msg-row-label">所属项目：</view>
							<view class="msg-row-value">{{deviceInfoData && deviceInfoData.projectName}}</view>
						</view>
						<view class="msg-row">
							<view class="msg-row-label">设备组：</view>
							<view class="msg-row-value">{{deviceInfoData && deviceInfoData.groupName}}</view>
						</view>
						<view class="msg-row">
							<view class="msg-row-label">设备类型：</view>
							<view class="msg-row-value">{{deviceInfoData && deviceInfoData.deviceTypeName}}</view>
						</view>
						<view class="msg-row">
							<view class="msg-row-label">设备编号：</view>
							<view class="msg-row-value ellipsis">{{deviceInfoData && deviceInfoData.deviceKey}}</view>
						</view>
						<view class="msg-row">
							<view class="msg-row-label">注册时间：</view>
							<view class="msg-row-value">{{deviceInfoData && deviceInfoData.createTime}}</view>
						</view>
						<!-- <view class="msg-row">
							<view class="msg-row-label">设备名称：</view>
							<view class="msg-row-value">{{deviceInfoData && deviceInfoData.deviceName}}</view>
						</view> -->

						<!-- <view class="msg-row">
							<view class="msg-row-label">设备地址：</view>
							<view class="msg-row-value-box">
								<view class="msg-row-address">{{deviceInfoData && deviceInfoData.deviceAddress}}</view>
								<view class="diconfont dicon-dingwei"></view>
							</view>
						</view> -->
					</view>
					<view class="electricity-info-msg-img">
						<u-image width="160" height="160" v-if="deviceInfoData.deviceImage"
							:src="$tools.getIotFileUrl(deviceInfoData.deviceImage)"></u-image>
						<u-image width="160" height="160" v-else
							src="http://static.drgyen.com/app/hc-app-power/images/switch.png"></u-image>
						<view class="mt20"></view>
						<!-- <u-button size="mini" :custom-style="customStyle" shape="circle" :plain="true" @click="editMenuShow=true">
							<view class="diconfont dicon-icon_bianji" style="font-size: 22rpx;margin-right: 6rpx;"></view>
							修改设备
						</u-button> -->
					</view>
					<!-- <view class="electricity-info-msg-segmentation">
						<view class="electricity-info-msg-segmentation-left"></view>
						<view class="electricity-info-msg-segmentation-right"></view>
					</view> -->
				</view>
				<view class="electricity-info-address-box">
					<view class="msg-row-label">设备地址：</view>
					<view class="msg-row-value-box">
						<view class="msg-row-address">{{deviceInfoData && deviceInfoData.deviceAddress}}</view>
						<view class="diconfont dicon-dingwei"></view>
					</view>
				</view>
				<!-- 空间标签 -->
				<view class="electricity-info-label">
					<u-tag v-for="(val,i) in deviceInfoData.deviceLabel" size="mini" :key="i" :text="val" type="primary"
						style="margin-right: 10rpx;" />
				</view>
				<view class="electricity-info-state">
					<view class="electricity-info-state-box" v-if="deviceInfoData">
						<view class="electricity-info-state-box-text"
							:style="{color:deviceInfoData && deviceInfoData.deviceState=='ONLINE'?'#16D2AF':deviceInfoData.deviceState=='OFFLINE'?'#FE5277':'#aaa'}">
							{{deviceInfoData && deviceInfoData.deviceState=='ONLINE'?"在线":deviceInfoData.deviceState=='OFFLINE'?"离线":"未激活"}}
						</view>
						<view class="electricity-info-state-box-title">设备状态</view>
					</view>
					<!-- <view class="electricity-info-state-box-line"></view> -->
					<view class="electricity-info-state-box">
						<view v-if="deviceInfoData.deviceType == 'GATEWAY_CONTROLLER'" class="electricity-info-state-box-text"
							:style="{color:deviceInfoData && deviceInfoData.tenantAlarmVo?'#FE5277':'#16D2AF'}">
							{{deviceInfoData && deviceInfoData.tenantAlarmVo?"异常":"正常"}}
						</view>
						<view v-else class="electricity-info-state-box-text"
							:style="{color:deviceInfoData && deviceInfoData.deviceAlarmState?'#FE5277':'#16D2AF'}">
							{{deviceInfoData && deviceInfoData.deviceAlarmState?"异常":"正常"}}
						</view>
						<view class="electricity-info-state-box-title">报警状态</view>
					</view>
					<!-- <view class="electricity-info-state-box-line"></view> -->
					<view class="electricity-info-state-box">
						<view class="electricity-info-state-box-text">
							<template v-if="deviceInfoData.signal > 0">
								<template v-if="deviceInfoData.signal == 1">
									<image src="http://static.drgyen.com/app/hc-app-power/images/home/wisdomElectricity/onlieyg.png"
										class="ico-img"></image>
								</template>
								<template v-else-if="deviceInfoData.signal == 2">
									<image src="http://static.drgyen.com/app/hc-app-power/images/home/wisdomElectricity/onlielg.png"
										class="ico-img"></image>
								</template>
								<template v-else-if="deviceInfoData.signal == 3">
									<image src="http://static.drgyen.com/app/hc-app-power/images/home/wisdomElectricity/onliesg.png"
										class="ico-img"></image>
								</template>
								<template v-else-if="deviceInfoData.signal == 4">
									<image src="http://static.drgyen.com/app/hc-app-power/images/home/wisdomElectricity/onliesig.png"
										class="ico-img"></image>
								</template>
								<template v-else-if="deviceInfoData.signal == 5">
									<tuiIcon name="xinhaowuge" color="#16D2AF"></tuiIcon>
								</template>
							</template>
							<template v-else>
								<tuiIcon name="xinhaolx" color="#FE5277"></tuiIcon>
							</template>
							<!-- <tuiIcon :name="deviceInfoData.signal > 0?'xinhao':'xinhaolx'" :color="deviceInfoData.signal > 0?'#16D2AF':'#ff0000'"></tuiIcon> -->
							<text class="pl10"
								:style="{color:deviceInfoData.signal > 0?'#16D2AF':'#FE5277'}">{{deviceInfoData.signal > 0 ? getDictionary('signalType',deviceInfoData.stype) : '异常'}}</text>
						</view>
						<view class="electricity-info-state-box-title">信号状态</view>
					</view>
				</view>
			</view>
		</view>
		<u-notice-bar mode="horizontal" type="error" bg-color="transparent" :list="alrmNotice" :is-circular="playState"
			:play-state="playState?'play':'paused'"></u-notice-bar>
			
		<view class="home-title">
			<view class="home-title-txt">
				设备信息
			</view>
			<view class="home-title-remark"></view>
		</view>
			
		<view class="menu-box">
			<view class="home-menu-item menu-item" v-for="(item,index) in menuList" :key="index"
				@click="goFunction(item,index)">
				<view class="home-menu-item-header">
					<view class="home-menu-item-left">
						<view class="home-menu-item-name">
							{{item.name}}
						</view>
						<view class="home-menu-item-remark">
							{{item.remark}}
						</view>
					</view>
					<view class="home-menu-item-right">
						<u-icon name="arrow-right" color="#d4d4d4" size="24"></u-icon>
					</view>
				</view>
				<view class="home-menu-item-bg" :class="['diconfont',item.icon]" :style="{backgroundImage:item.background}"></view>
				<view class="home-menu-item-bg-two" :class="['diconfont',item.icon]" :style="{color:item.twoColor}"></view>
			</view>
		</view>
			
		<u-popup v-model="uploadImgFlag" mode="center" :closeable="true" border-radius="16">
			<view class="uploadImg">
				<view class="uploadImg-title">
					<text class="pr20">设备图片</text>
					<tuiIcon name="huabanx" color="#FF6600" size="50"></tuiIcon>
				</view>
				<view class="pt20 pb20">
					<u-upload ref="uUpload" max-count="1" :action="action" :header="uploadHeader" :size-type="['compressed']"
						:max-size="1024*1024" @on-success="onUploadSuccessFn"></u-upload>
				</view>
				<u-button @click="onSubmitEditImageFn" type="primary">提交</u-button>
			</view>
		</u-popup>
		<u-action-sheet :list="editMenuList" @click="selectMenu" v-model="editMenuShow"></u-action-sheet>
		<u-modal v-model="editDeviceModalShow" title="修改设备名称" :show-cancel-button="true"
			@confirm="$throttle(editDeviceNameFn, 500)">
			<view class="slot-content">
				<u-input v-model="editDeviceName" :focus="true" border type="text" placeholder="请输入设备名称"></u-input>
			</view>
		</u-modal>
	</view>
</template>
<script>
	import getDictionary from "@/utils/dataDictionary.js"
	export default {
		data() {
			return {
				menuList:[
					{
						name:'实时状态',
						remark:'掌握运行状态',
						icon:"dicon-icon_shishi",
						url:"/pages/home/wisdomElectricity/realTime/index",
						background:"linear-gradient(180deg, #6596D2, #1E5095);",
						twoColor: "rgba(29, 77, 144, 0.1);"
					},
					{
							name: "报警记录",
							remark: "数智化管理",
							icon: "dicon-icon_gaojingjilu",
							url: "./alarmRecord",
							background: "linear-gradient(0deg, #D94353, #FF887C);",
							twoColor: "rgba(217, 67, 83,0.1);"
					},
					{
							name: "用能分析",
							remark: "一目了然",
							icon: "dicon-icon_yongnengfenxi",
							url: "./energyAnalysis/index",
							background: "linear-gradient(0deg, #7244EF, #9388F9);",
							twoColor: "rgba(114, 68, 239,0.1);"
					},
					{
							name: "历史曲线",
							remark: "数据统计",
							icon: "dicon-icon_jiance",
							url: "./historyCurve/index",
							background: "linear-gradient(0deg, #2365C0, #24B4E9);",
							twoColor: "rgba(35, 101, 192,0.1);"
					},
					{
							name: "维保记录",
							remark: "精准保护",
							icon: "dicon-icon_weibao",
							url: "./wbjl/maintenanceRecord",
							background: "linear-gradient(0deg, #F28E26, #FFC574);",
							twoColor: "rgba(242, 142, 38,0.1);"
					},
					{
							name: "分合闸警示",
							remark: "开关记录",
							icon: "dicon-fenhezhajingshi",
							url: "./switchWarn",
							background: "linear-gradient(0deg, #199582, #6AD6C3);",
							twoColor: "rgba(25, 149, 130,0.1);"
					}
				],
				// 演示地址，请勿直接使用
				action: '',
				uploadHeader: {},
				editImgDataStr: "",
				uploadCode: -1,
				deviceId: "", // 设备ID
				uploadImgFlag: false,
				alrmNotice: [],
				playState: false,
				customStyle: {
					color: '#0066CC',
					borderColor: '#0066CC',
					height: '56rpx'
				},
				editMenuList: [{
						text: '修改设备名称',
					},
					{
						text: '修改设备图片',
					}
				],
				editMenuShow: false,
				editDeviceModalShow: '',
				editDeviceName: '',
				deviceInfoData: {},
			}
		},
		onLoad(e) {
			this.action = this.$config.baseUrl + "/common/upload";
			const userToken = uni.getStorageSync('userToken');
			this.uploadHeader = {
				"Authorization": userToken,
				"Content-Type": "multipart/form-data"
			}
			this.deviceId = e.deviceId;
			this.getDeviceInfoFn();
		},
		methods: {
			getDictionary,
			editDeviceNameFn() {
				let obj = {
					deviceId: this.deviceInfoData.deviceId,
					deviceName: this.editDeviceName
				}
				this.$put("/app/device/edit-image", obj).then((res) => {
					if (res.code == 200) {
						this.$u.toast(res.msg, 3000);
						this.getDeviceInfoFn();
					} else {
						this.$u.toast(res.msg, 3000);
					}
				})
			},
			selectMenu(e) {
				console.log("点击菜单", this.editMenuList[e].text)
				if (this.editMenuList[e].text == '修改设备图片') {
					this.uploadImgFlag = true;
				} else if (this.editMenuList[e].text == '修改设备名称') {
					this.editDeviceName = this.deviceInfoData.deviceName;
					this.editDeviceModalShow = true;
				}
			},
			onUploadSuccessFn(data, index, lists, name) {
				console.log(lists, "成功");
				this.uploadCode = lists[0].response.code;
				this.editImgDataStr = lists[0].response.fileName;
			},
			onSubmitEditImageFn() {
				if (this.uploadCode > -1 && this.uploadCode != 200) {
					this.$tui.toast('图片正在上传，请稍后', 3000);
					return false;
				}
				this.$put("/app/device/edit-image", {
					deviceId: this.deviceId,
					deviceImage: this.editImgDataStr
				}).then((res) => {
					console.log(res, "res");
					this.uploadCode = -1;
					if (res.code === 200) {
						this.$refs.uUpload.clear();
						this.uploadImgFlag = false;
						this.getDeviceInfoFn();
					} else {
						this.$tui.toast(res.msg, 3000)
					}
				})
			},
			// 获取设备信息
			getDeviceInfoFn() {
				// this.$get("/app/device/info",{deviceId:this.deviceId}).then((res)=>{
				this.$get("/app/device/" + this.deviceId).then((res) => {
					console.log(res, "ressda");
					if (res.data.signal) {
						res.data.signal = Number(res.data.signal);
					}
					if (res.data.deviceLabel && res.data.deviceLabel[0] == '空间') {
						res.data.deviceLabel.shift();
					}
					this.deviceInfoData = res.data;
					// this.deviceInfoData.deviceAddr = '啊哈年少多金辣三丁颗粒剂阿卡受打击考拉'
					// 最新报警
					if (res.data.tenantAlarmVo) {
						let {
							projectName,
							spaceName,
							projectAddress,
							deviceName,
							alarmTime,
							typeName
						} = res.data.tenantAlarmVo;
						let alarmStr =
							`${projectAddress || "-"} ${(projectName + spaceName) || "-"}中${deviceName || "-"} 于${alarmTime || "-"}发生${typeName || "-"}`
						this.alrmNotice.push(alarmStr);
						this.playState = true;
					} else {
						this.alrmNotice.push("暂无警报");
					}
				})
			},
			// 跳转
			goFunction(item, index) {
				console.log(item, "item");
				uni.navigateTo({
					url: `${item.url}?deviceId=${this.deviceId}&prodKey=${this.deviceInfoData.prodKey}&deviceKey=${this.deviceInfoData.deviceKey}&projectName=${this.deviceInfoData.projectName}&deviceName=${this.deviceInfoData.deviceName}`
				})
			}
		}
	}
</script>
<style lang='scss' scoped>
	::v-deep .header-bg {
		z-index: 0 !important;
	}

	.electricity {
		width: 100%;
		height: 100%;
		padding: 20rpx 45rpx;

		:not(not) {
			box-sizing: border-box;
		}

		&-header {
			width: 100%;
			position: relative;
			z-index: 1;
			padding-bottom: 0;
			margin-bottom: 10rpx;
		}

		&-info {
			width: 100%;
			height: 100%;
			border-radius: 20rpx;
			background-color: #fff;

			.electricity-info-title-box {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.electricity-info-title-box {
				background: #FFFFFF;
				border-radius: 20rpx;
				padding: 20rpx;

				.electricity-info-title {
					padding-bottom: 0;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-weight: 550;
					font-size: 36rpx;
					color: #000000;

					.btn-box {
						display: flex;
						align-items: center;

						.diconfont {
							font-size: 36rpx;
							color: #000000;
							padding: 0 10rpx 10rpx 10rpx;
						}
					}
				}
			}

			/* z-index: 1; */
			/* margin-bottom: 20rpx; */
			&-id {
				display: flex;
				justify-content: space-between;
				align-items: center;
				/* padding-bottom: 20rpx; */
				padding: 30rpx;
				padding-bottom: 0;
			}
		}

		&-info-msg {
			display: flex;
			font-size: 24rpx;
			position: relative;
			padding: 20rpx;
			padding-bottom: 0;

			.electricity-info-msg-img {
				text-align: center;
			}

			.electricity-info-msg-text {
				display: flex;
				flex-direction: column;
				justify-content: space-between;

			}

			.msg-row {
				display: flex;
				padding-bottom: 12rpx;
				width: 460rpx;

				/* border: 1px solid red; */
				&-label {
					width: 140rpx;
					text-align: right;
				}

				&-value {
					width: calc(100% - 140rpx);
				}

				.msg-row-value-box {
					display: flex;
					align-items: center;

					.msg-row-address {
						max-width: 278rpx;
						white-space: nowrap;
						/* 确保文本在一行内显示 */
						overflow: hidden;
						/* 隐藏溢出的内容 */
						text-overflow: ellipsis;
						/* 使用省略号表示文本溢出 */
					}

					.diconfont {
						color: #0066CC;
						font-size: 32rpx;
					}
				}
			}



			&-segmentation {
				position: absolute;
				left: 0;
				bottom: -20rpx;
				width: 100%;
				display: flex;
				justify-content: space-between;

				&-left,
				&-right {
					width: 40rpx;
					height: 40rpx;
					background-color: #1C9AFF;
					border-radius: $uni-border-radius-circle;
				}

				&-left {
					transform: translateX(-20rpx);
				}

				&-right {
					transform: translateX(20rpx);
				}
			}
		}

		.electricity-info-address-box {
			display: flex;
			font-size: 24rpx;
			padding: 0 20rpx;
			padding-bottom: 12rpx;

			.msg-row-label {
				width: 140rpx;
				text-align: right;
			}

			.msg-row-value-box {
				width: calc(100% - 140rpx);
			}

			.msg-row-value-box {
				display: flex;
				/* align-items: center; */

				.msg-row-address {
					/* white-space: nowrap; */
					/* 确保文本在一行内显示 */
					/* overflow: hidden; */
					/* 隐藏溢出的内容 */
					/* text-overflow: ellipsis; */
					/* 使用省略号表示文本溢出 */
				}

				.diconfont {
					color: #0066CC;
					font-size: 32rpx;
				}
			}
		}
		
		

		.electricity-info-label {
			padding: 0 30rpx;
			padding-bottom: 12rpx;
		}
		
		.home-title {
			display: flex;
			align-items: center;
			padding: 10rpx 15rpx;
		
			.home-title-txt {
				font-weight: 600;
				font-size: 36rpx;
			}
		
			.home-title-remark {
				margin-left: 20rpx;
				font-size: 20rpx;
				color: #999999;
			}
		}
		
		.menu-box{
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			margin-top: 20rpx;
			.menu-item{
				width: 320rpx;
				height: 200rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				padding: 30rpx 20rpx 15rpx 30rpx;
				margin-bottom: 20rpx;
				position: relative;
				
				&:nth-child(2n-1) {
					margin-right: 20rpx;
				}
				.home-menu-item-header {
					display: flex;
					// align-items: center;
					justify-content: space-between;
				
					.home-menu-item-name {
						font-weight: 550;
						font-size: 28rpx;
					}
					.home-menu-item-remark {
						font-size: 20rpx;
						color: #999999;
						margin-top: 10rpx;
					}
				
					.home-menu-item-right {
						width: 38rpx;
						height: 38rpx;
						background: #EFEFEF;
						border-radius: 50%;
						padding-left: 2rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
				.home-menu-item-value{
					position: absolute;
					left: 30rpx;
					bottom: 26rpx;
					font-size: 24rpx;
					font-weight: 550;
				}
				.home-menu-item-bg {
					position: absolute;
					right: 37rpx;
					bottom: 26rpx;
					font-size: 75rpx;
					z-index: 99;
					color: transparent;
					display: inline-block;
					-webkit-background-clip: text;
				}
				.home-menu-item-bg-two{
					position: absolute;
					right: 44rpx;
					bottom: 26rpx;
					font-size: 75rpx;
					z-index: 98;
				}
			}
			.border-box{
				height:1px;
				background: #E0E3E5;
			}
		}

		&-info-state {
			display: flex;
			padding: 30rpx;
			justify-content: space-between;

			&-box {
				width: 32%;
				/* padding-top: 30rpx; */
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				&-title {
					padding-bottom: 10rpx;
				}

				&-text {
					color: #289A00;
					font-size: 32rpx;
					font-weight: bold;
					display: flex;
					justify-content: center;
					align-items: center;

					.ico-img {
						width: 32rpx;
						height: 32rpx;
					}
				}
			}

			&-box-line {
				width: 2rpx;
				height: 70rpx;
				background: #ccc;
				margin-top: 10rpx;
			}
		}

		.function-list {
			padding: $paddingTB $paddingLR;
		}

		.icon-bg-box {
			padding: 20rpx;
			border-radius: 24rpx;
			margin-bottom: 20rpx;
			transform: rotate(45deg);

			.diconfont {
				transform: rotate(-45deg);
				font-size: 50rpx;
				color: #FFF;
			}
		}

		.uploadImg {
			padding: 70rpx 30rpx 40rpx 30rpx;
			width: 600rpx;

			/* height:; */
			&-title {
				font-size: $uni-font-size-lg;
				font-weight: 550;
				display: flex;
				padding-bottom: 20rpx;
				border-bottom: 1px solid #eee;
			}
		}
	}

	.slot-content {
		padding: 20rpx 30rpx;
	}
</style>