<template>
	<view class="">
		<view class="top_">
			<view class="icon_" @click="goBack()">
				<u-icon name="arrow-left" color="#fff" size="24"></u-icon>
			</view>
			<view class="top_img">
				<image src="./assets/name.png" mode=""></image>
				<view class="top_i_text">{{workName}}员工统计</view>
			</view>
		</view>
		<view class="cont_box">
			<view class="cont_top">

			</view>
			<view v-if="tabIndex == 0">
				<commonTimeSelect v-model="queryParams.dateRange" @subsection-change="getStaffCount()">
				</commonTimeSelect>
				<!-- <view class="user_box">
					<view class="user_left">
						<view class="user_name">总计</view>
					</view>
					<view class="user_right">
						<view class="user_kar" v-for="(item,index) in allCounts" :key="index">
							<view class="">{{ item.projectName }}</view>
							<view class="num_">{{ item.total }}</view>
						</view>
					</view>
				</view> -->
				<!-- 循环 -->
				<view class="user_box" v-for="(items,index) in List" :key="index">
					<view class="user_left" @click="goDetail(items)">
						<view class="user_img">
							<view class="user_p_img" v-show="index == 0">
								<image src="./assets/top1.png" mode=""></image>
							</view>
							<view class="user_p_img" v-show="index == 1">
								<image src="./assets/top2.png" mode=""></image>
							</view>
							<view class="user_p_img" v-show="index == 2">
								<image src="./assets/top3.png" mode=""></image>
							</view>
							<image src="/static/imgs/yh.png" mode=""></image>
						</view>
						<view class="user_name">{{ items.name }}</view>
						<!-- <view class="user_ramk">服务{{ items.count }}次</view> -->
					</view>
					<view class="user_right">
						<view class="user_kar_1" v-for="item in items.data.stats">
							<view class="user_kar_1_c">
								<view class="">{{ item.name }}</view>
								<view class="num_">{{ item.total }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="tabIndex == 1">
				<view class="user_box" v-for="(items,index) in List" :key="index">
					<view class="user_left" @click="goDetail(items)">
						<view class="user_img">
							<view class="user_p_img" v-show="index == 0">
								<image src="./assets/top1.png" mode=""></image>
							</view>
							<view class="user_p_img" v-show="index == 1">
								<image src="./assets/top2.png" mode=""></image>
							</view>
							<view class="user_p_img" v-show="index == 2">
								<image src="./assets/top3.png" mode=""></image>
							</view>
							<image src="/static/imgs/yh.png" mode=""></image>
						</view>
						<view class="user_name">{{ items.userName }}</view>
						<view class="user_ramk">总产值{{ items.totalPassOutputValue }}</view>
					</view>
					<view class="user_right">
						<view class="user_kar">
							<view class="">初检公示产值</view>
							<view class="num_1">{{ items.initialInspectionOutputValue }}</view>
						</view>
						<view class="user_kar">
							<view class="">复检公示产值</view>
							<view class="num_1">{{ items.recheckInspectionOutputValue }}</view>
						</view>
						<view class="user_kar">
							<view class="">初检合格产值</view>
							<view class="num_1">{{ items.initialInspectionPassOutputValue }}</view>
						</view>
						<view class="user_kar">
							<view class="">复检合格产值</view>
							<view class="num_1">{{ items.recheckInspectionPassOutputValue }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-calendar :show="show" minDate="2023-05-05" maxDate="2026-01-01" :mode="mode" @confirm="confirm"></u-calendar>
	</view>
</template>
<script>
	import request from "@/utils/request";
	import config from "config";
	import commonTimeSelect from '@/components/commonTimeSelect.vue'
	import {
		getDateRange
	} from "@/utils/utils";
	export default {
		data() {
			return {
				tapList: [{
						label: "本日",
						value: "day",
					},
					{
						label: "本月",
						value: "month",
					},
					{
						label: "全部",
						value: "month",
					},
				],
				tabList: ['工作量排名', '产值排名'],
				tapIndex: 0,
				tabIndex: 0,
				show: false,
				mode: 'range',
				titles: "员工统计",
				List: [],
				allCounts: [],
				selectList: [],
				useSelectList: [],
				status: "loading",
				baseImageUrl: config.baseImageUrl,
				isShowScreen: false,
				columns: [],
				queryParams: {
					dateRange: []
				},
				queryStr: null,
				selected: "day",
				workName: '',
				dateRangeList: [{
						label: "本日",
						value: "day",
					},
					{
						label: "本月",
						value: "month",
					},
				],
			}
		},
		components: {
			commonTimeSelect
		},
		onLoad(options) {
			const now = new Date();
			this.setCurrentMonthRange();
			if (options.workType) {
				this.queryParams.workType = options.workType
			}
			if (options.workName) {
				this.workName = options.workName
			}

			this.getStaffCount();
		},
		methods: {
			confirm(e) {
				console.log(e);
			},
			tapIcon(index) {
				this.tapIndex = index
				this.slectRange(index)
			},
			changeTab(index) {
				this.tabIndex = index
				this.getStaffCount()
			},
			goBack() {
				uni.navigateBack()
			}, // 获取员工统计
			getStaffCount() {
				if (this.tabIndex == 0) {
					request({
						url: "/admin-api/repair/statistics/workerStatisticsByWorkType",
						method: "get",
						data: this.queryParams,
					}).then((res) => {
						this.List = res.data;
						// this.allCounts = this.summarizeByProjectName(res.data);	
					});
				} else {
					this.queryOutputMoneyStatisticsRanking()
				}
			}, // 补零：1 → 01
			pad(n) {
				return n.toString().padStart(2, "0");
			},
			queryOutputMoneyStatisticsRanking() {
				request({
					url: '/inspection/statistics/queryOutputMoneyStatisticsRanking',
					method: 'POST',
					data: this.queryParams,
				}).then((res) => {
					this.$nextTick(() => {
						this.List = res.data;
					});
				});
			},
			// Date → "YYYY-MM-DD"
			formatDate(d) {
				// 添加类型检查，确保 d 是 Date 对象
				if (!(d instanceof Date)) {
					console.error("formatDate() 期望接收 Date 对象，但收到:", d);
					d = new Date(d); // 尝试转换为 Date 对象
					if (isNaN(d.getTime())) {
						// 检查是否有效日期
						d = new Date(); // 如果转换失败，使用当前日期
					}
				}
				return `${d.getFullYear()}-${this.pad(d.getMonth() + 1)}-${this.pad(
        d.getDate()
      )}`;
			},

			// 设置本月起止日期：月初到今天
			setCurrentMonthRange() {
				// 直接使用 Date 对象
				const now = new Date();

				// 创建月初的 Date 对象
				const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);

				this.queryParams.dateRange = [
					this.formatDate(now), // 月初
					this.formatDate(now), // 今天
				];
			},

			// 辅助函数：补零
			pad(num) {
				return num.toString().padStart(2, "0");
			},
			summarizeByProjectName(data) {
				const result = {};

				data.forEach(user => {
					user.children.forEach(item => {
						const name = item.projectName || '未知项目';
						const count = item.count || 0;
						result[name] = (result[name] || 0) + count;
					});
				});

				// 转成数组并按总数降序排序
				return Object.entries(result)
					.map(([projectName, total]) => ({
						projectName,
						total
					}))
					.sort((a, b) => b.total - a.total);
			},
			// 获取工作内容列表
			getInspectionProject() {
				request({
					url: "/inspection/dl-inspection-project/page",
					method: "get",
					params: {
						pageNo: 1,
						pageSize: 10000,
					},
				}).then((res) => {
					this.columns = res.data.records;
				});
			},
			slectRange(index) {
				this.selected = index;
				console.log(index, this.selected);
				const {
					value
				} = this.tapList[index];
				console.log(value);
				this.queryParams.dateRange = getDateRange(value);
				this.getStaffCount();
			},

			goDetail(data) {
				uni.navigateTo({
					// url: `/pages/index/staffProjectList/staffProjectList?userId=${data.userId}&range=${encodeURIComponent(JSON.stringify(this.queryParams.dateRange))}`,
					url: `/pages/statistics/staffStatisticsDetail/index?userId=${data.userId}&range=${encodeURIComponent(JSON.stringify(this.queryParams.dateRange))}`,
				});
			},
			// 显示下拉框
			showDropdown() {
				this.isShowScreen = true;
			},
			// 处理选择器确认事件
			submitScreen(e) {
				this.isShowScreen = false;
				this.queryParams.id = e.value[0].id;
				this.queryStr = e.value[0].projectName;
				this.getStaffCount();
			},
			// 处理选择器取消事件
			handleCancel() {
				this.isShowScreen = false;
			},
			// 清除选择
			clearSelection() {
				this.queryParams.id = null;
				this.queryStr = null;
				this.getStaffCount();
			},
		}
	}
</script>
<style lang='scss'>
	.top_ {
		width: 100%;
		height: 340rpx;
		position: relative;
		background: #dea5ff;
		background: url(./assets/banner.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

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

	.top_img {
		position: absolute;
		top: 100rpx;
		left: 52rpx;
		width: 474rpx;
		height: 148rpx;
		z-index: 999;

		image {
			width: 474rpx;
			height: 148rpx;
		}
	}

	.top_i_text {
		font-weight: 400;
		font-size: 28rpx;
		color: #0357FF;
	}

	.cont_box {
		background: #F8F9FA;
		box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(12, 74, 157, 0.25);
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		box-sizing: border-box;
		padding: 15px;
	}

	.cont_top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 30rpx;
	}

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

	.tap_text {
		font-weight: 400;
		font-size: 28rpx;
		color: #707677;
		margin-right: 15px;
	}

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

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

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

	.tap_img {
		height: 3px;
		text-align: center;
		margin: 0 auto;

		image {
			width: 34rpx;
			height: 12rpx;
		}
	}

	.acv {
		font-weight: bold;
		color: #292D2E !important;
	}

	.user_box {
		width: 100%;
		display: flex;
		justify-content: space-between;
		background: #FFFFFF;
		border-radius: 8rpx;
		box-sizing: border-box;
		padding: 15rpx;
		margin-bottom: 20rpx;
	}

	.user_right {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		width: 70%;
	}

	.user_left {
		width: 30%;
	}

	.user_img {
		width: 72rpx;
		height: 72rpx;
		border-radius: 50%;
		border: 4rpx solid #FFDD89;
		position: relative;
		margin: 0px auto;
		text-align: center;

		image {
			width: 100%;
			height: 100%;
			overflow: hidden;
			border-radius: 50%;
		}
	}

	.user_p_img {
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		top: -38rpx;
		left: 12rpx;

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


	.user_name {
		font-weight: 600;
		font-size: 28rpx;
		color: #2F353B;
		margin: 5px auto;
		text-align: center;
	}

	.user_ramk {
		width: 150rpx;
		height: 34rpx;
		background: #E3EAF8;
		border-radius: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 400;
		font-size: 24rpx;
		color: #0357FF;
		margin: 0px auto;
	}

	.user_kar {
		width: 230rpx;
		height: 80rpx;
		background: #F9F9FC;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 30rpx;
		font-weight: 400;
		font-size: 26rpx;
		color: #6D7377;
		margin-bottom: 10rpx;
	}

	.user_kar_1 {
		width: 230rpx;
		/* height: 80rpx; */
		background: #F9F9FC;
		border-radius: 8rpx;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 30rpx;
		font-weight: 400;
		font-size: 26rpx;
		color: #6D7377;
		margin-bottom: 10rpx;
	}

	.user_kar_1_c {
		display: flex;
		justify-content: space-between;
	}

	.num_ {
		font-weight: 600;
		font-size: 28rpx;
		color: #2F353B;
	}

	.num_1 {
		color: #0357FF;
	}
</style>