<template>
	<view class="fullHeight bgLightBlue">
		<scroll-view scroll-y="true" class="pageContent">
			<headers :showBack="parentSn">
				<view class="headerName">
					{{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="blockBox dev_bg">
				<view class="flex2" style="height: 100%;">
					<view class="text" style="width: 60%; text-align: center; font-size: 20px;color: #FFFFFF;">
						{{currentCompany.companyName}}
					</view>
					<view class="dataItem" style="text-align: center; width: 30%; color: #FFFFFF;">
						<view style="font-size: 20px;">
							{{totalDevNum}}
						</view>
						<view style="font-size: 12px;" class="text">
							设备总数
						</view>
					</view>
					<view style="text-align: center; width: 10%;height:100%;margin-top: 20px;" class="flex2">
						<uni-icons @click="forwardFn" v-show="activeTabIndex!=-1 &&!mapData[activeTabIndex].projectSn" class="forwardImg" style="color: #FFFFFF" type="arrowright"
						 size="30"></uni-icons>
					</view>
				</view>
			</view>
			<view class="blockBox">
				<view class="blockTitle flex">
					<view class="titleName">
						设备接入情况
					</view>
					<view style="font-size: 12px; color: #262D47; opacity: 0.8;">左右滑动查看更多</view>
				</view>
				<view class="flex deputyTab">
					<view :class="checkedDeputyTab==1?'checkedDeputyTab':'noDeputyTab'" @click="changeDeputyTab(1,1)">人脸</view>
					<view :class="checkedDeputyTab==2?'checkedDeputyTab':'noDeputyTab'" @click="changeDeputyTab(2,1)">视频</view>
					<view :class="checkedDeputyTab==3?'checkedDeputyTab':'noDeputyTab'" @click="changeDeputyTab(3,1)">环测</view>
				</view>


				<view class="blockContent">
					<u-charts class="ucharts" :cWidth="355" :cHeight="160" canvas-id="chartPeopleWork" chartType="column" :opts="workTypeChartData"
					 ref="chartPeopleWork" />
				</view>
			</view>
			<view class="blockBox">
				<view class="blockTitle">
					<view class="titleName">
						设备状态概况
					</view>
				</view>
				<view class="flex deputyTab">
					<view :class="checkedDeputyTab2==2?'checkedDeputyTab':'noDeputyTab'" @click="changeDeputyTab(2,2)">人脸</view>
					<view :class="checkedDeputyTab2==1?'checkedDeputyTab':'noDeputyTab'" @click="changeDeputyTab(1,2)">视频</view>
					<view :class="checkedDeputyTab2==3?'checkedDeputyTab':'noDeputyTab'" @click="changeDeputyTab(3,2)">环测</view>
				</view>
				<view class="flex2 date_wrap">
					<view style="width: 16%; font-size:14px; color: #666;">日期</view>
					<picker mode="date" :value="date1" class="date_temp" :end="endDate"  @change="(val)=>bindDateChange(val,1)">
						<view class="uni-input">{{date1}}</view>
					</picker>
					<text style="margin: 0 10px;color: #666;">-</text>
					<picker mode="date" :value="date2" class="date_temp" :end="endDate" @change="(val)=>bindDateChange(val,2)">
						<view class="uni-input">{{date2}}</view>
					</picker>
				</view>
				<view class="blockContent">
					<u-charts class="ucharts" :cWidth="355" :cHeight="220" canvas-id="integritySafety" chartType="ring" :opts="infoSafetyChartData"
					 ref="integritySafety" />
					 <view style="text-align: center;color: #848484;font-size: 14px;">在线率 {{onlineRate}}%</view>
				</view>
			</view>
			<view style="width: 100%; height: 1px;"></view>

		</scroll-view>
		<footers :activeTab="'deviceManage'"></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,
				backArr: [],
				searchsn: '',
				mapData: [],
				activeTabIndex: -1,
				parentSn: '',
				currentCompany: {
					companyName: '集团',
				},

				workTypeChartData: {
					categories: [],
					series: []
				},
				infoSafetyChartData: {
					title: {
						name: "",
						color: '#7cb5ec',
						fontSize: 25,
						offsetY: 0,
					},
					series: [{
							"data": 0,
							"color": '#1890FF',
							"name":'不在线'
						},
						{
							"data": 0,
							"color": '#E7EDF3',
							"name":'在线'
						}
					]
				},
				videoList:[],
				ufaceDevList:[],
				environmentList:[],
				totalDevNum:0, //设备总数
				onlineRate:0,
				
				checkedDeputyTab: 1, //设备接入情况
				checkedDeputyTab2: 2, //设备状态
				date1: '',
				date2: '',
			
			};
		},
		onLoad(options) {
			this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
			this.getAreaList(true);
		},
		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;
			if (this.parentSn) {
				this.getAreaList(false);
				this.loadStatictisData();
				this.getDevStateData();
			} else {
				this.initData();
			}
		},
		mounted() {
			// console.log('mounted')
			this.date1 = this.getDate('end');
			this.date2 = this.getDate('end');
		
		},

		computed: {
			endDate() {
				return this.getDate('end');
			}
		},


		methods: {
			//获取选择的最大时间
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year 
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},




			//权限判断
			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.getAreaList(type);
				}
				this.loadStatictisData();
				this.getDevStateData();

			},



			//获取区域
			getAreaList() {
				let that = this;
				this.sendRequest({
					url: "xmgl/company/getComapnyStatisticsList",
					method: 'POST',
					data: {
						sn: this.searchsn,
					},
					success(res) {
						that.mapData = res.result.companyList ? res.result.companyList : res.result.projectList
						if (res.result.companyInfo) {
							that.currentCompany = res.result.companyInfo
						}
					}
				})
			},




			//切换设备类型
			changeDeputyTab(index, type) {
				let that = this;
				if (type == 1) {
					this.checkedDeputyTab = index;
					if(index==1){
						//获取人脸数据
						let obj = {
							data: [],
							name:'',
							color: '#0F7FE7'
						};
						let titleArr = [];
						that.ufaceDevList.forEach(item => {
							titleArr.push(item.name);
							obj.data.push(item.totalDev)
						})
						that.workTypeChartData.categories = titleArr;
						that.workTypeChartData.series = [obj];
						that.$refs.chartPeopleWork.changeData('chartPeopleWork', that.workTypeChartData);
					}else if(index==2){
						//获取视频数据
						let obj = {
							data: [],
							name:'',
							color: '#0F7FE7'
						};
						let titleArr = [];
						that.videoList.forEach(item => {
							titleArr.push(item.name);
							obj.data.push(item.totalDev)
						})
						that.workTypeChartData.categories = titleArr;
						that.workTypeChartData.series = [obj];
						that.$refs.chartPeopleWork.changeData('chartPeopleWork', that.workTypeChartData);
					}else if(index==3){
						//获取环境监测数据
						let obj = {
							data: [],
							name:'',
							color: '#0F7FE7'
						};
						let titleArr = [];
						that.environmentList.forEach(item => {
							titleArr.push(item.name);
							obj.data.push(item.totalDev)
						})
						that.workTypeChartData.categories = titleArr;
						that.workTypeChartData.series = [obj];
						that.$refs.chartPeopleWork.changeData('chartPeopleWork', that.workTypeChartData);
					}
					
						
					
				} else {
					this.checkedDeputyTab2 = index;
					this.getDevStateData();
				}
			},



			//切换企业地区
			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();
					this.getDevStateData();
					if (this.mapData[index].projectSn) {
						// this.getProjectDetail()
					}
				} else {
					if (this.parentSn) {
						this.searchsn = this.parentSn
						// this.loadData(false);
						this.loadStatictisData();
						this.getDevStateData();
					} else {
						this.initData(true)
					}
				}

			},

			//获取区域下的数据
			loadStatictisData() {
				let that = this;
				this.sendRequest({
					url: 'xmgl/projectDevStatistics/selectDevStatisticsCount',
					data: {
						sn: that.searchsn,
					},
					method: 'post',
					success(res) {
						let data = res.result;
						that.videoList = data.videoList;
						that.ufaceDevList = data.ufaceDevList;
						that.environmentList = data.environmentList;
			
						//获取人脸数据
						let obj = {
							data: [],
							name:'',
							color: '#0F7FE7'
						};
						let titleArr = [];
						data.ufaceDevList.forEach(item => {
							titleArr.push(item.name);
							obj.data.push(item.totalDev)
						})
						that.workTypeChartData.categories = titleArr;
						that.workTypeChartData.series = [obj];
						that.$refs.chartPeopleWork.changeData('chartPeopleWork', that.workTypeChartData);
						that.totalDevNum = res.result.totalDevNum
					}
				})
			},

			
			//获取设备状态数据
			getDevStateData(){
				let that = this;
				this.sendRequest({
					url:'xmgl/projectDevStatistics/selectDateDevStatistics',
					method:'post',
					data:{
						type:that.checkedDeputyTab2,
						sn:that.searchsn,
						startDate:that.date1,
						endDate:that.date2,
					},
					success(res){
						that.infoSafetyChartData={
							title: {
								name:"",
								color: '#7cb5ec',
								fontSize: 25,
								offsetY: 0,
							},
							series: [{
									"data": res.result.devList[0].devNotOnline,
									color: '#1890FF',
									name:'不在线'
								},
								{
									"data": res.result.devList[0].devOnline,
									color: '#E7EDF3',
									name:'在线'
								}
							]
						},
						that.$refs.integritySafety.changeData('integritySafety', that.infoSafetyChartData);
						that.onlineRate = res.result.devList[0].totalDev!=0?(res.result.devList[0].devOnline/res.result.devList[0].totalDev)*100:0; //在线率
					}
				})
			},



			//跳转区域
			forwardFn() {
				var type = 'area';
				
			
			
				if (this.mapData[this.activeTabIndex].projectSn) {
					type = 'project'
				}
				uni.navigateTo({
					url: './deviceManage?sn=' + this.searchsn + '&type=' + type
				})
			},


		
			//切换时间
			bindDateChange(e,type) {
				if(type==1){
					this.date1 = e.detail.value;
				}else{
					this.date2 = e.detail.value;
				}
				this.getDevStateData();
			},

		}
	}
</script>

<style lang="scss">
	.flex {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.flex2 {
		display: flex;
		align-items: center;
	}

	.blockBox {
		box-sizing: border-box;
	}

	.dev_bg {
		background-image: url(../../static/bg1.png);
		background-size: 100%;
		height: 150px;
		width: 100%;
		margin-top: 5px;
	}

	.blockBox .blockTitle .titleName::before {
		height: 75%;
		top: 16%;
	}

	.labourCanvas {
		width: 100%;
		height: 120px;
	}

	.blockContent {
		position: relative;
	}

	.ucharts {
		width: 100%;
		height: 175px;
	}

	.forwardImg {
		// position: absolute;
		// right: 10px;
		// top: 50%;
		margin-top: -15px;
		opacity: 0.9;
	}

	.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;
		}
	}

	.deputyTab {
		box-sizing: border-box;
		padding: 8px 10px 0;
		margin-bottom: 12px;
		border-bottom: 1px solid #eee;
		font-size: 14px;
		color: #848484;
	}

	.checkedDeputyTab {
		font-weight: bold;
		padding-bottom: 6px;
		border-bottom: 2px #5181F6 solid;
		color: #262D47;
	}

	.noDeputyTab {
		padding-bottom: 8px;
		font-weight: initial;
	}

	.date_temp {
		height: 24px;
		line-height: 24px;
		width: 35%;
		border-bottom: 1px solid #4181FE;
		text-align: center;
	}

	.date_wrap {
		padding: 0 10px;
		padding-bottom: 10px;
		margin-bottom: 15px;
		box-sizing: border-box;
		border-bottom: 1px solid #eee;
	}
</style>
