<template>
	<view class="fullHeight">
		<headers :showBack="true" class="">
			<view class="headerName">
				电箱管理
			</view>
		</headers>
		<view class="menuBox">
			<view class="menuItem" @click="changeMenu(0)" :class="tabIndex==0?'active':''">
				数据总览
			</view>
			<view class="menuItem" @click="changeMenu(1)" :class="tabIndex==1?'active':''">
				操作记录
			</view>
			<view class="menuItem" @click="changeMenu(2)" :class="tabIndex==2?'active':''">
				报警列表
			</view>
		</view>
		
		<view class="" v-if="tabIndex==0">
			<view class="blockBox">
				<!-- <view class="aqiBox">
					空气质量 <text class="txt">{{aqiData.analysisData}}</text><text class="txt">{{aqiData.analysisType}}</text>
				</view> -->
				<view class="numContent">
					<view class="numBox numBox1">
						<view class="num">
							{{environmentDevList.length}}
						</view>
						<view class="label">
							已有设备数量
						</view>
					</view>
					<view class="numBox">
						<view class="num">
							{{onlineDevNum}}
						</view>
						<view class="label">
							正常工作设备数量
						</view>
					</view>
				</view>
			</view>
			
			<view class="blockBox">
				<view class="selectContent" style="margin: 0 0 10px;">
					<picker mode="selector" :range="environmentDevList" @change="changeDev" range-key="devName" :value="devIndex">
						<view class="selectVideoBox">
							<text class="videoName" v-if="environmentDevList.length>0">{{environmentDevList[devIndex].devName}}</text>
							<uni-icons class="arrow" type="arrowdown" size="15"></uni-icons>
						</view>
					</picker>
				</view>
				<!-- <view class="tipsBox">
					<image src="/static/tips.png" class="alarmIcon"></image>
					<text>PM10已超标！请开启喷淋装置和防尘措施</text>
				</view> -->
				<view class="realTimeBox">
					<view class="item">
						<view class="itemInner">
							<view class="num">
								{{realTimeData.voltageA}} V
							</view>
							<view class="label">
								A相相电压值
							</view>
						</view>
					</view>
					<view class="item">
						<view class="itemInner">
							<view class="num">
								{{realTimeData.voltageB}} V
							</view>
							<view class="label">
								B相相电压值
							</view>
						</view>
					</view>
					<view class="item">
						<view class="itemInner">
							<view class="num">
								{{realTimeData.voltageC}} V
							</view>
							<view class="label">
								C相相电压值
							</view>
						</view>
					</view>
					<view class="item">
						<view class="itemInner">
							<view class="num">
								{{realTimeData.phaseCurrentA}} A
							</view>
							<view class="label">
								A相电流
							</view>
						</view>
					</view>
					<view class="item">
						<view class="itemInner">
							<view class="num">
								{{realTimeData.phaseCurrentB}} A
							</view>
							<view class="label">
								B相电流
							</view>
						</view>
					</view>
					<view class="item">
						<view class="itemInner">
							<view class="num">
								{{realTimeData.phaseCurrentC}} A
							</view>
							<view class="label">
								C相电流
							</view>
						</view>
					</view>
					<view class="item">
						<view class="itemInner">
							<view class="num">
								{{realTimeData.cableTemperatureA}} °C
							</view>
							<view class="label">
								线缆温度A
							</view>
						</view>
					</view>
					<view class="item">
						<view class="itemInner">
							<view class="num">
								{{realTimeData.cableTemperatureB}} °C
							</view>
							<view class="label">
								线缆温度B
							</view>
						</view>
					</view>
					<view class="item">
						<view class="itemInner">
							<view class="num">
								{{realTimeData.cableTemperatureC}} °C
							</view>
							<view class="label">
								线缆温度C
							</view>
						</view>
					</view>
					<view class="item">
						<view class="itemInner">
							<view class="num">
								{{realTimeData.ambientTemperature}} °C
							</view>
							<view class="label">
								环境温度
							</view>
						</view>
					</view>
					<view class="item">
						<view class="itemInner">
							<view class="num">
								{{realTimeData.electricLeakage}} mA
							</view>
							<view class="label">
								漏电流
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="blockTitle">
				设备开关
			</view>
			<view class="blockBox">
				<view class="tableBox">
					<view class="tableHead">
						<view class="item">设备名称</view>
						<!-- <view class="item">喷淋类型</view> -->
						<view class="item">操作</view>
					</view>
					<view v-for="(item,index) in environmentDevList" :key="index" class="tableBody">
						<view class="item">{{item.devName}}</view>
						<!-- <view class="item">{{item.deviceId}}</view> -->
						<view class="item">
							<image @click="commandFn(1,item.devSn)" v-if="item.lockState==2" src="/static/close.png" class="switchIcon"></image>
							<image @click="commandFn(2,item.devSn)" v-else src="/static/open.png" class="switchIcon"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="" v-if="tabIndex==1">
			<view class="selectContent selectContent2">
				<picker mode="date" @change="changeDate" :value="searchDate">
					<view class="selectVideoBox">
						<text class="videoName">{{searchDate}}</text>
						<uni-icons class="arrow" type="arrowdown" size="15"></uni-icons>
					</view>
				</picker>
				<picker mode="selector" :range="environmentDevList" @change="changeDev" range-key="devName" :value="devIndex" style="margin-left:15px">
					<view class="selectVideoBox">
						<text class="videoName" v-if="environmentDevList.length>0">{{environmentDevList[devIndex].devName}}</text>
						<uni-icons class="arrow" type="arrowdown" size="15"></uni-icons>
					</view>
				</picker>
			</view>
			<view class="blockBox" v-for="(item,index) in operateList" :key="index">
				<view class="alarmItem">
					<text class="label">操作人：</text><text class="value">{{item.realName?item.realName:'项目管理员'}}</text>
				</view>
				<view class="alarmItem">
					<text class="label">操作时间：</text><text class="value">{{item.createTime}}</text>
				</view>
			</view>
			<view class="placeholderBox" v-if="operateList.length==0">
				<image src="/static/noData.png" mode="" class="noDataImg"></image>
				<view class="text">
					暂无记录
				</view>
			</view>
		</view>
		<view class="" v-if="tabIndex==2">
			<view class="selectContent">
				<picker mode="selector" :range="environmentDevList" @change="changeDev" range-key="devName" :value="devIndex">
					<view class="selectVideoBox">
						<text class="videoName" v-if="environmentDevList.length>0">{{environmentDevList[devIndex].devName}}</text>
						<uni-icons class="arrow" type="arrowdown" size="15"></uni-icons>
					</view>
				</picker>
			</view>
			<view class="blockBox" v-for="(item,index) in alarmList" :key="index">
				<view class="alarmItem">
					<text class="label">报警类型：</text><text class="value">{{item.alarmType}}</text>
				</view>
				<view class="alarmItem">
					<text class="label">报警设备：</text><text class="value">{{item.devName}}</text>
				</view>
				<view class="alarmItem">
					<text class="label">报警时间：</text><text class="value">{{item.creatTime}}</text>
				</view>
				<view class="alarmItem">
					<text class="label">报警测量值：</text><text class="value">{{item.alarmMeasuredValue}}</text>
				</view>
			</view>
			<view class="placeholderBox" v-if="alarmList.length==0">
				<image src="/static/noData.png" mode="" class="noDataImg"></image>
				<view class="text">
					暂无报警
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import headers from "@/components/headers/headers.vue"
	import {GetDateStr} from "../../../static/js/util.js"
	export default {
		components:{headers},
		data() {
			return {
				projectDetail:'',
				environmentDevList:[],
				devIndex:0,
				realTimeData:{
					ambientTemperature: '--',
					voltageB: '--',
					voltageC: '--',
					phaseCurrentB: '--',
					phaseCurrentC: '--',
					pressure: '--',
					voltageA: '--',
					cableTemperatureC: '--',
					cableTemperatureB: '--',
					cableTemperatureA: '--',
					electricLeakage: '--',
					phaseCurrentA: '--',
				},
				alarmList:[],
				currentDevDetail:{},
				tabIndex:0,
				onlineDevNum:0,
				operateList:[],
				userId:0,
				searchDate:""
			};
		},
		mounted() {
			this.projectDetail = JSON.parse(uni.getStorageSync('projectDetail'))
			var userInfo = JSON.parse(uni.getStorageSync('userInfo'))
			this.userId=userInfo.userId
			this.searchDate=GetDateStr(0,'-')
			this.getEnvironmentDev()
		},
		methods:{
			commandFn(operateType,devSn){
				var that = this
				this.sendRequest({
					url: "xmgl/electricalLockOperateRecord/add",
					data: {
						projectSn: this.projectDetail.projectSn,
						operateType: operateType,
						devSn: devSn,
						createUser:this.userId
					},
					method: "POST",
					success(res) {
						uni.showToast({
							title:'操作成功'
						})
					}
				})
			},
			changeMenu(index){
				this.tabIndex=index;
				this.loadData()
			},
			loadData(){
				if(this.environmentDevList.length>0){
					switch (this.tabIndex){
						case 0:
							this.getEnvironmentDev()
							break;
						case 1:
							this.getOperateList()
							break;
						case 2:
							this.getAlarmData()
							break;
					}
				
					
				}
			},
			changeDate(e){
				this.searchDate = e.target.value
				this.getOperateList()
			},
			changeDev(e){
				this.devIndex = e.target.value
				this.currentDevDetail=this.environmentDevList[this.devIndex]
				this.loadData()
			},
			//获取报警列表
			getAlarmData(){
				var that = this
				this.sendRequest({
					url: "xmgl/electricAlarm/list",
					data: {
						projectSn: this.projectDetail.projectSn,
						pageNo: 1,
						pageSize: 100,
						// alarmTypeId:this.alarmTypeList[this.alarmTypeIndex].id,
						devSn: this.currentDevDetail.devSn
					},
					method: "POST",
					success(res) {
						that.alarmList = res.result.records
					}
				})
			},
			//获取设备
			getEnvironmentDev(){
				var that = this
				this.sendRequest({
					url: "xmgl/electricalDev/list",
					data: {
						projectSn: this.projectDetail.projectSn
					},
					method: "POST",
					success(res) {
						that.environmentDevList = res.result
						if(res.result.length>0){
							for (var i = 0; i < res.result.length; i++) {
								if(res.result[i].isClosed==1){
									that.onlineDevNum+=1
								}
							}
							that.currentDevDetail=res.result[that.devIndex]
							that.getRealTimeData()
						}
						
					}
				})
			},
			//获取实时数据
			getRealTimeData(){
				var that = this
				this.sendRequest({
					url: "xmgl/electricalData/getRealTimeDustNoiseData",
					data: {
						projectSn: this.projectDetail.projectSn,
						devSn: this.currentDevDetail.devSn
					},
					method: "POST",
					success(res) {
						if(res.result){
							that.realTimeData = res.result
						}else{
							that.realTimeData={
								ambientTemperature: '--',
								voltageB: '--',
								voltageC: '--',
								phaseCurrentB: '--',
								phaseCurrentC: '--',
								pressure: '--',
								voltageA: '--',
								cableTemperatureC: '--',
								cableTemperatureB: '--',
								cableTemperatureA: '--',
								electricLeakage: '--',
								phaseCurrentA: '--',
							}
						}
						
					}
				})
			},
			//获取操作记录
			getOperateList(){
				var that = this
				this.sendRequest({
					url: "xmgl/electricalLockOperateRecord/list",
					data: {
						projectSn: this.projectDetail.projectSn,
						pageNo:1,
						pageSize:100,
						devSn:this.currentDevDetail.devSn,
						startTime:this.searchDate,
						endTime:this.searchDate
					},
					method: "POST",
					success(res) {
						that.operateList = res.result.records
						
						
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.menuBox{
	display: flex;
	align-items: center;
	height: 36px;
	font-size: 15px;
	background-color: white;
	margin-top: -1px;
	position: relative;
	z-index: 999;
	border-bottom: 1px solid rgba(194, 194, 194, 0.2);
	.menuItem{
		flex: 1;
		text-align: center;
		&.active{
			color: rgba(43, 141, 243, 1);
		}
	}
}
.blockBox{
	box-shadow: 0 4px 24px 0px rgba(212, 220, 236, 0.69);
	border-radius: 8px;
	margin: 15px;
	padding: 15px;
}
.numContent{
	text-align: center;
}
.numBox{
	width: 130px;
	height: 50px;
	border-radius: 8px;
	background-image: linear-gradient(rgba(134, 145, 252, 1),rgba(16, 97, 254, 1));
	font-size: 12px;
	color: white;
	text-align: center;
	display: inline-block;
	.num{
		font-size: 15px;
		margin:5px 0 0px;
		
	}
}
.numBox1{
	margin-right: 10px;
}
.aqiBox{
	font-size: 14px;
	opacity: 0.8;
	text-align: center;
	margin-bottom: 10px;
	.txt{
		opacity: 1;
		margin-left: 15px;
		font-weight: bold;
	}
}
	.selectContent {
		text-align: center;
		margin-top: 15px;
	}

	.selectVideoBox {
		border: 1px solid rgba(42, 43, 91, 0.2);
		border-radius: 18px;
		height: 35px;
		font-size: 15px;

		display: inline-block;

		.videoName {
			padding: 0 12px 0 15px;
			// border-right: 1px solid rgba(42, 43, 91, 0.2);
			line-height: 35px;
			height: 35px;
		}

		.arrow {
			padding: 0 12px 0 2px;
		}
	}
.arrow {
		margin-left: 10px;
	}
// .tipsBox{
// 	color: rgba(236, 150, 72, 1);
// 	font-size: 14px;
// 	margin-bottom: 12px;
// 	display: flex;
// 	align-items: center;
// }
.realTimeBox{
	overflow: hidden;
	.item{
		float: left;
		width: 33.33%;
		.itemInner{
			// box-shadow: 0 4px 24px 0px rgba(212, 220, 236, 0.69);
			border: 1px solid rgba(220, 220, 220, 0.3);
			margin: 3.5px;
			font-size: 12px;
			text-align: center;
			padding: 7px 0;
		}
		.num{
			font-size: 15px;
			color: rgba(43, 141, 243, 1);
		}
	}
}
.alarmIcon{
	width: 20px;
	height: 20px;
}
.switchIcon{
	width: 50px;
	height: 29px;
}
.blockTitle{
	text-align: center;
}
.tableBox{
	font-size: 14px;
	width: 100%;
	.tableHead{
		font-weight: bold;
		display: flex;
		border-bottom: 1px solid rgba(42, 43, 91, 0.1);
		.item{
			flex: 1;
			padding: 0 0 10px;
			text-align: center;
		}
	}
	.tableBody{
		display: flex;
		align-items: center;
		.item{
			flex: 1;
			text-align: center;
			justify-content: center;
			padding: 10px 0 0px;
		}
	}
}
.chartTitle{
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 15px;
}
.selectContent2{
	display: flex;
	align-items: center;
	justify-content: center;
}
.alarmItem{
	font-size: 14px;
	.label{
		opacity: 0.6;
	}
}
</style>
