<template>
	<view class="">
		<view class="title" v-if="subForm.formLabel">
			<span v-if="subForm.required">*</span>{{subForm.formLabel}}
		</view>
		<view class="list">
			<view class="item" v-for="(item,index) in data[subForm.formField]" :key="index">
				<view class="item-box">
					<view class="spare-title">
						<view class="title-txt">
							{{item.name}}
						</view>
					</view>
					<u-row gutter="16">
						<u-col :span="cur.span || 12" v-for="(cur,key) in subForm.formData" :key="key">
							<view class="dec">
								<view class="" v-if="cur.isList">
									{{cur.label}}:{{item[cur.field]}}
								</view>
							</view>
						</u-col>
					</u-row>
				</view>
				<u-icon name="minus-circle" color="#aaaaaa" size="60" v-if="subForm.isShowButton"></u-icon>
			</view>
		</view>
		<view class="add-btn">
			<u-button type="primary"  @click="addSubForm"><u-icon name="plus-circle" color="#ffffff" size="36"
					v-if="subForm.isShowButton"></u-icon>添加</u-button>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		props: {
			subForm: {
				type: Object,
				default: () => {
					return {}
				},
			},
			data: {
				type: Object,
				default: () => {
					return {}
				},
			},
		},
		data() {
			return {

			}
		},
		methods: {
			addSubForm() {
				console.log(444)
				this.$emit('addSubForm', this.subForm.formLabel)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title {
		padding: 32rpx 0px;
		position: relative;

		span {
			position: absolute;
			left: -16rpx;
			color: #fa3534;
			padding-top: 6rpx;
		}
	}

	.list {
		.item {
			display: flex;
			margin-bottom: 20rpx;

			.item-box {
				background: #F5F5F5;
				border-radius: 12rpx;
				flex: 1;
				width: 0rpx;
			}

			.spare-title {
				padding: 20rpx 30rpx;
				border-bottom: 1px solid #e4e4e4;

				.title-txt {
					color: #409eff;
					font-size: 30rpx;
					font-weight: bold;
				}
			}

			.dec {
				color: #9c9c9c;
				padding: 0rpx 30rpx 20rpx;
			}

		}
	}

	.add-btn {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
</style>