<script setup lang="ts">
	import { onMounted, ref } from 'vue';
	import { getAction } from '../../common/http';
	import { onLoad } from '@dcloudio/uni-app';

	const form = ref({} as any)
	const list = ref([] as any[])
	const itemList=ref({} as any)
// 定义 props
	defineProps<{
		item ?: string;
	}>();
	onLoad(async (option : any) => {
		itemList.value=JSON.parse(option.item)
		console.log(itemList.value);
	})
	onMounted(() => {
		getAction('/physicalTest/'+itemList.value.physicalTest).then((res : any) => {
			if (res.code === 200) {
				list.value=res.data.content.content
				form.value=res.data.content
			}
		})
	})
	
	const onClickLeft = () =>{
		uni.navigateBack()
	}
</script>

<template>
	<view class="flex">
		<van-nav-bar title="理化报告" left-text="返回" left-arrow @click-left="onClickLeft" />
		<view class="content">
			<van-cell-group inset>
				<van-field label="验布日期" label-width="5em" colon v-model="form.ybrq" readonly/>
				<van-field label="面料编号" label-width="5em" colon v-model="itemList.mlxq.code" readonly></van-field>
				<van-field label="面料名称" label-width="5em" colon v-model="itemList.fabric" readonly></van-field>
				<van-field label="颜色" label-width="5em" colon v-model="itemList.color" readonly></van-field>
				<p style="margin: 10rpx 0;">判断依据：GB 18401-2010B国家放纺织产品基本安全技术规范</p>
				<p>检查结果如下：</p>
				<view class="grid-container">
					<view class="grid-item">项目</view>
					<view class="grid-item">标准值</view>
					<view class="grid-item">实测值</view>
					<view class="grid-item">单项判定</view>
				</view>
				<view class="grid-container" v-for="(item,index) in list" :key="index">
					<view class="grid-item">{{item.name}}</view>
					<view class="grid-item">{{item.name1}}</view>
					<view class="grid-item">{{item.scz}}</view>
					<view class="grid-item">{{item.pdx}}</view>
				</view>
			</van-cell-group>
		</view>
		<van-field label="质检员" label-width="4em" colon v-model="form.czr" readonly />
	</view>
</template>

<style lang="scss" scoped>
	.flex {
		display: flex;
		flex-direction: column;
		height: 100vh;
		width: 100vw;
		overflow-y: hidden;

		.van-nav-bar {
			width: 100%;
		}

		.content {
			flex: 1;
			padding: 0 20rpx;
			overflow-y: scroll;
		}

		.grid-container {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr;
			text-align: center;
			align-items: center;
			margin-top: 10rpx;
		}

		::v-deep .van-field {
			font-size: 16px;
		}

		::v-deep .van-field__label {
			display: flex;
			justify-content: space-between;
		}

		::v-deep .van-button--normal {
			padding: 5px 8px;
			height: 30px;
		}

		::v-deep .van-field__control {
			text-align: center;
			font-size: 16px;
		}

		.bor {
			::v-deep .van-field__control {
				border: 1px solid #d7d7d7;
			}
		}

		.lin {
			border: 1rpx solid #000;
			margin: 10rpx 0;
		}

		.line {
			::v-deep .van-field__control {
				border-bottom: 1px solid #d7d7d7;
			}
		}
	}
</style>