<route lang="json5" type="page">
	{
	layout: 'default',
	style: {
	navigationStyle: 'custom',
	navigationBarTitleText: '天然气实时数据',
	},
	}
</route>
<template>
	<PageLayout navTitle="天然气实时数据" routeMethod="pushTab">
		<!-- 标题行 -->
		<wd-text :text="stationName ? stationName: ' '"
			style="color: blue;font-size:18px;text-align: center;margin: 5px;"></wd-text>
		<wd-cell :title="'时间:' + nowDateTime " center>
			<wd-button custom-class="custom-value" size="small" plain clickable
				@click="handleStop">{{caijiText}}</wd-button>
			<wd-button custom-class="custom-value" size="small" plain clickable
				@click="handleRightClick">选择站场</wd-button>

		</wd-cell>

		<scroll-view direction="vertical" class="scroll-container">
			<view class="container">
				<view v-for="(item, index) in jlData" :key="index" class="card">
					<view class="field-item">
						<text class="titlejl">{{ item.jldname }}</text>
						<view class="status-circle"
							:style="{ backgroundColor:   item.yxzt==='运行' ? '#4CAF50' : '#F44336'  }">
							{{item.yxzt}}
						</view>

					</view>

					<view class="field-list">
						<!-- 压力 -->
						<view class="field-item">
							<text class="field-label">压力(MPa)</text>
							<text class="field-value">{{ formatNumber(item.yl) || '-' }}</text>
						</view>
						<!-- 差压 -->
						<view class="field-item">
							<text class="field-label">差压(kPa)</text>
							<text class="field-value">{{ formatNumber(item.yc) || '-' }}</text>
						</view>
						<!-- 温度 -->
						<view class="field-item">
							<text class="field-label">温度(℃)</text>
							<text class="field-value">{{ formatNumber(item.wd) || '-' }}</text>
						</view>
						<!-- 瞬时流量 -->
						<view class="field-item">
							<text class="field-labelssll" @click="openSssjChart(item)">瞬时流量(m³/d)</text>
							<text class="field-value">{{ formatNumber(item.ssll) || '-' }}</text>
						</view>

						<!-- 今日流量 -->
						<view class="field-item">
							<text class="field-labelssll" @click="openlssjChart(item)">今日流量(m³)</text>
							<text class="field-value">{{ formatNumber(item.jrl) || '-' }}</text>
						</view>

						<!-- 昨日流量 -->
						<view class="field-item">
							<text class="field-label">昨日流量(m³)</text>
							<text class="field-value">{{ formatNumber(item.zrl) || '-' }}</text>
						</view>

						<!-- 昨日时间 -->
						<view class="field-item">
							<text class="field-label">昨日时间(min)</text>
							<text class="field-value">{{ formatNumber(item.zrsj) || '-' }}</text>
						</view>

						<!-- 今日时间 -->
						<view class="field-item">
							<text class="field-label">今日时间(min)</text>
							<text class="field-value">{{ formatNumber(item.jrsj) || '-' }}</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<wd-popup v-model="selectZc" position="bottom" custom-style="width:100%;height: 300px;" @close="handleClose">
			<view style="font-size: 18px;text-align: center;color: blue;margin: 10px;">选择采输气站场</view>
			<cxc-szcx-stationJl-select v-model="stationID" returnCodeOrID="id" @change="onChange">
			</cxc-szcx-stationJl-select>
		</wd-popup>

		<wd-popup v-model="sssjFlag" position="bottom" custom-style="width:100%;height: 70vh;" @close="handleClose">
			<sssj-chart :jldData="jldData"></sssj-chart>
		</wd-popup>
		<wd-popup v-model="lssjFlag" position="bottom" custom-style="width:100%;height: 70vh;" @close="handleClose">
			<lssj-chart :jldData="jldData"></lssj-chart>
		</wd-popup>
	</PageLayout>
</template>
<script setup>
	import {
		queryJldZcList,
		queryJldDataByZc
	} from '@/api/production'
	import {
		ref,
		onMounted,
		computed,
		nextTick,
		watchEffect,
		onUnmounted,
	} from 'vue';
	import {
		onHide,
		onShow
	} from '@dcloudio/uni-app'
	import {
		formatDate
	} from '@/utils/dateTime.ts';

	import SssjChart from './chart/sssjChart'
	import LssjChart from './chart/lssjChart'

	const res = wx.getSystemInfoSync();
	const statusHeight = res.statusBarHeight; //状态栏高度
	const cusnavbarheight = (statusHeight + 30) + "px";

	const selectZc = ref(false)
	const lssjFlag = ref(false)
	const sssjFlag = ref(false)
	const nowDateTime = ref("")
	const caijiText = ref("停止采集")
	const stationList = ref([])
	const stationID = ref("")
	const stationName = ref(" ")
	const jlData = ref([])
	const jldData = ref({})
	const sssjUrl = ref('wss://szcx.zyyt.sinopec.com/Gyk/websocket/')
	const jlByzc = ref('https://szcx.zyyt.sinopec.com/Gyk/sssj/GetJlByZc')

	function openSssjChart(e) {
		sssjFlag.value = true;
		console.log(11, e)
		jldData.value = e
		console.log(selectZc.value)
	}

	function openlssjChart(e) {
		lssjFlag.value = true;
		jldData.value = e
		console.log(selectZc.value)
	}

	function handleRightClick() {
		selectZc.value = true;
		console.log(selectZc.value)
	}

	function handleClose() {
		console.log(selectZc.value)
	}

	function onChange(e, data) {
		console.log(2, e, data.value);
		stationID.value = e
		stationName.value = data.value.title

		getScData(); //获取生产数据

	}

	function handleStop() {

		if (caijiText.value === "停止采集") {
			console.log('清除定时器,停止采集')
			caijiText.value = "开始采集"
			clearInterval(timer2.value);
			timer2.value = null;

		} else {
			console.log('开始采集，打开定时器')
			caijiText.value = "停止采集"
			websocketheart()
		}
	}

	const websock = ref(null);
	const timer2 = ref(null);
	// 封装心跳函数
	const websocketheart = () => {
		// 先清除之前的定时器
		if (timer2.value) {
			clearInterval(timer2.value);
			timer2.value = null;
		}
		timer2.value = setInterval(() => {
			nowDateTime.value = formatDate(new Date(), "YYYY-MM-DD HH:mm:ss")
			if (websock.value && websock.value.readyState === 1) {
				// 如果连接正常，发送心跳消息
				// connectSocketInit()
			}
			if (stationID.value) {
				getScData();
			}
		}, 1000);
	};
	onMounted(() => {
		websocketheart()
		// stationID.value = "1267633458481725442"
	})

	onUnmounted(() => {
		clearInterval(timer2.value);
	})

	onHide(() => {
		console.log('页面隐藏，清除定时器')
		clearInterval(timer2.value);
		timer2.value = null;
	})

	onShow(() => {
		// 页面显示时重新启动定时器
		websocketheart()
	})
	const getScData = () => {
		uni.request({
			url: jlByzc.value + '?zhanc=' + stationID.value + '&jldLx=0',
			method: 'GET',
			success: (res) => {
				console.log(res)
				jlData.value = JSON.parse(res.data.result).JlData;
			}
		})
	}
	// 数字格式化
	const formatNumber = (num) => {
		let temp = 0;
		try {
			temp = parseFloat(num);
		} catch (error) {
			//TODO handle the exception
		}
		return temp.toFixed(4).replace(/\.?0+$/, '');
	};
</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-weight: bold;
		color: #333;
	}

	.titlejl {
		font-size: 20rpx;
		vertical-align: middle;
		font-weight: bold;
		color: #0055ff;
		margin-bottom: 15px;
	}

	.container {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		gap: 16px;
		padding: 16px;
	}

	.card {
		background: #fff;
		border-radius: 8px;
		padding: 5px;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
	}

	.field-list {
		margin-top: 10px;
		display: flex;
		flex-wrap: wrap;
		/* 允许子元素换行 */
		gap: 3px;
	}

	.field-item {
		display: flex;
		height: 30px;
		justify-content: space-between;
		align-items: center;
		padding: 5px 5px;
		background: #f8f9fa;
		border-radius: 4px;
		flex-basis: calc(50% - 10px);
		/* 每个元素占据约一半宽度，减去间隙 */
		box-sizing: border-box;
		/* 包含内边距和边框 */
	}

	/* 当屏幕宽度较小时，每个元素占据整行 */
	@media (max-width: 200px) {
		.field-item {
			flex-basis: 100%;
		}
	}

	.field-label {
		color: #666;
		font-size: 10px;
		flex: 1;
		margin-right: 2px;
		width: 80px;
		font-weight: 500;
	}

	.field-labelssll {
		color: #0000ff;
		text-decoration: underline;
		font-size: 10px;
		flex: 1;
		margin-right: 2px;
		width: 80px;
		font-weight: 500;
	}

	.field-value {
		color: #1890ff;
		font-weight: 500;
		font-size: 12px;
		text-align: right;
		width: 60px;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.status-circle {
		width: 70rpx;
		height: 30rpx;
		font-size: 12px;
		vertical-align: middle;


	}

	.page-layout {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}

	.scroll-container {
		flex: 1;
		overflow-y: auto;
	}
</style>