<template>
	<view class="fullHeight bgLightBlue">
		<scroll-view scroll-y="true" class="pageContent">
		<headers :showBack="parentSn">
			<!-- <image @click="goBack" src="../../static/logo.png" class="backImg" v-show="showMapBack"></image> -->
			<view class="headerName">
				<!-- {{backArr.length>0?[backArr.length-1].name:'集团'}} -->
				{{currentCompany.companyName}}
			</view>
		</headers>
		<scroll-view v-if="userInfo.accountType!=5&&userInfo.accountType!=6" class="scroll-view_H" scroll-x="true">
			<view class="scroll-view-item_H" :class="activeTabIndex==-1?'active':''" @click="changeLevel(-1)">
				<text class="name">{{currentCompany.companyName=='集团'?currentCompany.companyName:'全部'}}</text>
			</view>
			<view class="scroll-view-item_H" :class="activeTabIndex==index?'active':''" v-for="(item,index) in mapData" :key="index" @click="changeLevel(index)">
				<text class="name">{{item.name}}</text>
			</view>
		</scroll-view>
		<view class="statictisBox">
			<!-- <view class="currentName">
				集团
			</view> -->
			<!-- <view class="numBox">
				<view class="num">
					1312
				</view>
				<text class="text">区域总数</text>
			</view>
			<view class="numBox">
				<view class="num">
					1312
				</view>
				<text class="text">城市总数</text>
			</view> -->
			 <!-- v-if="statisticsCount.projectcount" -->
			<view class="numBox" @click="goBackEndFn">
				<view class="num">
					{{statisticsCount.totalProjectNum}}
				</view>
				<text class="text">项目总数</text>
			</view>
			<!-- <view class="numBox" v-else>
				<view class="num">
					{{projectDetail.saleAcreage}}
				</view>
				<text class="text">建筑面积㎡</text>
			</view> -->
			<uni-icons @click="forwardFn" color="white" v-show="activeTabIndex!=-1&&!mapData[activeTabIndex].projectSn" class="forwardImg" type="arrowright" size="30"></uni-icons>
		</view>
		<view class="blockBox">
			<view class="blockTitle">
				<view class="titleName">
					数据统计
				</view>
			</view>
			<view class="blockContent">
				
				<view class="dataBox">
					<view class="dataItem">
						<view class="num primaryText">
							{{statisticsCount.devProjectNum}}
						</view>
						<view class="text">
							接入设备的项目数
						</view>
					</view>
					<view class="dataItem">
						<view class="num primaryText">
							{{statisticsCount.totalDev}}
						</view>
						<view class="text">
							总设备数量
						</view>
					</view>
				</view>
				<view class="dataBox">
					<view class="dataItem">
						<view class="num primaryText">
							{{statisticsCount.devNotOnline}}
						</view>
						<view class="text">
							离线设备数量
						</view>
					</view>
					<view class="dataItem">
						<view class="num primaryText">
							{{statisticsCount.devOnline}}
						</view>
						<view class="text">
							在线设备数量
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="blockBox">
			<view class="blockTitle">
				<view class="titleName">
					设备统计
				</view>
				<view class="statusTips">
					<view class="kuai kuai1">
						
					</view>
					<view class="text">
						设备总数
					</view>
					<view class="kuai kuai4">
						
					</view>
					<view class="text">
						设备在线数
					</view>
					<view class="kuai kuai2">
						
					</view>
					<view class="text">
						设备离线数
					</view>
				</view>
			</view>
			<view class="blockContent">
				<u-charts canvas-id="ageChart" chartType="column" :opts="ageChartData" ref="ageChart"/>
				 <!-- :cWidth="cWidth" :cHeight="cHeight" -->
				 
			</view>
		</view>
		</scroll-view>
		<footers :activeTab="'markRoom'"></footers>
	</view>
</template>

<script>
	import headers from '../../components/headers/headers.vue'
	import footers from '../../components/footers/footers.vue'
	import uCharts from '@/components/u-charts/component.vue';
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	export default {
		components:{headers,footers,uCharts,uniIcons},
		data() {
			return {
				userInfo:null,
				// showMapBack:false,
				backArr:[],
				searchsn:'',
				mapData:[],
				statisticsCount:{
					devNotOnline: 0,
					devOnline: 0,
					devProjectNum: 0,
					totalDev: 0,
					totalProjectNum: 0
				},
				ageChartData:{
					categories: [],
					series: []
				},
				activeTabIndex: -1,
				parentSn:'',
				currentCompany:{
					companyName:'集团'
				},
				// projectDetail:{}
			};
		},
		// onLoad(options) {
		// 	console.log('onLoad')
			
		// },
		onShow() {
			console.log('onShow')
			let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
			let curRoute = routes[routes.length - 1].route //获取当前页面路由
			let curParam = routes[routes.length - 1].options; //获取路由参数
			if(curParam.sn){
				this.parentSn=curParam.sn
				this.searchsn=curParam.sn
			}
			this.activeTabIndex=-1
			this.userInfo = JSON.parse(uni.getStorageSync('userInfo'))
			if(this.parentSn){
				this.loadData(false);
				this.loadStatictisData()
			}else{
				this.initData(true)
			}
		},
		mounted() {
			// console.log('mounted')
			
			
		},
		methods:{
			changeLevel(index){
				this.activeTabIndex=index
				console.log('changeLevel',index)
				if(this.activeTabIndex!=-1){
					this.searchsn=this.mapData[index].projectSn?this.mapData[index].projectSn:this.mapData[index].companySn
					// this.loadData(false);
					this.loadStatictisData()
					// if(this.mapData[index].projectSn){
					// 	this.getProjectDetail()
					// }
				}else{
					if(this.parentSn){
						this.searchsn=this.parentSn
						// this.loadData(false);
						this.loadStatictisData()
					}else{
						this.initData(true)
					}
				}
				
			},
			forwardFn(){
				var type = 'area'
				if(this.mapData[this.activeTabIndex].projectSn){
					type = 'project'
				}
				uni.navigateTo({
					url:'./markRoomManage?sn='+this.searchsn+'&type='+type
				})
			},
			initData(type) {
				var that = this
				switch (that.userInfo.accountType) {
					case 2:
						this.searchsn=that.userInfo.headquartersSn
						break;
					case 3:
						this.searchsn=that.userInfo.sn
						break;
					case 4:
						this.searchsn=that.userInfo.sn
						break;
					case 5:
						this.searchsn=that.userInfo.sn
						break;
					case 6:
						this.searchsn=that.userInfo.sn
						break;
					case 7:
						this.searchsn = that.userInfo.sn
						break;
				}
				
				// if(that.userInfo.accountType==5||that.userInfo.accountType==6){
				// 	this.getProjectDetail()
				// }else{
					this.loadData(type);
				// }
				this.loadStatictisData()
				
			},
			//获取所有企业下区域数据
			loadData(type) {
				//type：true代表第一调用
				var that = this
				this.sendRequest({
					url: "xmgl/company/getComapnyStatisticsList",
					data: {sn: this.searchsn},
					method: "POST",
					success(res){
						that.mapData = res.result.companyList?res.result.companyList:res.result.projectList
						if(res.result.companyInfo){
							that.currentCompany=res.result.companyInfo
						}
						
					}
				})
			},
			loadStatictisData() {
				var that = this
				this.sendRequest({
					url: "xmgl/standardDev/getStandardDevStatistics",
					data: {sn: this.searchsn},
					method: "POST",
					success(res){
						that.statisticsCount = res.result.count;
						let devList = res.result.devList
						var arr1 = [],xData=[]
						var arr2 = [],arr3 = []
						for (var i = 0; i < devList.length; i++) {
							let item=devList[i]
							xData.push(item.name)
							arr1.push(item.totalDev)
							arr2.push(item.devOnline)
							arr3.push(item.devNotOnline)
						}
						that.ageChartData.series=[
							{
								name: "设备总数",
								data: arr1
							},
							{
								name: "设备在线数",
								data: arr2
							},{
								name: "设备离线数",
								data: arr3
							},
						]
						that.ageChartData.categories=xData
						that.$refs.ageChart.changeData('ageChart',that.ageChartData)
					}
				})
			},
			goBackEndFn(){
				uni.navigateTo({
					url:'../areaTree/areaTree?type=markRoom'
				})
			},
			//获取项目详细
			// getProjectDetail(){
			// 	var that = this
			// 	this.sendRequest({
			// 		url: "xmgl/project/getProjectInfoBySn",
			// 		data: {projectSn: this.searchsn},
			// 		method: "POST",
			// 		success(res){
			// 			that.projectDetail=res.result
			// 		}
			// 	})
			// },
		}
	}
</script>

<style lang="scss">
.statictisBox{
	width: 100%;
	height: 150px;
	background: url(../../static/bg1.png);
	color: white;
	display: flex;
	align-items: center;
	position: relative;
	margin-top: 10px;
	.numBox{
		flex: 1;
		text-align: center;
		.num{
			font-size: 30px;
			line-height: 40px;
		}
		.text{
			font-size: 12px;
			
		}
	}
}
.forwardImg{
	position: absolute;
	right: 10px;
	top: 50%;
	margin-top: -15px;
	opacity: 0.8;
}
.statusTips{
	position: absolute;
	right: 0px;
	top: 2px;
	display: flex;
	align-items: center;
	.kuai{
		width: 12px;
		height: 12px;
		margin-left: 8px;
	}
	.text{
		font-size: 12px;
		color: $uni-text-color;
		opacity: 0.9;
		margin-left: 3px;
	}
}
.kuai1{
	background-color: $uni-color-primary;
}
.kuai2{
	background-color: $--color-primary2;
}
.kuai3{
	background-color: $--color-primary6;
}
.kuai4{
	background-color: $--color-primary3;
}
.kuaiBox{
	display: inline-flex;
	align-items: center;
	margin-bottom: 3px;
	.kuai{
		min-width: 20px;
		height: 20px;
		line-height: 20px;
		color: white;
		font-size: 12px;
	}
}
.avgageBox{
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 10px;
	color: $uni-text-color;
	.primaryText{
		margin-right: 10px;
	}
}
</style>