<template>
	<view>
		<view class="topTab"> 
			<view class="tab-header">
				<view class="left">
					<image @click="customNavigateBack" src="@/static/img/back.png" mode=""></image>
				</view>
			<view class="centered-text">收样标签</view>
			</view>
		</view>
		
		<view class="page-content">
			<view class="main-titile">
				{{formData.submitLocation}}
			</view>
			<view class="main-content">
				<table border="1">
					<tr>
						<td colspan="2" class="centered-text">试验结果</td>
					</tr>
					<tr>
						<td class="left-column">样品名称</td>
						<td class="right-column">{{formData.sampleTools}}</td>
					</tr>
					<tr>
						<td class="left-column">规格型号</td>
						<td class="right-column">{{formData.devModule}}</td>
					</tr>
					<tr>
						<td class="left-column">样品编号</td>
						<td class="right-column">{{formData.devCode}}</td>
					</tr>
					<tr>
						<td class="left-column">样品状态</td>
						<td class="right-column">
							<text v-if="formData.processStatus==null">待试验 </text>
							<text v-if="formData.processStatus==0">待提交 </text>
							<text v-if="formData.processStatus==1">待审阅 </text>
							<text v-if="formData.processStatus==2">待审核 </text>
							<text v-if="formData.processStatus==3">待审批 </text>
							<text v-if="formData.processStatus==4">试验结束 </text>
						</td>
					</tr>
					<tr>
						<td class="left-column">试验项目</td>
						<td class="right-column" style="padding: 0;">
							<view class="subTr" v-for="(item, index) in formData.configItemsVos" :key="index">
								<view class="subTd1">{{item.experTypeName}}</view>
								<view class="subTd2">{{item.amount}}元</view>
							</view>
						</td>
					</tr>
					<!-- <tr>
						<td class="left-column">试验周期</td>
						<td class="right-column"></td>
					</tr> -->
					<tr>
						<td class="left-column" rowspan="2">送检单位</td>
						<td class="right-column">{{formData.customName}}</td>
					</tr>
				</table>
			</view>
		</view>
	</view>
	
</template>

<script>
	import { getSampleLabelByQrCode } from '@/service/url.js';
	import tabHeader from '@/components/tab-Header.vue'; 
	import AES from "@/utils/cryptoJs/aes.js";
	export default {
		components: {
			tabHeader, 
		},
		data() {
			return {
				customerCode:'',
				formData:{},
			};
		},
		onLoad(option) {
			console.log(option)
			this.customerCode = option.customerCode || '';
			this.getSampleLabelByQrCode() 
		},
		onShow() {
			
		},
		methods: {
			//返回
			customNavigateBack() {
				// 自定义返回逻辑
				const pages = getCurrentPages(); // 获取页面栈
				const len = pages.length;
				let backPage = ''; // 要返回的页面路径
				for (let i = len - 2; i >= 0; i--) {
					// 从倒数第二个页面开始遍历，找到第一个不是当前页面的页面
					if (pages[i].route !== 'pages/A/A') {
						backPage = pages[i].route;
						break;
					}
				}
				if (backPage) {
					uni.navigateBack({
						delta: len - 1 - pages.findIndex(page => page.route === backPage) // 返回到已存在的页面
					});
				}
			},
			//
			getSampleLabelByQrCode(){
				let obj = {
					"customerCode":this.customerCode,
				}
				let param = {
					encryptedData: AES.encrypt(JSON.stringify(obj))
					// encryptedData: JSON.stringify(obj)
				}
				this.$http.post(getSampleLabelByQrCode,param).then(res => {
					if (res) { 
						if(res.code == '200'){
							console.log(res)
							this.formData=res.data;
						}else{ 
						}
					}
				}).catch(error => {
					console.log(error)
				})
			},
		 
		},
	}
</script>

<style lang="scss">
	/deep/.u-popup .u-slide-right-enter-active{
		left: 0;
	}
	.centered-text {
		margin: auto;
		padding-right: 176rpx;
		font-weight: 600;
		
	}
	.topTab{
		
		.left{
			// white-space: nowrap;
			// padding-left: 30px;
		}
	}
	
	.searchInput{
		height: 100%;
	}
	.page-content{
		width: 100%;
		height: 90vh;
		position: absolute;
		top:8.5vh;
		padding: 0rpx 0;
		background-color: #F3F3F3;
		.main-titile{
			font-size: 38rpx;
			font-weight: 600;
			text-align: center;
			padding-top: 28rpx;
			color: #666666;
		}
		.main-content{
			height: auto;
			width: 90%;
			margin: auto;
			border: solid 1px #C4C4C4;
			background-color: #FAFAFA;
			margin-top: 40rpx;
			display: flex;
			flex-direction: column;
			
			table {
				width: 100%; /* 确保表格宽度适应容器 */
				border-collapse: collapse;
				flex-grow: 1; /* 使表格扩展以占据剩余空间 */
				min-height: 0; /* 确保表格可以收缩 */
				 border: 1px solid #C4C4C4; /* 更改边框颜色 */
			}
			
			
			.centered-text {
				text-align: center;
				padding: 10rpx 0; /* 上下内边距以确保居中 */
			}
			
			.left-column {
				color: #505050;
				font-weight: 600;
				width: 30%;
				text-align: center;
			}
			
			.right-column {
				width: 70%; /* 自动计算剩余宽度，减去左侧列的宽度和边框 */
				padding-left: 30rpx; /* 左侧内边距 */
				word-break: break-word; /* 允许在单词中间换行 */
				white-space: normal; /* 允许换行 */
				overflow: visible; /* 显示超出部分 */
			}
			
			/* 设置每行的高度，除了最后一行 */
			tr:not(:last-child) td {
				height: 80rpx; 
				
			}
			
			/* 设置最后一行的高度 */
			tr:last-child td {
				height: 80rpx; 
			}
			
			.subTr{
				width: 100%;
				display: flex;
				height: 100rpx;
				.subTd1{
					width: 60% ;
					height: 100rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-right: 1rpx solid #CCCCCC;
					border-bottom: 1rpx solid #CCCCCC;
				}
				.subTd2{
					width: 40% ;
					height: 100rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-bottom: 1rpx solid #CCCCCC;
				}
			}
		
		}	
		
	}
</style>
