<template>
	<view class="fullHeight bgLightBlue">
		<scroll-view scroll-y="true" class="pageContent">
			<view class="title flex">
				<uni-icons @click="goback" class="forwardImg" style="font-weight: 700;" type="arrowleft" size="22"></uni-icons>
				<text style="margin-left:-22px">{{title}}</text>
				<text></text>
			</view>
			<view class="banner_bg flex">
				<view class="type">
					<view>{{listData.workercount?listData.workercount.lwPersonTotal:0}}</view>
					<view class="type_name">在职劳务人员</view>
				</view>
				<view class="type">
					<view>{{listData.workercount?listData.workercount.glPersonTotal:0}}</view>
					<view class="type_name">在职管理人员</view>
				</view>
			</view>
			<view class="statistics1">
				<view class="flex wake">
					<view class="type color1">
						<view class="font_24">{{listData.currentAttendance?Number(listData.currentAttendance.glPersonTotal+listData.currentAttendance.lwPersonTotal):0}}</view>
						<view class="type_name color2">当日出勤人数</view>
					</view>
					<view class="type color1">
						<view class="font_24">{{listData.workercount?Number(listData.currentAttendance.glPersonTotal+listData.currentAttendance.lwPersonTotal)/listData.workercount.totalPerson:0}}%</view>
						<view class="type_name color2">昨日出勤率</view>
					</view>
				</view>
			<!-- 	<view class="flex wake">
					<view class="type color3">
						<view class="font_24">22</view>
						<view class="type_name color2">当日出勤工种</view>
					</view>
					<view class="type color3">
						<view class="font_24">22</view>
						<view class="type_name color2">昨日出勤工种数</view>
					</view>
				</view> -->
				<view class="flex wake">
					<view class="type color1" >
						<view class="font_24">{{listData.workercount?listData.workercount.eduPersonTotal:0}}</view>
						<view class="type_name color2">安全教育培训人数</view>
						<!-- <uni-icons @click="goPeopleTrain" class="locationImg" style="color: #4396e7;" type="arrowright" size="20"></uni-icons> -->
					</view>
					<view class="type color1" >
						<view class="font_24">{{listData.presencecount?listData.presencecount.totalTeamNum:0}}</view>
						<view class="type_name color2">现场班组</view>
						<!-- <uni-icons @click="goLocaleTeam" class="locationImg" style="color: #4396e7;" type="arrowright" size="20"></uni-icons> -->
					</view>
				</view>
			</view>
			<view class="flex workType" >
				<view class="type color1">
					<view class="font_24">{{listData.presencecount?listData.presencecount.totalWorkerTypeNum:0}}</view>
					<view class="type_name color2">现场工种</view>
				</view>
			<!-- 	<view class="type color4">
					<view class="font_24">{{listData.workercount?listData.workercount.glPersonTotal:0}}</view>
					<view class="type_name color2">特殊工种数</view>
				</view> -->
				<view class="type color4">
					<view class="font_24">{{listData.workercount?listData.workercount.specialPersonTotal:0}}</view>
					<view class="type_name color2">特殊工种人数</view>
				</view>
			</view>
				<view class="blockBox">
					<view class="blockTitle">
						<view class="titleName">
						工种分析
						</view>
					</view>
					<view class="blockContent">
						<u-charts class="ucharts" :cWidth="355" :cHeight="160" canvas-id="jobEvaluation" chartType="ring" :opts="jobEvaluationChartData"
						 ref="jobEvaluation" />
						<view class="statisticsType">
							<view class="flex" v-for="(item,index) in listData.workerTypeList" :key="index" v-if="listData.workerTypeList.length>0">
								<view style="width:40%" class="flex2"><view :style="{width:'10px',height:'10px','background-color':colorList[index],'margin-right':'5px'}"></view>{{item.typeName}}</view>
								<view style="width:30%;text-align: center;">{{item.personNum}}人</view>
								<view style="width:30%;text-align: center;">{{item.ratioNum}}%</view>
							</view>
						</view>
					</view>
				</view>
		</scroll-view>
		<footers :activeTab="'personManage'"></footers>
	</view>
</template>

<script>
	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: {
			footers,
			uCharts,
			uniIcons
		},
		data() {
			return {
				title: '',
				searchsn: '',
				jobEvaluationChartData: {
					title: {
						name: "",
						color: '#7cb5ec',
						fontSize: 25,
						offsetY: 0,
					},
					series: [{
							"data": 0,
							color: '#1890FF'
						},
						{
							"data": 0,
							color: '#E7EDF3'
						}
						
					]
				},
				colorList:['#3E9CE0','#F14027','#F69CA2','#D8F584','#9878F2','#94E133','#605DE9','#EF7197','#12DED1',
				'#E74F0D','#3FDEAF','#E74676','#123DD9','#3E9CE0','#F14027','#F69CA2','#D8F584','#9878F2','#94E133',
				'#605DE9','#EF7197','#12DED1','#E74F0D','#3FDEAF','#E74676','#123DD9',
				'#3E9CE0','#F14027','#F69CA2','#D8F584','#9878F2','#94E133','#605DE9','#EF7197','#12DED1','#E74F0D','#3FDEAF','#E74676','#123DD9',
				'#3E9CE0','#F14027','#F69CA2','#D8F584','#9878F2','#94E133','#605DE9','#EF7197','#12DED1','#E74F0D','#3FDEAF','#E74676','#123DD9',],
				listData:{},
			}
		},

		onLoad(options) {
			this.title = options.title;
			this.searchsn = options.sn;
			this.getListData();
		},


		methods: {
			//返回上一页
			goback() {
				uni.navigateBack({})
			},
			
			//获取数据
			getListData(){
				let that = this;
				this.sendRequest({
					url:"xmgl/workerInfo/selectWorkerManageStatistics",
					data: {
						sn: that.searchsn,
					},
					method: 'post',
					success(res){
						that.listData = res.result;
						that.jobEvaluationChartData.series = [];
						let count = 0;
						res.result.workerTypeList.forEach((item,index)=>{
							count = count+item.personNum;
							let data = {
								"data": item.personNum,
								color: that.colorList[index]
							};
							that.jobEvaluationChartData.series.push(data)
						})
						that.jobEvaluationChartData.title.name = count;
						that.$refs.jobEvaluation.changeData('jobEvaluation', that.jobEvaluationChartData);
					}
				})
			},
			
			
			
			
			
			
			
			//安全
			goPeopleTrain(){
				uni.navigateTo({
					url:'./peopleTrain?sn='+this.searchsn+'&title='+this.title
				})
			},
			//现场班组
			goLocaleTeam(){
				uni.navigateTo({
					url:'./localeTeam?sn='+this.searchsn+'&title='+this.title
				})
			},
		
		}
	}
</script>

<style scoped>
	.fullHeight {
		height: 100%;
		width: 100%;
	}

	.flex {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

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

	.title {
		text-align: center;
		font-size: 18px;
		line-height: 48px;
		background-color: #FFFFFF;
		padding: 0 10px;
		box-sizing: border-box;
	}

	.banner_bg {
		background-image: url(../../static/personnelimg/banner_bg.png);
		width: 100%;
		background-size: 100%;
		height: 150px;
	}

	.type {
		width: 50%;
		text-align: center;
		font-size: 30px;
		color: #fff;
		font-weight: 700;
		position: relative;
	}

	.type_name {
		font-size: 12px;
		font-weight: initial
	}

	.statistics1 {
		background-color: #FFFFFF;
		padding: 10px 0;
	}

	.wake {
		padding: 8px 0;

	}

	.locationImg {
		position: absolute;
		top: calc(50% - 11px);
		right: 25px;
	}

	.color1 {
		color: #4396e7;
	}

	.color2 {
		color: #919191;
	}

	.color3 {
		color: #0bb67d;
	}
	.color4{
		color: #ffb71b;
	}

	.font_24 {
		font-size: 24px;
		font-weight: initial;
	}

	.workType {
		margin: 10px 0;
		box-sizing: border-box;
		padding: 10px 15px;
		background-color: #FFFFFF
	}
	
	.blockBox .blockTitle .titleName::before {
		height: 75%;
		top: 16%;
	}
	.statisticsType{
		margin: 15px 0;
		padding: 10px 20px;
		box-sizing: border-box;
		line-height: 28px;
		font-size: 12px;
		color: #8E8E8E;
	}
</style>
