<script setup lang="ts">
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';

	const form = ref({} as any)

	// 定义 props
	defineProps<{
		item ?: string;
	}>();
	onLoad(async (option : any) => {
		form.value = JSON.parse(option.item)
	})

	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.testTime" readonly />
				<van-field label="面料编号" label-width="5em" colon v-model="form.mlxq.code" readonly></van-field>
				<van-field label="面料名称" label-width="5em" colon v-model="form.fabric" readonly></van-field>
				<van-field label="面料颜色" label-width="5em" colon v-model="form.color" readonly></van-field>
				<van-field label="面料工艺" label-width="5em" colon v-model="form.craft" readonly></van-field>
				<van-field label="缸号" label-width="5em" colon v-model="form.cauldronCode" readonly></van-field>
				<van-field label="纸管" label-width="5em" colon v-model="form.wrapper" readonly></van-field>
				<van-field label="姆米" label-width="5em" colon v-model="form.momme" readonly></van-field>
				<van-field label="门幅" label-width="5em" colon v-model="form.width" readonly></van-field>
				<view v-for="(item,index) in form.testItems">
					<van-field :label="item.name" label-width="5em" colon v-model="item.value" readonly></van-field>
				</view>
				<van-field label="米数" label-width="5em" colon v-model="form.mlxq.ms" readonly></van-field>
				<van-field label="总分数" label-width="5em" colon v-model="form.mlxq.zfs" readonly></van-field>
				<van-field label="预计扣损米数" label-width="6.5em" colon v-model="form.mlxq.yjksms" readonly></van-field>

				<view class="grid-container">
					<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 form.mlxq.dialogList" :key="index">
					<view class="grid-item">{{item.xc}}</view>
					<view class="grid-item">{{item.kfs}}</view>
					<view class="grid-item">{{item.wz}}</view>
				</view>
			</van-cell-group>
			<van-field label="质检员" label-width="4em" colon v-model="form.testOperator" readonly />
		</view>
	</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;
			text-align: center;
			align-items: center;

			.grid-item {
				border: 1px solid #f2f2f2;
				text-align: center;
				white-space: pre-line;
				padding: 5rpx;
				word-break: break-all;
				display: flex;
				justify-content: center;
				align-items: center;
				/*将对象转为弹性盒模型展示*/
				-webkit-box-orient: vertical;
				/*设置弹性盒模型子元素的排列方式*/
				overflow: hidden;
				/*超出隐藏*/
			}
		}

		::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>