<template>
	<div>
		<div style="text-align: center; margin-top: 10px; margin-bottom: 10px">
			<button @click="btnCalc" type="primary" class="animated-button">{{ btnText }}</button> 
		</div>

		<el-tabs v-model="activeTab" style="width: 100%">
			<el-tab-pane label="工况参数" name="meterpar">
				<meterPar v-model="parentMeterPar" :el-form-width="elFormItemWidth" />
			</el-tab-pane>

			<el-tab-pane label="摩尔组分" name="ngComponents">
				<ngComponents v-model="parentMeterPar.dngComponents" :el-form-width="elFormItemWidthmin" />
			</el-tab-pane>
			<el-tab-pane label="计算结果" name="meterresult">
				<meterResult v-if="['0', '1', '2', '3'].includes(dMeterType)" :d-meter-type="dMeterType" v-model="parentMeterResult" :el-form-width="elFormItemWidth" />
				<NGResult v-if="['4', '5', '6', '7'].includes(dMeterType)" :d-meter-type="dMeterType" v-model="parentNGResult" :el-form-width="elFormItemWidthmin"></NGResult>
			</el-tab-pane>
		</el-tabs>

		<div v-if="isShowMessage" class="message-box">{{ message }}</div>
	</div>
</template>

<script setup>
import { ref, onMounted, onBeforeMount, watch } from 'vue';
import { useRoute } from 'vue-router';
import meterPar from '@/components/NGTools/meterPar';
import ngComponents from '@/components/NGTools/NGCom';
import meterResult from '@/components/NGTools/meterResult';
import NGResult from '@/components/NGTools/NGResult';
import { calcNGPar, calcFlow } from '@/api/ngtools/NGCalcTools.js';

// 定义响应式数据
const btnText = ref('');
const elFormItemWidth = ref(160);
const elFormItemWidthmin = ref(140);
const activeTab = ref('meterpar');
const isShowMessage = ref(false);
const message = ref('');
const parentMeterPar = ref({
	dFlowCalbz: '0',
	dZcalbz: '0',
	dCbtj: '0',
	dpbM: 0,
	dtbM: 0,
	dpbE: 0,
	dtbE: 0,
	dPatm: 0.0981,
	dPatmUnit: 2,
	dngComponents: '',
	dMeterType: '0',
	dCoreType: '0',
	dPtmode: '0',
	dPipeType: '0',
	dPipeD: 259.38,
	dLenUnit: 3,
	dPipeDtemp: 20,
	dPileDtempU: 0,
	dPipeMaterial: '11.16',
	dOrificeD: 150.25,
	dOrificeUnit: 3,
	dOrificeDtemp: 0,
	dOrificeDtempUnit: 0,
	dOrificeMaterial: '16.6',
	dOrificeSharpness: 0,
	dOrificeRk: 0,
	dOrificeRkLenU: 0,
	dPf: 1.48,
	dPfUnit: 2,
	dPfType: '0',
	dTf: 15,
	dTfUnit: 0,
	dDp: 12.5,
	dDpUnit: 1,
	dVFlowUnit: 0,
	dVFlowWorkUnit: 0,
	dMFlowUnit: 0,
	dEFlowUnit: 6,
	dCd: 0.9957,
	dCdCalMethod: 0,
	dMeterFactor: 2354,
	dPulseNum: 12000,
	dVFlowMax: 6,
	dVFlowMin: 3,
	dVFlowCon: 5,
	dPfRangeMin: 0,
	dPfRangeMax: 0,
	dDpRangeMin: 0,
	dDpRangeMax: 0,
	dTfRangeMin: 0,
	dTfRangeMax: 0,
	dVGsc: 300,
	dVGscUnit: 0,
	dCalcType: 0, //0 流量 1  天然气  3 管束车
	dBqdd: 0 //0 不计算，1 计算  计算不确定度
});

const parentMeterResult = ref({
	dE: 0,
	dFG: 0,
	dFT: 0,
	dDViscosity: 0,
	dDExpCoefficient: 0,
	dRnPipe: 0,
	dBk: 0,
	dRoughNessPipe: 0,
	dCdCorrect: 0,
	dCdNozell: 0,
	dVFlowb: 0,
	dVFlowf: 0,
	dVFlowUnit: 2,
	dMFlowb: 0,
	dMFlowUnit: 0,
	dEFlowb: 0,
	dEFlowUnit: 0,
	dVelocityFlow: 0,
	dVelocityUnit: 0,
	dPressLost: 0,
	dPressLostUnit: 0,
	dBeta: 0,
	dKappa: 0
});

const parentNGResult = ref({
	dMrx: 0,
	dZb: 0,
	dZf: 0,
	dFpv: 0,
	dDb: 0,
	dDf: 0,
	dRhob: 0,
	dRhof: 0,
	dRD_Ideal: 0,
	dRD_Real: 0,
	dHo: 0,
	dH: 0,
	dS: 0,
	dCpi: 0,
	dCp: 0,
	dCv: 0,
	dk: 0,
	dKappa: 0,
	dSOS: 0,
	dSOSUnit: 0,
	dCstar: 0,
	dHhvMol: 0,
	dLhvMol: 0,
	dHhvv: 0,
	dLhvv: 0,
	dHhvm: 0,
	dLhvm: 0,
	dZb11062: 0,
	dRhob11062: 0,
	dRhof11062: 0,
	dRD_Ideal11062: 0,
	dRD_Real11062: 0,
	dWobbeIndex: 0,
	dPc: 0,
	dTC: 0,
	dBzsx: 0,
	dBzxx: 0,
	dTotalC: 0,
	dC2: 0,
	dC2j: 0,
	dC3j: 0,
	dC4j: 0,
	dC5j: 0,
	dC6j: 0,
	dC3C4: 0
});

const componentString = ref('');
const dMeterType = ref(0);

// 获取路由信息
const route = useRoute();

// 在组件挂载前获取路由参数
onBeforeMount(() => {
	const params = route.query;
	dMeterType.value = params.dMeterType;
});

// 在组件挂载后更新 parentMeterPar 的 dMeterType
onMounted(() => {
	parentMeterPar.value.dMeterType = dMeterType.value;
});

// 监听 dMeterType 的变化
watch(dMeterType, (newValue) => {
	if (['0', '1', '2', '3'].includes(newValue)) {
		btnText.value = '计算流量';
	} else if (newValue === '4') {
		btnText.value = '计算压缩因子';
	} else if (newValue === '5') {
		btnText.value = '计算声速';
	} else if (newValue === '6') {
		btnText.value = '计算发热量';
	} else if (newValue === '7') {
		btnText.value = '计算其他参数';
	}
	parentMeterPar.value.dMeterType = newValue;
	console.log('dMeterType 变化后，parentMeterPar:', parentMeterPar.value);
});

// 显示消息提示框
const showMessage = () => {
	isShowMessage.value = true;
	setTimeout(() => {
		isShowMessage.value = false;
	}, 1000); // 1 秒后自动消失
};

// 计算按钮点击事件
const btnCalc = () => {
	if (['0', '1', '2', '3'].includes(dMeterType.value)) {
		calcBtnFlow();
	} else if (['4', '5', '6', '7'].includes(dMeterType.value)) {
		calc();
	}
};



// 计算天然气参数
const calc = async () => {
	console.log(parentMeterPar.value);
	if (parentMeterPar.value.dngComponents === '') {
		message.value = '组分为空，请输入天然气组分!';
		showMessage();
		activeTab.value = 'ngComponents';
		return;
	}
	// 清空 parentNGResult 的值
	for (const key in parentNGResult.value) {
		if (parentNGResult.value.hasOwnProperty(key)) {
			parentNGResult.value[key] = 0;
		}
	}
	try {
		const res = await calcNGPar(parentMeterPar.value);
		parentNGResult.value = res.data;
		activeTab.value = 'meterresult';
		console.log('Response:', res);
	} catch (error) {
		console.error('Request error:', error);
	}
};
 
// 计算流量
const calcBtnFlow = async () => {
	console.log(parentMeterPar.value);
	if (parentMeterPar.value.dngComponents === '') {
		message.value = '组分为空，请输入天然气组分!';
		showMessage();
		activeTab.value = 'ngComponents';
		return;
	}
	// 清空 parentMeterResult 的值
	for (const key in parentMeterResult.value) {
		if (parentMeterResult.value.hasOwnProperty(key)) {
			parentMeterResult.value[key] = 0;
		}
	}
	try {
		const res = await calcFlow(parentMeterPar.value);
		parentMeterResult.value = res.data[0];
		console.log('Response:', parentMeterResult.value);
		activeTab.value = 'meterresult';
	} catch (error) {
		console.error('Request error:', error);
	}
};
</script>

<style scoped>
.animated-button {
	background-color: #007bff;
	color: white;
	padding: 10px 20px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	margin-right: 10px;
	transition: background-color 0.3s ease;
}

.animated-button:last-child {
	margin-right: 0;
}

.animated-button:hover {
	background-color: #0056b3;
	transform: scale(1.05);
}

.animated-button:active {
	transform: scale(0.95);
}

/* 在 Vue 3 中使用 :deep() 替代 /deep/ */
:deep(.el-tabs__nav) {
	padding: 0;
	margin: 0;
	display: flex;
	width: 100%;
}

:deep(.el-tabs__item) {
	flex: 1;
	text-align: center;
	padding: 10px;
}

.message-box {
	position: fixed;
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
	background-color: #333;
	color: white;
	padding: 10px 20px;
	border-radius: 5px;
	z-index: 9999;
}
</style>
