<route lang="json5" type="page">
	{
	layout: 'default',
	style: {
	navigationStyle: 'custom',
	navigationBarTitleText: '生产数据',
	},
	}
</route>
<template>
	<PageLayout :navbarShow="false">
		<view>
			<view class="placeholder"></view>
			<view style="width: 100%; display: grid; place-items: center">
				<uni-title :title="dateDate + '：生产经营情况'" type="h1" color="blue" />
			</view>
			<view style="margin: 0 10px;">
				<uni-segmented-control style="margin-top: 10px;margin-bottom: 10px" :current="current" :values="items"
					@clickItem="onClickItem" styleType="button" activeColor="#0055ff"></uni-segmented-control>
			</view>
			<view class="content">
				<view v-show="current === 0">
					<view style="padding: 0 10px">
						<view class="progress-bartime">
							<!-- 动态设置宽度和颜色 -->
							<view class="progressTime"
								:style="{ width: `${timePercent}%`, 'background-color': '#0055ff' }">
							</view>
							<!-- 显示带符号的百分比 -->
							<text class="progress-text">全年时间进度:{{ timePercent }}%</text>
						</view>
					</view>
					<scroll-view scroll-y :style="{ height: scrollViewHeight + 'px' }">
						<trq-data></trq-data>
						<yy-data></yy-data>
					</scroll-view>
				</view>
				<view v-show="current === 1">
					<scroll-view scroll-y :style="{ height: scrollViewHeight + 'px' }">
						<sssjForm></sssjForm>
					</scroll-view>
				</view>
			</view>
		</view>
	</PageLayout>
</template>

<script setup>
	import trqData from './ribaoshuju/trqRbsj';
	import yyData from './ribaoshuju/yyRbsj';
	import sssjForm from './shishishuju/index';
	import {
		formatDate,
		getDateAfterDays,
		getYearProgress
	} from '@/utils/dateTime';
	import {
		ref,
		onMounted,
		computed,
		nextTick,
		watchEffect,
		onUnmounted
	} from 'vue';
	const items = ref(['日报数据', '实时数据'])
	const current = ref(0)
	const res = wx.getSystemInfoSync();
	const statusHeight = res.statusBarHeight; //状态栏高度
	const cusnavbarheight = statusHeight + 44 + 'px';
	const scrollViewHeight = ref(0); //状态栏高度
	const timePercent = ref(0);
	const dateDate = ref('');

	function onClickItem(e) {
		if (current.value != e.currentIndex) {
			current.value = e.currentIndex;
		}
	}

	const strDate = () => {
		const now = new Date();
		if (now.getHours() < 11) {
			return formatDate(getDateAfterDays(now, -1)); //11点之前  头一天的数据
		} else {
			return formatDate(now);
		}
	};
	onMounted(() => {
		dateDate.value = strDate();
		timePercent.value = getYearProgress();
		calculateScrollViewHeight();
		// 监听窗口大小变化事件，当窗口大小改变时重新计算高度
		window.addEventListener('resize', calculateScrollViewHeight);
	});

	onUnmounted(() => {
		// 移除窗口大小变化事件监听器
		window.removeEventListener('resize', calculateScrollViewHeight);
	});

	const calculateScrollViewHeight = () => {
		// 获取屏幕的总高度
		const screenHeight = uni.getSystemInfoSync().windowHeight;
		// 创建一个选择器查询对象
		const query = uni.createSelectorQuery();
		// 选择所有需要计算高度的元素
		query
			.select('.nav')
			.boundingClientRect();
		query
			.select('.placeholder')
			.boundingClientRect();
		query
			.select('.uni-title')
			.boundingClientRect();
		query
			.select('.uni-segmented-control')
			.boundingClientRect();
		query
			.select('.progress-bartime')
			.boundingClientRect();
		// 执行查询操作
		query.exec((res) => {
			let totalHeight = 0;
			res.forEach((element) => {
				if (element) {
					totalHeight += element.height;
				}
			});
			// 计算 scroll-view 的高度
			scrollViewHeight.value = screenHeight - totalHeight - 80;
		});
	};
</script>

<style lang="scss" scoped>
	.nav {
		width: calc(100% - 60rpx);
		padding: 0 30rpx;
		height: v-bind(cusnavbarheight);

		font-size: 24rpx;
		color: #ffffff;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		background-image: url('../../static/my/navbg.png');
		background-repeat: no-repeat;
		background-size: 750rpx 458rpx;
	}

	.placeholder {
		height: v-bind(cusnavbarheight);
	}

	.progress-bartime {
		position: relative;
		height: 25px;
		background: #f0f0f0;
		border-radius: 10px;
		overflow: hidden;
		margin-bottom: 20rpx;
	}

	.progress {
		height: 100%;
		transition: all 0.3s;
	}

	.progressTime {
		height: 100%;
		transition: all 0.3s;
		padding: 0 20px;
	}

	.progress-text {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		color: red;
		/* 保持红色 */
		font-size: 16px;
		font-weight: bold;
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
		/* 提升可读性 */
	}
</style>