<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;">我的工牌</view>
		<view class="Workcard">
			<view class="Workcard-box">
				<view class="Workcardimg">
					<image class="Workcardimg1" src="../../static/images/battery.png" mode=""></image>
				</view>
				<view class="Workcardtext">电量：96%</view>
			</view>
			<view class="Workcard-box">
				<view class="Workcardimg">
					<image class="Workcardimg1" src="../../static/images/signal5.png" mode=""></image>
				</view>
				<view class="Workcardtext">信号：弱</view>
			</view>
			<view class="Workcard-box">
				<view class="Workcardimg">
					<image class="Workcardimg3" src="../../static/images/Thtapedrive2.png" mode=""></image>
				</view>
				<view class="Workcardtext">录音：未开启</view>
			</view>
		</view>
		<view class="title">设备</view>
		<view class="shebenbox">
			<view class="shebenche">
				<view class="shebenchenum">158</view>
				<view class="shebenchetext">设备总数</view>
			</view>
			<view class="shebenche">
				<view class="shebenchenum">5</view>
				<view class="shebenchetext">在线</view>
			</view>
			<view class="shebenche">
				<view class="shebenchenum">2</view>
				<view class="shebenchetext">活跃</view>
			</view>
			<view class="shebenche">
				<view class="shebenchenum" style="color: red;">5</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">
				<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>
	export default {
		data() {
			return {
				userInfo:{},
				Showhiddenunits:false,
				lpanlist:[],
				buildingname:'',
				buildingID:'',
				buildingishow:false
			};
		},
		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
				
			}
		},
		methods: {
			//选择楼盘弹框
			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'
				});
			}
		},
	
	};
</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%;
			text-align: center;
			margin-top: 42rpx;
			.Workcardimg1{
				width: 46rpx;
				height: 28rpx;
			}
			.Workcardimg3{
				width: 28rpx;
				height: 32rpx;
			}
		}
		.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>
