<template>
	<view class="top_">
		<view class="icon_" @click="goBack()">
			<u-icon name="arrow-left" color="#fff" size="24"></u-icon>
		</view>
		<view @click="goDetail(baseDataInfo.staffInfo)">
			<view class="name_">员工统计详情</view>
			<view class="user_img">
				<image :src="baseImageUrl + baseDataInfo.staffInfo.avatar"
					v-if="baseDataInfo.staffInfo &&baseDataInfo.staffInfo.avatar" mode="">
				</image>
				<image src="/static/imgs/yh.png" mode="" v-else></image>
			</view>
			<view class="user_name">{{baseDataInfo.staffInfo && baseDataInfo.staffInfo.nickname}}</view>
		</view>
		<uni-datetime-picker v-model="queryParams.datetimeRange" type="daterange" rangeSeparator="至"
			@change="selectDate">
			<view class="cont_time">
				<view class="cont_size">{{queryParams.datetimeRange[0]}}</view>
				<view class="bule_size">~</view>
				<view class="cont_size">{{queryParams.datetimeRange[1]}}</view>
				<view class=""> <u-icon name="arrow-down-fill" color="#0357FF" size="12"></u-icon></view>
			</view>
		</uni-datetime-picker>

		<view class="kar_">
			<view class="ds_">
				<image src="./assets/icon1.png" mode=""></image>
				<view class="">车型数量统计</view>
			</view>
			<view class="wr_box">
				<view class="wr_boxs" v-for="(item,index) in baseDataInfo.goodsStatistics" :key="index"
					@click="selectGoodsTitle(item.goodsTitle)">
					<view class="num_">{{item.totalCount}}</view>
					<view class="size_">{{item.goodsTitle}}</view>
				</view>
			</view>
		</view>
		<view class="kar_">
			<view class="ds_">
				<image src="./assets/icon2.png" mode=""></image>
				<view class="">项目数量统计</view>
			</view>
			<view class="wr_box">
				<view class="wr_boxs" v-for="(item,index) in projectCount.children" :key="index">
					<view class="num_">{{item.count}}</view>
					<view class="size_">{{item.projectName}}</view>
				</view>
			</view>
		</view>
		<view class="db_">
			<view class="min_box">
				<view class="ds_" style="margin-bottom: 0px;">
					<image src="./assets/icon3.png" mode=""></image>
					<view class="">初次检测数量</view>
				</view>
				<view class="num_2">
					{{baseDataInfo.inspectionStatistics && baseDataInfo.inspectionStatistics.initialCheckCount}}
				</view>
			</view>
			<view class="min_box">
				<view class="ds_" style="margin-bottom: 0px;">
					<image src="./assets/icon4.png" mode=""></image>
					<view class="">复检检测数量</view>
				</view>
				<view class="num_2">
					{{baseDataInfo.inspectionStatistics && baseDataInfo.inspectionStatistics.recheckCount}}
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import config from '../../../config';
	import request from '../../../utils/request';

	export default {
		data() {
			return {
				queryParams: {
					userId: undefined,
					datetimeRange: []
				},
				baseDataInfo: {
					staffInfo: undefined
				},
				projectCount: [],
				baseImageUrl: config.baseImageUrl + '/'
			};
		},
		async onLoad(option) {
			if (option.userId) {
				this.queryParams.userId = option.userId
			}
			if (option.range) {
				this.queryParams.datetimeRange = JSON.parse(decodeURIComponent(option.range))
			}
			await this.getBaseDataInfo()
			await this.getProjectCount()
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			async getBaseDataInfo() {
				const res = await request({
					url: `/inspection/statistics/queryStaffStatisticsInfo`,
					method: 'POST',
					data: this.queryParams
				})
				this.baseDataInfo = res.data
			},
			async getProjectCount() {
				const res = await request({
					url: `/inspection/statistics/queryStaffStatisticsGroupByGoods`,
					method: 'POST',
					data: this.queryParams
				})
				this.projectCount = res.data
			},
			selectDate() {
				this.getBaseDataInfo()
				this.getProjectCount()
			},
			selectGoodsTitle(title) {
				if (title == this.queryParams.goodsTitle) {
					this.queryParams.goodsTitle = undefined
				} else {
					this.queryParams.goodsTitle = title
				}
				this.getProjectCount()
			},
			goDetail(data) {
				uni.navigateTo({
					url: `/pages/index/staffProjectList/staffProjectList?userId=${data.id}&range=${encodeURIComponent(JSON.stringify(this.queryParams.datetimeRange))}`,
				});
			},
		}
	};
</script>
<style lang='scss'>
	.top_ {
		width: 100%;
		height: 620rpx;
		position: relative;
		background: #dea5ff;
		background: url(./assets/back.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		box-sizing: border-box;
		padding-top: 100rpx;
	}

	.icon_ {
		position: absolute;
		left: 30rpx;
		top: 100rpx;
	}

	.name_ {
		text-align: center;
		font-size: 36rpx;
		font-weight: bold;
		color: #fff;
	}

	.cont_time {
		width: 80%;
		height: 60rpx;
		background: #fff;
		border-radius: 36rpx;
		border: 2rpx solid #0357FF;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0px 30rpx;
		margin: 15rpx auto;
	}

	.cont_size {
		font-weight: 400;
		font-size: 24rpx;
		color: #686C7A;
	}

	.bule_size {
		color: #0357FF;
		font-size: 16px;
		font-weight: bold;
		margin: 0px 10rpx;
	}

	.user_img {
		width: 130rpx;
		height: 130rpx;
		overflow: hidden;
		border-radius: 50%;
		margin: 15px auto;
		margin-top: 100rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.user_name {
		font-weight: 500;
		font-size: 28rpx;
		color: #FFFFFF;
		text-align: center;
		margin-bottom: 30rpx;

	}

	.min_box {
		background: linear-gradient(180deg, #E4EFFF 0%, #FFFFFF 100%);
		box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(167, 179, 229, 0.25);
		width: 48%;
		box-sizing: border-box;
		padding: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.kar_ {
		background: linear-gradient(180deg, #E4EFFF 0%, #FFFFFF 100%);
		box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(167, 179, 229, 0.25);
		width: 90%;
		margin: 30rpx auto;
		box-sizing: border-box;
		padding: 30rpx;
	}

	.ds_ {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;

		image {
			width: 30rpx;
			height: 30rpx;
			margin-right: 10rpx;
		}
	}

	.wr_box {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		text-align: center;
	}

	.wr_boxs {
		font-weight: 400;
		font-size: 16px;
		color: #6D7377;
		margin: 10rpx 20rpx;
		width: 150rpx;
	}

	.num_ {
		font-weight: bold;
		font-size: 26px;
		color: #2F353B;
	}

	.num_2 {
		font-weight: bold;
		font-size: 40rpx;
		color: #2F353B;
	}

	.db_ {
		width: 90%;
		margin: 30rpx auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
</style>