<template>
	<view class="content">
		<!-- 标题行 -->
		<view class="header-row">
			<view class="title">天然气产量</view>
			<view class="more" @click="selectMore">更多>></view>
		</view>
	</view>
	<view class="container">
		<view v-for="(item, index) in shishiArrSelect" :key="index" class="card-item"
			@click="handleCardClick(item.gas)">
			<view class="card">
				<text class="title">{{ item.gas }}</text>
				<view class="content">
					<text class="label">气量</text>
					<text class="value">{{ formatNumber(item.dailyVolume) || '-' }}</text>
				</view>
				<view class="content">
					<text class="label">年累计</text>
					<text class="value">{{ formatNumber(item.yearVolume) || '-' }}</text>
				</view>
				<view class="progress-bar">
					<!-- 动态设置宽度和颜色 -->
					<view class="progress"
						:style="{ width: `${Math.abs(item.yearPerCent)}%`, 'background-color': item.yearPerCent < 0 ? '#ff4444' : '#007aff' }">
					</view>
					<!-- 显示带符号的百分比 -->
					<text v-if="!(item.yearPlan === '' || item.yearPlan === '0')"
						class="progress-text">{{ item.yearPerCent }}%</text>
				</view>
			</view>
		</view>
	</view>

	<wd-popup v-model="popupSelect" position="top" background-color="#fff">
		<view style="margin-top: 50px">
			<view class="titlepopup">选择显示更多生产数据</view>

			<view class="popupBtn">
				<button size="mini" @click="selectDefault" style="padding: 8px 16px;">默认</button>
				<button size="mini" @click="selectAll" style="padding: 8px 16px;">全选</button>
				<button size="mini" @click="selectNo" style="padding: 8px 16px;">全不选</button>
			</view>
			<view class="popupcheckbox">
				<uni-data-checkbox style="font-size: 14px" @change="onselectionchange" :localdata="shishiArr"
					v-model="shishiArrDisplay" multiple :map="{ value: 'gas', text: 'gas' }"></uni-data-checkbox>
			</view>
		</view>
	</wd-popup>
	<!-- 数据弹窗 -->
	<wd-popup v-model="popup" position="bottom" closable custom-style="height: 400px;" @close="handleClose">
		<wd-cell-group :title="tableTitle">
			<wd-table :data="filteredData" :height="800">
				<wd-table-col prop="unit" label="名称" :width="screenWidth * 57 / 140 " align="center"></wd-table-col>
				<wd-table-col prop="rq" label="日气量" :width="screenWidth / 5" align="center"></wd-table-col>
				<wd-table-col prop="yearVolume" label="年累计" :width="screenWidth / 4" align="center"></wd-table-col>
				<wd-table-col prop="" label="操作" :width="screenWidth / 7" align="center">
					<template #value="{row}">
						<text style="color: red;" @click="goHistory(row)">历史</text>
					</template>
				</wd-table-col>
			</wd-table>
		</wd-cell-group>
	</wd-popup>
</template>

<script setup>
	import {
		queryJinriShengchansj,
		queryYearShengchansj,
		queryJinriTrqShengchansj
	} from '@/api/production';
	import {
		formatDate,
		getDateAfterDays
	} from '@/utils/dateTime';

	const shishiArr = ref([]);
	const shishiArrSelect = ref([]);
	const shishiArrDisplay = ref(['气井气', '商品量', '站线综合输差']);
	const dataJinriUnit = ref([]);
	const tableTitle = ref('')
	const filteredData = ref([]);
	const popup = ref(false);
	const popupSelect = ref(false);
	const strDate = ref('');

	const dataJinri = ref([]);
	const dataJinriSum = ref([]);
	const dataJinriSumUnit = ref([]);


	const qjqNdjs = ref(7500);
	const splNdjs = ref(7220);
	const zhqNdjs = ref(300);
	const zhscNdjs = ref(50);
	const screenWidth = ref(0)
	const handleClose = () => {
		popup.value = false
	}
	
	// 点击卡片处理
	// const handleCardClick = (gas) => {
	// 	let queryParms = {};
	// 	filteredData.value = [];
	// 	queryParms.day = strDate.value;
	// 	queryParms.gas = gas;
	// 	queryParms.unit = '文23气田,户部寨气田';
	// 	console.log(queryParms);
	// 	queryJinriTrqShengchansj(queryParms).then((res) => {
	// 		if (res.success) {
	// 			console.log(res);
	// 			filteredData.value = res.result;
	// 		}
	// 	});

	// 	popup.value.open();
	// };

	function selectMore() {
		popupSelect.value = true
	}

	function selectAll() {
		shishiArrDisplay.value = [];
		// console.log(9, shishiArr.value)
		shishiArr.value.forEach((item) => {
			// console.log(10, item)
			shishiArrDisplay.value.push(item.gas);
		});
		onselectionchange()
		popup.value = false;
	}

	function selectNo() {
		shishiArrDisplay.value = [];
		onselectionchange()
		popup.value = false;
	}

	function selectDefault() {
		shishiArrDisplay.value = ['气井气', '商品量', '站线综合输差'];
		onselectionchange()
		popup.value = false;
	}
	const onselectionchange = () => {
		shishiArrSelect.value = [];
		shishiArrDisplay.value.forEach((item) => {
			shishiArrSelect.value.push(shishiArr.value.filter((item1) => item1.gas === item)[0]);
		});
	};

	const handleCardClick = (gas) => {
		tableTitle.value = gas + '数据详情 单位(万立方米)'
		filteredData.value = dataJinriSumUnit.value.filter((item) => item.gas === gas);
		filteredData.value = filteredData.value.map(item => {
			return {
				...item,
				rq: formatNumber(item.rq),
				yearVolume: formatNumber(item.yearVolume)
			}
		})
		popup.value = true;

	};

	// 关闭弹窗
	const closePopup = () => {
		popup.value = false;
	};
	
	const calculateTableHeight = () => {
		const systemInfo = uni.getSystemInfoSync();
		screenWidth.value = systemInfo.screenWidth;
	}
	onMounted(() => {
		getJinriTrqShengchansj();
		getJinriShengchansj();
		
		calculateTableHeight();
		// 监听屏幕旋转变化
		uni.onWindowResize(() => {
			calculateTableHeight();
		});
	});

	// 数字格式化
	const formatNumber = (num) => {
		let temp = 0;
		try {
			temp = parseFloat(num);
		} catch (error) {
			//TODO handle the exception
		}

		return temp.toFixed(4).replace(/\.?0+$/, '');
	};

	// 自动计算综合输差
	function calcZhsc(tempArray) {
		let totalJinqi = {
			gas: '总进气',
			dailyVolume: 0,
			yearVolume: 0,
			yearPlan: '100',
			yearPerCent: 0
		};
		let totalChuqi = {
			gas: '总出气',
			dailyVolume: 0,
			yearVolume: 0,
			yearPlan: '100',
			yearPerCent: 0
		};
		const compositeZx = {
			gas: '站线综合输差',
			dailyVolume: 0,
			yearVolume: 0,
			yearPlan: '100',
			yearPerCent: 0
		}; // 综合输差
		const compositeJc = {
			gas: '进出综合输差',
			dailyVolume: 0,
			yearVolume: 0,
			yearPlan: '100',
			yearPerCent: 0
		};
		const trqSpl = {
			gas: '商品量',
			dailyVolume: 0,
			yearVolume: 0,
			yearPlan: '7220',
			yearPerCent: 0
		};
		// 综合输差
		tempArray.forEach((item) => {
			if (item.gas === '站输差' || item.gas === '线输差') {
				compositeZx.dailyVolume += parseFloat(item.dailyVolume) || 0;
				compositeZx.yearVolume += parseFloat(item.yearVolume) || 0;
			}
			if (item.gas === '气井气' || item.gas === '外部气' || item.gas === '返回气') {
				totalJinqi.dailyVolume += parseFloat(item.dailyVolume) || 0;
				totalJinqi.yearVolume += parseFloat(item.yearVolume) || 0;
			}
			if (item.gas === '自耗气' || item.gas === '用户气' || item.gas === '返采油厂干气') {
				totalChuqi.dailyVolume += parseFloat(item.dailyVolume) || 0;
				totalChuqi.yearVolume += parseFloat(item.yearVolume) || 0;
			}
			if (item.gas === '气井气' || item.gas === '站输差' || item.gas === '线输差') {
				trqSpl.dailyVolume += parseFloat(item.dailyVolume) || 0;
				trqSpl.yearVolume += parseFloat(item.yearVolume) || 0;
			}
			if (item.gas === '自耗气') {
				trqSpl.dailyVolume -= parseFloat(item.dailyVolume) || 0;
				trqSpl.yearVolume -= parseFloat(item.yearVolume) || 0;
			}
		});

		compositeZx.yearPerCent = calcPercent(compositeZx.yearPlan, compositeZx.yearVolume);

		trqSpl.yearPerCent = calcPercent(trqSpl.yearPlan, trqSpl.yearVolume);

		compositeJc.dailyVolume = (-totalJinqi.dailyVolume + totalChuqi.dailyVolume).toFixed(4);
		compositeJc.yearVolume = (-totalJinqi.yearVolume + totalChuqi.yearVolume).toFixed(4);
		compositeJc.yearPerCent = calcPercent(compositeJc.yearPlan, compositeJc.yearVolume);

		tempArray.push(compositeZx);
		tempArray.push(trqSpl);

		return tempArray;
	}

	const getJinriTrqShengchansj = () => {
		const now = new Date();
		if (now.getHours() < 11) {
			strDate.value = formatDate(getDateAfterDays(now, -1)).toString(); //11点之前  头一天的数据
		} else {
			strDate.value = formatDate(now).toString();
		}
		let queryParms = {};
		shishiArr.value = [];
		queryParms.day = strDate.value;
		queryJinriTrqShengchansj(queryParms).then((res) => {
			if (res.success) {
				console.log(1, res);
				let temp = res.result;

				temp.forEach((item) => {
					if (item.gas === '气井气') {
						item.yearPlan = 7500;
						item.yearPerCent = calcPercent(item.yearPlan, item.yearVolume);
					}
				});
				shishiArr.value = calcZhsc(temp);
				nextTick();
				onselectionchange();
			}
		});
	};

	function goHistory(val) {
		uni.navigateTo({
			url: '/pages/production/ribaoshuju/rbsjLsxq?data=' + JSON.stringify(val) + '&type=trq'
		});
	}

	function calcPercent(yearJihua, yearShiji) {
		// 计算进度百分比，避免除数为 0
		// 确保进度百分比不超过 100
		let plan = parseFloat(yearJihua === '' ? 0 : yearJihua);
		let shiji = parseFloat(yearShiji);
		let percent = 0;
		// 修改原始计算代码
		if (plan > 0) {
			percent = (shiji / plan) * 100;
			percent = Math.min(percent, 100); // 限制最大100%
		}
		return parseFloat(percent.toFixed(2)); // 转为数值
	}

	const getJinriShengchansj = () => {
		const now = new Date();
		if (now.getHours() < 11) {
			strDate.value = formatDate(getDateAfterDays(now, -1)).toString(); //11点之前  头一天的数据
		} else {
			strDate.value = formatDate(now).toString();
		}
		let queryParms = {};
		dataJinri.value = [];
		dataJinriSum.value = [];
		dataJinriSumUnit.value = [];
		queryParms.rqDate = strDate.value;
		queryParms.pageSize = 100;
		queryJinriShengchansj(queryParms).then((res) => {
			if (res.success) {
				dataJinri.value = res.result.records;
				dataJinriSumUnit.value = sumByUnit(dataJinri.value); //包含gas  unit  rq  cq  totalGas
				// // 使用 nextTick 等待 DOM 更新
				nextTick();
				getYearShengchansj(); //再获取今年以来的数据
			}
		});
	};
	const getYearShengchansj = () => {
		const now = new Date();
		let year = formatDate(now).split('-')[0];
		let queryParms = {};
		queryParms.yearStart = year;
		queryParms.yearEnd = year;
		queryYearShengchansj(queryParms).then((res) => {
			if (res.success) {
				try {
					let yearData = res.result[year];
					dataJinriSumUnit.value.forEach((item) => {
						yearData.forEach((itemYear) => {
							// // console.log(item, itemYear);
							if (item.setId === itemYear.setId) {
								item.yearVolume = itemYear.yearSum || 0;
							}
						});
					});
					dataJinriSum.value = sumByGas(dataJinriSumUnit.value);
					shishiArr.value.forEach((item) => {
						dataJinriSum.value.forEach((itemjinri) => {
							if (item.gas === itemjinri.gas) {
								item.dailyVolume = itemjinri.rq.toFixed(4);
								item.yearVolume = itemjinri.yearVolume.toFixed(4);
							}
						});
					});
				} catch (error) {
					// console.log(error);
				}
			}
		});
	};

	function sumByGas(records) {
		const summaryMap = {};
		try {
			records.forEach((record) => {
				const gas = record.gas;
				if (!summaryMap[gas]) {
					// 初始化该 gas 类型的汇总对象
					summaryMap[gas] = {
						gas: gas,
						rq: 0,
						sq: 0,
						totalGas: 0,
						yearVolume: 0
					};
				}
				// 无论是否是第一次遇到该 gas 类型，都进行累加操作
				summaryMap[gas].rq += record.rq || 0;
				summaryMap[gas].sq += record.sq || 0;
				summaryMap[gas].totalGas += record.totalGas || 0;
				summaryMap[gas].yearVolume += record.yearVolume || 0;
			});
			return Object.values(summaryMap);
		} catch (error) {
			//TODO handle the exception
			// console.log(error);
		}
	}

	function sumByUnit(records) {
		console.log(records);
		const summaryMap = {};
		try {
			records.forEach((record) => {
				const unit = record.unit;
				const gas = record.gas;
				// 添加setId计算
				const setId = record.setId
				if (gas != "区输差") {
					if (!summaryMap[setId]) {
						// 初始化该 gas 类型的汇总对象
						summaryMap[setId] = {
							unit: unit,
							setId: setId,
							gas: record.gas,
							rq: 0,
							sq: 0,
							totalGas: 0,
							yearVolume: 0
						};
					}
					// 无论是否是第一次遇到该 unit 类型，都进行累加操作
					summaryMap[setId].rq += record.rq || 0;
					summaryMap[setId].sq += record.sq || 0;
					summaryMap[setId].totalGas += record.totalGas || 0;
					summaryMap[setId].yearVolume += record.yearVolume || 0;
				}
			});

			return Object.values(summaryMap);
		} catch (error) {
			//TODO handle the exception
			// console.log(error);
		}
	}
</script>

<style lang="scss" scoped>
	.header-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10 10rpx;
		border-bottom: 1rpx solid #eee;
		margin-left: 10px;
		margin-right: 10px;
	}

	.title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
	}

	.titlepopup {
		font-size: 35rpx;
		font-weight: bold;
		color: #333;
		text-align: center;
		padding: 20px;
		margin-top: 10px;
	}

	/* 给包裹按钮的容器设置样式 */
	.popupBtn {
		display: grid;
		/* 创建三个等宽的列 */
		grid-template-columns: repeat(3, 1fr);
		/* 设置列与列之间的间距 */
		gap: 2px;
		margin-bottom: 20px;
	}



	/* 添加按钮按下效果 */
	.popupBtn button:active {
		opacity: 0.8;
		transform: scale(0.98);
		transition: all 0.1s ease;
	}



	/* 给按钮设置通用样式 */
	.popupBtn button {
		border: none;
		padding: 0px 10px;
		background-color: #007BFF;
		color: white;
		border-radius: 5px;
		cursor: pointer;
	}

	/* 鼠标悬停在按钮上时的样式 */
	.popupBtn button:hover {
		background-color: #0056b3;
	}

	.more {
		font-size: 26rpx;
		color: #666;
		cursor: pointer;
	}

	.more::after {
		content: '';
		width: 8rpx;
		height: 8rpx;
		border-top: 2rpx solid #666;
		border-right: 2rpx solid #666;
		transform: rotate(45deg);
		margin-left: 8rpx;
		vertical-align: middle;
	}

	/* 鼠标悬停效果 */
	.more:hover {
		color: #007aff;
	}

	.popupcheckbox {
		/* 使用 Flexbox 布局 */
		display: flex;
		flex-wrap: wrap;
		/* 允许换行 */
		gap: 2px;
		/* 设置复选框之间的间距 */
		margin-left: 20px;
		margin-bottom: 10px;
	}


	.popupcheckbox .uni-data-checkbox__item {
		flex-basis: calc((100% / var(4)) - 10px);
		box-sizing: border-box;
	}


	.container {
		display: flex;
		flex-wrap: wrap;
		padding: 20rpx;
		gap: 20rpx;
	}

	.empty {
		padding: 40rpx;
		text-align: center;
		color: #888;
		font-size: 16rpx;
	}

	.card-item {
		flex: 1 1 200rpx; // 基础宽度300rpx，自动伸缩    formatNumber
		min-width: 240rpx;
		max-width: calc(50% - 10rpx); // 最大不超过容器一半（考虑间距）

		@media (min-width: 768px) {
			max-width: calc(33.33% - 14rpx); // 大屏显示3列
		}
	}

	.card {
		background: #ececec;
		border-radius: 16rpx;
		padding: 15rpx;
		box-shadow: 0 4rpx 12rpx rgba(179, 179, 179, 0.1);

		.title {
			display: block;
			font-size: 28rpx;
			font-weight: 600;
			color: #333;
			margin-bottom: 16rpx;
		}

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

			&:last-child {
				margin-bottom: 0;
			}

			.label {
				font-size: 24rpx;
				color: #666;
			}

			.value {
				font-size: 28rpx;
				color: #0000ff;
				font-weight: 500;
			}
		}
	}

	.progress-bar {
		position: relative;
		height: 20px;
		background: #f0f0f0;
		border-radius: 10px;
		overflow: hidden;
	}

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

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