<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">
				<view class="blockContent">
					<u-charts class="labourCanvas" :cWidth="355" :cHeight="120" canvas-id="labourCanvas" chartType="arcbar" :opts="personnelsChartData"
					 ref="labourCanvas" />
					<uni-icons @click="forwardFn" v-show="activeTabIndex!=-1&&!mapData[activeTabIndex].projectSn" class="forwardImg" style="color: #007AFF;" type="arrowright" size="30"></uni-icons>
					<view class="dataBox">
						<view class="dataItem">
							<view class="text">
								在场
							</view>
							<view class="num primaryText" style="color: #FFB512;">
								{{listData.presencecount?listData.presencecount.totalPerson:0}}
							</view>
						</view>
						<view class="dataItem">
							<view class="text">
								实名制
							</view>
							<view class="num primaryText" style="color: #0CCD90;">
								{{listData.workercount?listData.workercount.totalPerson:0}}
							</view>
						</view>
						<view class="dataItem">
							<view class="text">
								在职
							</view>
							<view class="num primaryText" style="color: #0F7FE7;">
								{{listData.workercount?listData.workercount.totalPerson:0}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="blockBox">
				<view class="blockTitle flex">
					<view class="titleName">
						现场人员分析
					</view>
					<uni-icons type="arrowright" color="#007aff" @click="goAnalyse" style="font-weight: 700;font-size: 20px;" />
				</view>
				<view class="blockContent">

					<view class="dataBox">
						<view class="dataItem">
							<view class="num primaryText">
								{{listData.presencecount?listData.presencecount.lwPersonTotal:0}}
							</view>
							<view class="text">
								在场劳务人员
							</view>
						</view>
						<view class="dataItem">
							<view class="num primaryText">
								{{listData.presencecount?listData.presencecount.glPersonTotal:0}}
							</view>
							<view class="text">
								在场管理人员
							</view>
						</view>
					</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="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 flex">
					<view class="titleName">
						工人年龄统计
					</view>
					<view style="font-size: 12px; opacity: 0.8;" class="flex">
						<view style="width:10px;height:10px; background-color:#2A8BE7; margin-right: 5px;"></view>在场人数
						<view style="width:10px;height:10px; background-color:#80D5FF; margin:0 5px 0 10px;"></view> 在职人数
					</view>
				</view>
				<view class="blockContent">
					<u-charts class="ucharts" :cWidth="355" :cHeight="160" canvas-id="chartProjectAge" chartType="column" :opts="ageChartData"
					 ref="chartProjectAge" />
				</view>
				<view class="flex" style="margin: 5px; font-size: 14px;">
					<text>平均年龄</text>
					<view>
						<text style="margin-right: 13px;color: #2A8BE7;">在场：{{listData.presencecount?listData.presencecount.avgage.toFixed(0):0}}岁</text>
						<text style="color: #80D5FF">在职：{{listData.workercount?listData.workercount.avgage.toFixed(0):0}}岁</text>
					</view>
				</view>
			</view>
			<view class="blockBox">
				<view class="blockTitle">
					<view class="titleName">
						入场培训教育交底
					</view>
				</view>
				<view class="blockContent">
					<u-charts class="ucharts" :cWidth="355" :cHeight="130" canvas-id="integritySafety2" chartType="ring" :opts="infoSafetyChartData"
					 ref="integritySafety2" />
				</view>
			</view>
			<view style="width: 100%; height: 1px;"></view>

		</scroll-view>
		<footers :activeTab="'personManage'"></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,
				listData: {}, // 页面数据集
				// showMapBack:false,
				backArr: [],
				searchsn: '',
				mapData: [],
				activeTabIndex: -1,
				parentSn: '',
				currentCompany: {
					companyName: '集团',
				},
				//头部半环数据
				personnelsChartData: {
					series: [{
							name: '劳务',
							data: 0,
							color: '#FFB512',
						},
						{
							name: '',
							data: 0,
							color: '#0CCD90',
						},
						{
							name: '',
							data: 0,
							color: '#0F7FE7',

						},
					]
				},
				workTypeChartData: {
					categories: [],
					series: []
				},
				ageChartData: {
					categories: [
						"18及以下",
						"18-25岁",
						"25-35岁",
						"35-45岁",
						"45-59岁",
						"60及以上",
					],
					series: [{
							data: [],
							color: '#2A8BE7'
						},
						{
							data: [],
							color: '#80D5FF'
						},
					]
				},
				infoSafetyChartData: {
					title: {
						name: "",
						color: '#7cb5ec',
						fontSize: 25,
						offsetY: 0,
					},
					series: [{
							"data": 0,
							color: '#1890FF'
						},
						{
							"data": 0,
							color: '#E7EDF3'
						}
					]
				}
			};
		},
		onLoad(options) {
			this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
			this.getAreaList(true);
		},
		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;
			if (this.parentSn) {
				this.getAreaList(false);
				this.loadStatictisData()
			} else {
				this.initData();
			}
		},
		mounted() {
			// console.log('mounted')


		},
		methods: {
			//权限判断
			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 || that.userInfo.accountType == 10) {
					// this.getProjectDetail()
				} else {
					this.getAreaList(type);
				}
				this.loadStatictisData()

			},



			//获取区域
			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
						}
					}
				})
			},



			//切换企业地区
			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)
					}
				}

			},

			//获取区域下的数据
			loadStatictisData() {
				let that = this;
				this.sendRequest({
					url: 'xmgl/workerInfo/selectWorkerManageStatistics',
					data: {
						sn: that.searchsn,
					},
					method: 'post',
					success(res) {
						let data = res.result;
						that.listData = data;
						//头部半圆数据
						let count = (data.presencecount.totalPerson + data.workercount.totalPerson * 2) / 100;
						that.personnelsChartData = {
							series: [{
									name: '劳务',
									data: (data.presencecount.totalPerson / count) / 100,
									color: '#FFB512',
								},
								{
									name: '',
									data: (data.workercount.totalPerson / count) / 100,
									color: '#0CCD90',
								},
								{
									name: '',
									data: (data.workercount.totalPerson / count) / 100,
									color: '#0F7FE7',

								},
							]
						};
						that.$refs.labourCanvas.changeData('labourCanvas', that.personnelsChartData);
						//获取工种信息
						let obj = {
							data: [],
							color: '#0F7FE7',
							name:'',
						};
						let titleArr = [];
						data.workerTypeList.forEach(item => {
							titleArr.push(item.typeName);
							obj.data.push(item.personNum)
						})
						that.workTypeChartData.categories = titleArr;
						that.workTypeChartData.series = [obj];
						that.$refs.chartPeopleWork.changeData('chartPeopleWork', that.workTypeChartData);
						//获取工人年龄统计
						that.ageChartData.series = [{
								data: [data.presencecount.age18, data.presencecount.age18to25, data.presencecount.age25to35,
									data.presencecount.age35to45, data.presencecount.age45to60, data.presencecount.age60
								],
								color: '#2A8BE7',
								name:'在场人数',
							},
							{
								data: [data.workercount.age18, data.workercount.age18to25, data.workercount.age25to35,
									data.workercount.age35to45, data.workercount.age45to60, data.workercount.age60
								],
								color: '#80D5FF',
								name:'在职人数',
							},
						];
						that.$refs.chartProjectAge.changeData('chartProjectAge', that.ageChartData);

						//获取培训数据
						let trainingNum = (data.workercount.eduPersonTotal / data.workercount.totalPerson) * 100;

						that.infoSafetyChartData.title = {
							name: Number.isNaN(trainingNum) ? '0%' : Number(trainingNum.toFixed(2)) + "%",
							color: '#7cb5ec',
							fontSize: 25,
							offsetY: 0,
						};
						that.infoSafetyChartData.series = [{
								"data": Number.isNaN(trainingNum) ? 0 : Number(trainingNum.toFixed(2)),
								color: '#1890FF'
							},
							{
								"data": Number.isNaN(trainingNum) ? 0 : Number((100 - trainingNum).toFixed(2)),
								color: '#E7EDF3'
							}
						];

						that.$refs.integritySafety2.changeData('integritySafety2', that.infoSafetyChartData);

					}
				})
			},




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


			//现场人员分析
			goAnalyse() {
				let title = this.activeTabIndex == -1 ? '集团' : this.mapData[this.activeTabIndex].name;
				uni.navigateTo({
					url: './peopleAnalyze?sn=' + this.searchsn + '&title=' + title,
				})
			},


		}
	}
</script>

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

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

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