<template>
	<u-popup v-model="visible" mode="center" width="680rpx" border-radius="14" :closeable="true">
		<view class="popupWrap">
			<view class="popupTitle">坯布资料</view>
			<scroll-view scroll-y class="scrollBody">
				<view class="infoRow" v-for="field in fields" :key="field.key">
					<text class="label">{{ field.label }}</text>
					<text class="value">{{ data[field.key] || '-' }}</text>
				</view>
			</scroll-view>
		</view>
	</u-popup>
</template>

<script>
import { FABRIC_INFO_FIELDS } from '@/common/storeFabricBusinessOut';

export default {
	props: {
		show: { type: Boolean, default: false },
		data: { type: Object, default: () => ({}) },
	},
	computed: {
		visible: {
			get() { return this.show; },
			set(val) { this.$emit('update:show', val); },
		},
		fields() {
			return FABRIC_INFO_FIELDS;
		},
	},
};
</script>

<style scoped>
.popupWrap {
	padding: 30rpx 30rpx 24rpx;
	max-height: 80vh;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.popupTitle {
	font-size: 32rpx;
	font-weight: bold;
	text-align: center;
	margin-bottom: 20rpx;
	color: #333;
	flex-shrink: 0;
}
.scrollBody {
	flex: 1;
	height: 62vh;
	max-height: 62vh;
}
.infoRow {
	display: flex;
	padding: 16rpx 0;
	border-bottom: 1rpx solid #f0f0f0;
	font-size: 28rpx;
}
.label {
	width: 180rpx;
	color: #888;
	flex-shrink: 0;
}
.value {
	flex: 1;
	color: #333;
	word-break: break-all;
}
</style>
