<template>
	<view>
		<uni-nav-bar dark :fixed="true" shadow background-color="#007AFF" status-bar left-icon="left" left-text="返回"
			title="水容积表格" @clickLeft="back" />
		<uni-card>
			<!-- <view class="uni-button-group">
				<uni-row width="100%">
					<uni-col :span="12"><button class="mini-btn" type="primary" size="mini" @click="cal">计算</button>
					</uni-col>
					<uni-col :span="12"><button class="mini-btn" type="primary" size="mini" @click="save">打印结果</button>
					</uni-col>
				</uni-row>
			</view> -->
			<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="button"
				activeColor="#4cd964"></uni-segmented-control>
		</uni-card>
		<view class="content">
			<view v-show="current === 0">
				<yjly-ngtools-meterPar :meter-type="9" v-model="meterPar" @calEnable="meterEnable">
				</yjly-ngtools-meterPar>
			</view>
			<view v-show="current === 1">
				<yjly-ngtools-NGComponents @calEnable="NGEnable" v-model="strNG">
				</yjly-ngtools-NGComponents>
			</view>
			<view v-show="current === 2">
				<uni-card>
					<view id="tableResult" class="table" v-html="strResult">

					</view>
				</uni-card>

			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				items: ['工艺参数', '组分参数', '计算结果'],
				current: 0,
				strNG: "",
				meterPar: [],
				strResult: null,
				meterResult: {
					"adMixture": "",
					"adMixtureV": "",
					"adMixtureD": "",
					"dCbtj": "",
					"dPb": "",
					"dTb": "",
					"dPf": "",
					"dTf": "",
					"dMrx": "",
					"dZb": "",
					"dZf": "",
					"dFpv": "",
					"dDb": "",
					"dDf": "",
					"dRhob": "",
					"dRhof": "",
					"dRD_Ideal": "",
					"dRD_Real": "",
					"dHo": "",
					"dH": "",
					"dS": "",
					"dCpi": "",
					"dCp": "",
					"dCv": "",
					"dk": "",
					"dKappa": "",
					"dSOS": "",
					"dCstar": "",
					"dHhvMol": "",
					"dLhvMol": "",
					"dHhvv": "",
					"dLhvv": "",
					"dHhvm": "",
					"dLhvm": "",
					"dZb11062": "",
					"dRhob11062": "",
					"dRhof11062": "",
					"dRD_Ideal11062": "",
					"dRD_Real11062": "",
					"dWobbeIndex": "",
					"Pc": "",
					"TC": "",
					"Bzsx": "",
					"Bzxx": "",
					"TotalC": "",
					"C2": "",
					"C2j": "",
					"C3j": "",
					"C4j": "",
					"C5j": "",
					"C6j": "",
					"C3C4": "",
					"dVCNG": "",
					"dMCNG": ""
				},
				NGFlag: false,
				meterFlag: false
			};
		},
		watch: {
			strNG: {
				immediate: true,
				deep: true,
				handler(val) {
					this.zeroPar();
				}
			},
			meterPar: {
				immediate: true,
				deep: true,
				handler(val) {
					this.zeroPar();
				}
			},
		},

		methods: {
			NGEnable(e) {
				console.log(e)
				this.NGFlag = e
			},
			meterEnable(e) {
				console.log(e)
				this.meterFlag = e
			},
			zeroPar() {
				this.meterResult.adMixture = "0";
				this.meterResult.adMixtureV = "0";
				this.meterResult.adMixtureD = "0";
				this.meterResult.dCbtj = "0";
				this.meterResult.dPb = "0";
				this.meterResult.dTb = "0";
				this.meterResult.dPf = "0";
				this.meterResult.dTf = "0";
				this.meterResult.dMrx = "0";
				this.meterResult.dZb = "0";
				this.meterResult.dZf = "0";
				this.meterResult.dFpv = "0";
				this.meterResult.dDb = "0";
				this.meterResult.dDf = "0";
				this.meterResult.dRhob = "0";
				this.meterResult.dRhof = "0";
				this.meterResult.dRD_Ideal = "0";
				this.meterResult.dRD_Real = "0";
				this.meterResult.dHo = "0";
				this.meterResult.dH = "0";
				this.meterResult.dS = "0";
				this.meterResult.dCpi = "0";
				this.meterResult.dCp = "0";
				this.meterResult.dCv = "0";
				this.meterResult.dk = "0";
				this.meterResult.dKappa = "0";
				this.meterResult.dSOS = "0";
				this.meterResult.dCstar = "0";
				this.meterResult.dHhvMol = "0";
				this.meterResult.dLhvMol = "0";
				this.meterResult.dHhvv = "0";
				this.meterResult.dLhvv = "0";
				this.meterResult.dHhvm = "0";
				this.meterResult.dLhvm = "0";
				this.meterResult.dZb11062 = "0";
				this.meterResult.dRhob11062 = "0";
				this.meterResult.dRhof11062 = "0";
				this.meterResult.dRD_Ideal11062 = "0";
				this.meterResult.dRD_Real11062 = "0";
				this.meterResult.dWobbeIndex = "0";
				this.meterResult.Pc = "0";
				this.meterResult.TC = "0";
				this.meterResult.Bzsx = "0";
				this.meterResult.Bzxx = "0";
				this.meterResult.TotalC = "0";
				this.meterResult.C2 = "0";
				this.meterResult.C2j = "0";
				this.meterResult.C3j = "0";
				this.meterResult.C4j = "0";
				this.meterResult.C5j = "0";
				this.meterResult.C6j = "0";
				this.meterResult.C3C4 = "0"
			},


			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
					this.$nextTick(() => {
						if (this.current == 2) {
							this.cal();
						}
					}, 500)
				}
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			cal() {

				if (!this.NGFlag) {
					uni.showToast({
						title: "组分参数输入不完整，请检查并重新输入"
					})
					this.current = 1;
					return
				}
				if (!this.meterFlag) {
					uni.showToast({
						title: "工艺参数输入不完整，请检查并重新输入"
					})
					this.current = 0;
					return
				}
				var NG_par = ""
				NG_par = "0"; //流量计类别
				NG_par = NG_par + "," + this.meterPar.dCoreType; //节流装置类型
				NG_par = NG_par + "," + this.meterPar.dFlowCalbz; //流量计算标准
				NG_par = NG_par + "," + this.meterPar.dZcalbz; //压缩因子计算标准
				NG_par = NG_par + "," + this.meterPar.dCbtj; //'计量参比条件
				NG_par = NG_par + "," + this.meterPar.dPb_M; //计量参比条件压力
				NG_par = NG_par + "," + this.meterPar.dTb_M; //计量参比条件温度
				NG_par = NG_par + "," + this.meterPar.dPb_E; //燃烧参比条件压力
				NG_par = NG_par + "," + this.meterPar.dTb_E; //燃烧参比条件温度
				NG_par = NG_par + "," + this.meterPar.dPatm; //当地大气压
				NG_par = NG_par + "," + this.meterPar.dPatmUnit; //当地大气压单位
				NG_par = NG_par + "," + this.strNG; //天然气组分
				NG_par = NG_par + "," + this.meterPar.dPtmode; //取压方式
				NG_par = NG_par + "," + this.meterPar.dPipeType; //管道类型
				NG_par = NG_par + "," + this.meterPar.dPipeD; //管道内径
				NG_par = NG_par + "," + this.meterPar.dLenUnit; //长度单位
				NG_par = NG_par + "," + this.meterPar.dPipeDtemp; //管道内径参考温度
				NG_par = NG_par + "," + this.meterPar.dPileDtempU; //温度单位
				NG_par = NG_par + "," + this.meterPar.dPipeMaterial; //管道材料
				NG_par = NG_par + "," + this.meterPar.dOrificeD; //孔板孔径
				NG_par = NG_par + "," + this.meterPar.dOrificeUnit; //长度单位
				NG_par = NG_par + "," + this.meterPar.dOrificeDtemp; //孔板内径参考温度
				NG_par = NG_par + "," + this.meterPar.dOrificeDtempUnit; //温度单位
				NG_par = NG_par + "," + this.meterPar.dOrificeMaterial; //孔板材料
				NG_par = NG_par + "," + this.meterPar.dOrificeSharpness; //锐利度系数计算方法
				NG_par = NG_par + "," + this.meterPar.dOrificeRk; //孔板入口圆弧半径
				NG_par = NG_par + "," + this.meterPar.dOrificeRkLenU; //长度单位
				NG_par = NG_par + "," + this.meterPar.dPf; //输入压力
				NG_par = NG_par + "," + this.meterPar.dPfUnit; //压力单位
				NG_par = NG_par + "," + this.meterPar.dPfType; //压力类型
				NG_par = NG_par + "," + this.meterPar.dTf; //输入温度
				NG_par = NG_par + "," + this.meterPar.dTfUnit; //温度单位
				NG_par = NG_par + "," + this.meterPar.dDp; //输入差压
				NG_par = NG_par + "," + this.meterPar.dDpUnit; //压力单位
				NG_par = NG_par + "," + this.meterPar.dVFlowUnit; //体积流量单位
				NG_par = NG_par + "," + this.meterPar.dMFlowUnit; //质量流量单位
				NG_par = NG_par + "," + this.meterPar.dEFlowUnit; //能量流量单位
				NG_par = NG_par + "," + this.meterPar.dVGsc; //管束车容积
				NG_par = NG_par + "," + this.meterPar.dPStep; //压力步长
				NG_par = NG_par + "," + this.meterPar.dTStep; //温度步长
				NG_par = NG_par + "," + this.meterPar.dPEnd; //终止压力
				NG_par = NG_par + "," + this.meterPar.dTEnd; //终止温度


				console.log(NG_par);
				var that = this;
				var url = "";
				// #ifdef APP-PLUS
				url = "https://ngtools.cn:8443";
				// #endif	
				
				// #ifdef MP-WEIXIN
				url = "https://ngtools.cn:8443";
				// #endif				
				// #ifdef H5
				url = "/api"
				// #endif
				console.log(url)
				uni.request({
					url: url + '/GSCVTCal',
					type: 'GET',
					sslVerify: false,
					datatype: 'json',
					data: {
						"par": NG_par
					},
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					timeout: 1000, //10秒超时
					success: function(res) {
						that.strResult = that.arrayToTable(res.data.result);
						console.log(that.strResult)
						that.current = 2;
					},
				})
			},
			save() {
				const printWindow = window.open('', '_blank');
				const printContent = document.getElementById('tableResult').outerHTML;
				const styles = `<style>
				body { margin: 0; padding: 0; }
				table { border-collapse: collapse; width: 100%; }
				th, td { border: 1px solid #ccc; padding: 8px; text-align: left; }
				</style>`;
				printWindow.document.write('<html><head><title>打印表格</title>');
				printWindow.document.write(styles); // 写入样式
				printWindow.document.write('</head><body>');
				printWindow.document.write(printContent); // 写入表格内容
				printWindow.document.write('</body></html>');
				printWindow.document.close(); // 关闭文档
				printWindow.focus(); // 聚焦新窗口，确保print命令生效
				printWindow.print(); // 执行打印命令
				printWindow.close(); // 关闭新窗口
			},
			arrayToTable(array) {
				let table = '<table   border="1px solid #ccc">\n';

				// 添加表头
				table += '<tr>\n';
				for (let i = 0; i < array[0].length; i++) {
					table += `<th>${array[0][i]}</th>\n`;
				}
				table += '</tr>\n';

				// 添加表格数据
				for (let i = 1; i < array.length; i++) {
					table += '<tr>\n';
					for (let j = 0; j < array[i].length; j++) {
						table += `<td style="width:100px">${array[i][j]}</td>\n`;
					}
					table += '</tr>\n';
				}

				table += '</table>';
				return table;
			}

		},
	}
</script>

<style>
	.uni-button-group {
		margin-top: 0px;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
	}

	.mini-btn {
		width: 100px;
		margin-right: 10px;
		margin-bottom: 10px;
	}

	.table {
		height: 70VH;
		/* 设置固定高度 */
		overflow-y: auto;
		/* 开启垂直滚动条 */
		overflow-x: auto;
		/* 隐藏水平滚动条 */

		border-width: 1px;
	}
</style>