<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">员工排名与项目统计</view>
			</view>

		</view>
		<view class="cont_box">
			<view class="cont_top">
				<view class="ds_">
					<view class="tap_text" :class="{'acv':tapIndex == index}" v-for="(item,index) in tapList"
						:key="index" @click="tapIcon(index)">
						<view class="">{{item.label || "无"}}</view>
						<view class="tap_img" v-show="tapIndex == index">
							<image src="./assets/icon_tap.png" mode=""></image>
						</view>
					</view>
				</view>
				<uni-datetime-picker v-model="queryParams.datetimeRange" type="daterange" rangeSeparator="至"
					@change="getStaffCount" class="">
					<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>
			<!-- 循环 -->
			<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.nickname }}</view>
					<view class="user_ramk">服务{{ items.totalCount }}次</view>
				</view>
				<view class="user_right">
					<view class="user_kar" v-for="(item,index) in items.children" :key="index">
						<view class="">{{ item.projectName }}</view>
						<view class="num_">{{ item.count }}</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 {
		getDateRange
	} from "@/utils/utils";
	export default {
		data() {
			return {
				tapList: [{
						label: "本日",
						value: "day",
					},
					{
						label: "本月",
						value: "month",
					},
				],
				tapIndex: 0,
				show: false,
				mode: 'range',
				titles: "员工统计",
				List: [],
				selectList: [],
				useSelectList: [],
				status: "loading",
				baseImageUrl: config.baseImageUrl,
				isShowScreen: false,
				columns: [],
				queryParams: {
					datetimeRange: []
				},
				queryStr: null,
				selected: "day",
				dateRangeList: [{
						label: "本日",
						value: "day",
					},
					{
						label: "本月",
						value: "month",
					},
				],
			}
		},
		onLoad() {
			const now = new Date();
			this.setCurrentMonthRange();

			this.getStaffCount();
			this.getInspectionProject();
		},
		methods: {
			confirm(e) {
				console.log(e);
			},
			tapIcon(index) {
				this.tapIndex = index
				this.slectRange(index)
			},
			goBack() {
				uni.navigateBack()
			}, // 获取员工统计
			getStaffCount() {
				request({
					url: "/partnerOwn/partner/getStaffCount",
					method: "post",
					data: this.queryParams,
				}).then((res) => {
					this.$nextTick(() => {
						this.List = res.data;
					});
				});
			}, // 补零：1 → 01
			pad(n) {
				return n.toString().padStart(2, "0");
			},
			// 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.datetimeRange = [
					this.formatDate(now), // 月初
					this.formatDate(now), // 今天
				];
			},

			// 辅助函数：补零
			pad(num) {
				return num.toString().padStart(2, "0");
			},
			// 获取工作内容列表
			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.datetimeRange = [
				//   this.formatDate(firstDay),
				//   this.formatDate(now)
				// ];
				this.queryParams.datetimeRange = getDateRange(value);
				this.getStaffCount();
			},

			goDetail(data) {
				uni.navigateTo({
					// url: `/pages/index/staffProjectList/staffProjectList?userId=${data.userId}&range=${encodeURIComponent(JSON.stringify(this.queryParams.datetimeRange))}`,
					url: `/pages/statistics/staffStatisticsDetail/index?userId=${data.userId}&range=${encodeURIComponent(JSON.stringify(this.queryParams.datetimeRange))}`,
				});
			},
			// 显示下拉框
			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;
	}

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