<template>
	<view class="cented-box">
		<view class="Switchingbox"> 
			<view class="Switching1">
				<image class="Switching1-img" src="../../static/images/building.png" mode=""></image>
			</view>
			<view class="Switching2">楼盘：</view>
			<view class="Switching3">{{buildingname}}</view>
			<view class="Switching4" v-if="buildingishow" @click="piskbuilding()">切换楼盘</view>
		</view>
		
		<view class="title" style="margin-top: 30rpx;" v-if="Myworkcard">我的工牌</view>
		<view v-if="Myworkcard">	
			<view class="Workcard" v-if="Whetheroffline==true">
				<view class="Workcard-box">
					<view class="Workcardimg">
						<view class="Workcardimg1">
							<view v-if="percentage>20" class="bar" :style="{width : percentage + '%' }"></view>
							<view v-if="percentage<20" class="bar1" :style="{width : percentage + '%' }"></view>
						</view>
					</view>
					<view class="Workcardtext">电量：{{percentage}}%</view>
				</view>
				<view class="Workcard-box">
					<view class="Workcardimg">
						<image v-if="signalDevice==''" class="Workcardimg2" src="../../static/images/signal0.png" mode=""></image>
						<image v-else-if="signalDevice<20 && signalDevice>0" class="Workcardimg2" src="../../static/images/signal1.png" mode=""></image>
						<image v-else-if="signalDevice<50 && signalDevice>20" class="Workcardimg2" src="../../static/images/signal2.png" mode=""></image>
						<image v-else-if="signalDevice<70 && signalDevice>50" class="Workcardimg2" src="../../static/images/signal3.png" mode=""></image>
						<image v-else-if="signalDevice<90 && signalDevice>70" class="Workcardimg2" src="../../static/images/signal4.png" mode=""></image>
						<image v-else-if="signalDevice<=100 && signalDevice>90" class="Workcardimg2" src="../../static/images/signal5.png" mode=""></image>
					</view>
					<view class="Workcardtext">信号：{{signalDevicetext}}</view>
				</view>
				<view class="Workcard-box">
					<view class="Workcardimg">
						<image v-if="audioStatus=='true'" class="Workcardimg3" src="../../static/images/Thtapedrive1.png" mode=""></image>
						<image v-if="audioStatus=='false'" class="Workcardimg3" src="../../static/images/Thtapedrive2.png" mode=""></image>
					</view>
					<view v-if="audioStatus=='true'" class="Workcardtext">录音：已开启</view>
					<view v-if="audioStatus=='false'" class="Workcardtext">录音：未开启</view>
				</view>
			</view>
			<view class="Workcard" v-if="Whetheroffline==false">
				<view class="Workcard-box">
					<view class="Workcardimg">
						<image class="Workcardimg4" src="../../static/images/offline.png" mode=""></image>
					</view>
					<view class="Workcardtext">设备离线</view>
				</view>
			</view>
		</view>
		
	
		
		<view class="title" v-if="equipmentisshow">设备</view>
		<view class="shebenbox" v-if="equipmentisshow">
			<view class="shebenche">
				<view class="shebenchenum">{{equipmentobj.totalNum}}</view>
				<view class="shebenchetext">设备总数</view>
			</view>
			<view class="shebenche">
				<view class="shebenchenum">{{equipmentobj.onlineNum}}</view>
				<view class="shebenchetext">在线</view>
			</view>
			<view class="shebenche">
				<view class="shebenchenum">{{equipmentobj.activeNum}}</view>
				<view class="shebenchetext">活跃</view>
			</view>
			<view class="shebenche">
				<view class="shebenchenum" style="color: red;">{{equipmentobj.lowPowerNum}}</view>
				<view class="shebenchetext">急需充电</view>
			</view>
		</view>
		
		
		
		<view class="title">实时统计</view>
		<view class="real-timebox">
			<view class="timebox">
				<view class="real">
					<view class="realnum">44</view>
					<view class="realtext">接待量</view>
				</view>
				<view class="real">
					<view class="realnum">44</view>
					<view class="realtext">正在接待</view>
				</view>
				<view class="real">
					<view class="realnum">44</view>
					<view class="realtext">接待客户</view>
				</view>
				<view class="real">
					<view class="realnum">44</view>
					<view class="realtext">录音时长</view>
				</view>
			</view>
			<view class="timebox">
				<view class="real">
					<view class="realnum">44</view>
					<view class="realtext">未标顾问</view>
				</view>
				<view class="real">
					<view class="realnum">44</view>
					<view class="realtext">平均执行率</view>
				</view>
				<view class="real">
					<view class="realnum">44</view>
					<view class="realtext">平均得分</view>
				</view>
				<view class="real">
					<!-- <view class="realnum" style="color: red;">44</view>
					<view class="realtext">违禁提醒</view> -->
				</view>
			</view>
		</view>
		
		<view class="title">本周工作</view>
		<view class="real-timebox">
			<view class="timebox">
				<view class="real">
					<view class="realnum">44</view>
					<view class="realtext">接待量</view>
				</view>
				<view class="real">
					<view class="realnum">44</view>
					<view class="realtext">接待客户</view>
				</view>
				<view class="real">
					<view class="realnum">44</view>
					<view class="realtext">录音时长</view>
				</view>
			</view>
			<view class="timebox">
				
				<view class="real">
					<view class="realnum">44</view>
					<view class="realtext">平均执行率</view>
				</view>
				<view class="real">
					<view class="realnum">44</view>
					<view class="realtext">平均得分</view>
				</view>
				<view class="real">
					<!-- <view class="realnum">44</view>
					<view class="realtext">违禁预警</view> -->
				</view>
			</view>
		</view>
		
		<view class="title">常用功能</view>
		<view class="commonly-box">
			<view class="commonly" @click="Piabodata()">
				<view class="commonly-img">
					<image class="commonly-img1" src="../../static/images/building.png" mode=""></image>
				</view>
				<view class="commonly-text">销讲数据</view>
			</view>
			<view class="commonly" @click="record">
				<view class="commonly-img">
					<image class="commonly-img1"  src="../../static/images/building.png" mode=""></image>
				</view>
				<view class="commonly-text">接待记录</view>
			</view>
			<view class="commonly" @click="toequipment()">
				<view class="commonly-img">
					<image class="commonly-img1" src="../../static/images/building.png" mode=""></image>
				</view>
				<view class="commonly-text">设备管理</view>
			</view>
			
			<view class="commonly" @click="toconsultanonduty()">
				<view class="commonly-img">
					<image class="commonly-img1" src="../../static/images/building.png" mode=""></image>
				</view>
				<view class="commonly-text">值班顾问</view>
			</view>
			
			<view class="commonly" @click="goConsumer()">
				<view class="commonly-img">
					<image class="commonly-img1" src="../../static/images/building.png" mode=""></image>
				</view>
				<view class="commonly-text">客户管理</view>
			</view>
			<view class="commonly">
				<view class="commonly-img">
					<image class="commonly-img1" src="../../static/images/building.png" mode=""></image>
				</view>
				<view class="commonly-text">客户管理</view>
			</view>
			<view class="commonly">
				<view class="commonly-img">
					<image class="commonly-img1" src="../../static/images/building.png" mode=""></image>
				</view>
				<view class="commonly-text">客户管理</view>
			</view>
		</view>
		
		
		<!-- 楼盘切换 -->
		<view v-if="Showhiddenunits">
			<u-select :mask-close-able="false" v-model="Showhiddenunits" mode="single-column" :list="lpanlist" @cancel="cancel" @confirm="confirm"></u-select>
		</view>
	</view>
</template>

<script>
	var config = require("../../config");
	export default {
		data() {
			return {
				userInfo:{},
				Showhiddenunits:false,
				lpanlist:[],//楼盘列表
				buildingname:'',//楼盘名
				buildingID:'',//楼盘id
				buildingishow:false,//是否选择楼盘
				Myworkcard:false,
				percentage:'',//设备电量
				Whetheroffline:false,//是否离线
				signalDevice:0,//信号
				signalDevicetext:"",
				audioStatus:false,
				equipmentisshow:false,
				equipmentobj:{
					totalNum:'',
					onlineNum:'',
					activeNum:'',
					lowPowerNum:'',
				}
			};
		},
		components: {},
		onShow() {
			this.userInfo = uni.getStorageSync('weapp_session_userInfo_data');
			if(this.userInfo.zkProperties.length==1){
				this.buildingID=uni.getStorageSync('buildingID').id;
				this.buildingname=uni.getStorageSync('buildingID').name;
				this.buildingishow=false;
			}else{
				this.buildingishow=true;
				this.buildingname=uni.getStorageSync('buildingID').name;
				this.buildingID=uni.getStorageSync('buildingID').id;
				this.userInfo.zkProperties.forEach(item=>{
					item.label=item.propertyName;
					item.value=item.id
				})
				this.lpanlist=this.userInfo.zkProperties
			}
			if (this.userInfo.dataCode == 6) {
				this.Myworkcard=true;
				this.equipmentisshow=false;
				this.iniodianloang()
			}else{
				this.equipmentisshow=true;
				this.Myworkcard=false;
				this.initequipment()
			}
			this.initworkThisWeek()
			// this.initrealTimeStatistics()
		},
		methods: {
			initworkThisWeek(){
				uni.request({
					url: config.service.workThisWeek,
					method: "POST",
					header: {
						'content-type': 'application/json',
						'Access-Token': uni.getStorageSync('weapp_session_login_data').token
					},
					data: {
						houseId:this.buildingID
					},
					success: (data) => {
						if (data.data.data == null) {
							return
						}else{
							
						}
					}
				})
			},
			//实时统计
			initrealTimeStatistics(){
				uni.request({
					url: config.service.realTimeStatistics,
					method: "POST",
					header: {
						'content-type': 'application/json',
						'Access-Token': uni.getStorageSync('weapp_session_login_data').token
					},
					data: {
						houseId:this.buildingID
					},
					success: (data) => {
						if (data.data.data == null) {
							return
						}else{
							
						}
					}
				})
			},
			//设备
			initequipment(){
				uni.request({
					url: config.service.findEquipmentState,
					method: "POST",
					header: {
						'content-type': 'application/json',
						'Access-Token': uni.getStorageSync('weapp_session_login_data').token
					},
					data: {
						propertyId:this.buildingID
					},
					success: (data) => {
						if (data.data.data == null) {
							return
						}else{
							this.equipmentobj={
								totalNum:'0',
								onlineNum:'0',
								activeNum:'0',
								lowPowerNum:'0',
							}
						}
					}
				})
			},
			//我的工牌
			iniodianloang() {
				uni.request({
					url: config.service.findElectricity,
					method: "POST",
					header: {
						'content-type': 'application/json',
						'Access-Token': uni.getStorageSync('weapp_session_login_data').token
					},
					data: {},
					success: (data) => {
						if (data.data.data == null) {
							return
						} else {
							if (data.data.data > 100) {
								this.percentage = 100;
							} else {
								if(data.data.data.onLine==0){
									this.Whetheroffline=false;
								}else{
									this.Whetheroffline=true;
									this.percentage = data.data.data.electricity;
									this.signalDevice=data.data.data.signalDevice/1;
									console.log(this.signalDevice)
									this.audioStatus=data.data.data.audioStatus;
									if(this.signalDevice>80){
										this.signalDevicetext='高';
									}else{
										if(this.signalDevice==0){
											this.signalDevicetext='无';
										}else{
											this.signalDevicetext='低';
										}
									}
								}	
								
							}	
						}
					}
				})
			},
			//选择楼盘弹框
			piskbuilding(){
				this.Showhiddenunits=true;
			},
			// 楼盘选择确认
			confirm(e) {
				this.buildingname=e[0].label;
				this.buildingID=e[0].value;
				let lopan={
					id:e[0].value,
					name:e[0].label
				}
				uni.setStorageSync("buildingID", lopan); //楼盘id写入缓存
			},
			// 楼盘选择取消
			cancel(){
				this.Showhiddenunits=false;
			},
			//销讲数据
			Piabodata(){
				uni.navigateTo({
				    url: '/pages/center/Piabodata/index'
				});
			},
			// 接待记录
			record(){
				uni.navigateTo({
				    url: '/pages/center/records/index'
				});
			},
			//值班顾问
			toconsultanonduty(){
				uni.navigateTo({
				    url: '/pages/mine/consultanonduty/index'
				});
			},
			//设备
			toequipment(){
				uni.navigateTo({
				    url: '/pages/mine/equipment/index'
				});
			},
			// 客户管理
			goConsumer(){
				uni.navigateTo({
				    url: '/pages/center/consumer/index'
				});
			},
		},
	
	};
</script>

<style lang="scss" scoped>
.cented-box{
	padding: 30rpx;
	background: #F8F8F8;
	width: 100%;
	height: 100%;
}
.Switchingbox{
	width: 100%;
	height: 44rpx;
	display: flex;
	align-items: center;
	.Switching1{
		width: 44rpx;
		height: 44rpx;
		.Switching1-img{
			width: 44rpx;
			height: 44rpx;
		}
	}
	.Switching2{
		margin-left: 12rpx;
		font-size: 32rpx;
		color: #303030;
		font-weight: 500;
	}
	.Switching3{
		width: calc(100% - 280rpx);
		font-size: 32rpx;
		color: #303030;
		font-weight: 500;
	}
	.Switching4{
		width: 112rpx;
		font-size: 28rpx;
		color: #303030;
		font-weight: 400;
		text-align: right;
		text-decoration:underline
	}
}
.Workcard{
	width: 100%;
	background: #FFFFFF;
	height: 154rpx;
	box-shadow: 0px 0px 12px 0px rgba(224, 224, 224, 0.3);
	border-radius: 12rpx;
	display: flex;
	.Workcard-box{
		flex: 1;
		height: 100%;
		.Workcardimg{
			width: 100%;
			display: flex;
			justify-content: center;
			margin-top: 42rpx;
			.Workcardimg1{
				width: 64rpx;
				height: 36rpx;
				background-image: url(../../static/images/battery.png);
				background-size: 100% 100%;
				padding: 8rpx;
				.bar {
					background-color: #43CD80;
					height: 100%;
					border-radius: 4rpx;
				}	
				.bar1 {
					background-color: red;
					height: 100%;
					border-radius: 4rpx;
				}	
			}
			.Workcardimg2{
				width: 56rpx;
				height: 36rpx;
			}
			.Workcardimg3{
				width: 34rpx;
				height: 36rpx;
			}
			.Workcardimg4{
				width: 50rpx;
				height: 40rpx;
			}
		}
		.Workcardtext{
			width: 100%;
			text-align: center;
			font-size: 24rpx;
			font-weight: 400;
			color: #666666;
			margin-top: 20rpx;
		}
	}
}
.title{
	width: 100%;
	height: 30rpx;
	font-size: 30rpx;
	font-weight: 600;
	color: #333333;
	margin-top: 40rpx;
	margin-bottom: 24rpx;
}
.shebenbox{
	width: 100%;
	height: 156rpx;
	background: #FFFFFF;
	box-shadow: 0px 0px 12px 0px rgba(224, 224, 224, 0.3);
	border-radius: 12rpx;
	display: flex;
	.shebenche{
		width: 25%;
		height: 100%;
		.shebenchenum{
			width: 100%;
			font-size: 36rpx;
			font-weight: 600;
			color: #333333;
			text-align: center;
			margin-top: 36rpx;
		}
		.shebenchetext{
			width: 100%;
			font-size: 24rpx;
			font-weight: 400;
			color: #666666;
			text-align: center;
			margin-top: 24rpx;
		}
	}
}
.real-timebox{
	width: 100%;
	background: #FFFFFF;
	box-shadow: 0px 0px 12px 0px rgba(224, 224, 224, 0.3);
	border-radius: 12rpx;
	padding-bottom: 36rpx;
	.timebox{
		width: 100%;
		display: flex;
		.real{
			flex: 1;
			height: 100%;
			.realnum{
				width: 100%;
				font-size: 36rpx;
				font-weight: 600;
				color: #333333;
				text-align: center;
				margin-top: 36rpx;
			}
			.realtext{
				width: 100%;
				font-size: 24rpx;
				font-weight: 400;
				color: #666666;
				text-align: center;
				margin-top: 24rpx;
			}
		}
	}

}
.commonly-box{
	width: 100%;
	background: #FFFFFF;
	box-shadow: 0px 0px 12px 0px rgba(224, 224, 224, 0.3);
	border-radius: 12rpx;
	display: flex;
	flex-wrap: wrap;
	padding-bottom: 36rpx;
	.commonly{
		width: 25%;
		margin-top: 36rpx;
		.commonly-img{
			width: 100%;
			height: 68rpx;
			text-align: center;
			.commonly-img1{
				width: 68rpx;
				height: 68rpx;
				border-radius: 50%;
			}
		}
		.commonly-text{
			width: 100%;
			text-align: center;
			font-size: 24rpx;
			font-weight: 400;
			color: #333333;
			margin-top: 16rpx;
		}
	}
}
</style>
