<template>
	<view class="col u-margin-30 u-padding-20 box-shadow">
		<view class="row u-flex" v-for="(col, idx) in props.column">
			<view class="row-left" :style="{
				width: `${props.labelWidth}rpx`
			}">
				{{col.name}}
			</view>
			<view class="row-right" :style="{
				width: `calc(100% - ${props.labelWidth}rpx)`
			}">
				{{props.data[col.value]}}
			</view>
		</view>
	</view>
</template>

<script setup>
	const props = defineProps({
		labelWidth: {
			type: Number,
			default: 200
		},
		data:{
			type: Object,
			require: true
		},
		column: {
			type: Array,
			require : true
		}
	})
</script>

<style lang="scss">
	.col{
		background-color: #ffffff;
				border-radius: 8rpx;
		.row{
			padding: 12rpx 0;
			align-items: flex-start;
			&-left{
				color: #333333;
			}
			&-right{
				padding-left: 20rpx;
				overflow-wrap: break-word; 
				color: #999999;
			}
		}
	}
</style>