<template>
	<view
		:class="((isView && item.formButtonName && item.hasFilledOut) || item.isShow) ? 'form-tree' : 'form-tree form-child'">
		<view class="sub-top">
			<view class="form-title">{{ item.title }} </view>
			<view v-if="item.isShow" @click="() => emit('delSubForm')" class="form-del">删除</view>
		</view>
		<view v-if="item.formComponentList" v-for="(fieldItem, fieldIndex) in item.formComponentList" :key="fieldIndex">
			<view class="form-row">
				<text class="form-label">
					<text v-if="fieldItem.required" class="required">*</text>
					{{ fieldItem.fieldName }}
				</text>
				<!-- 短文本输入框类型 -->
				<view v-if="fieldItem.componentType === 'TEXT'">
					<input v-model.trim="fieldItem.fieldValue"
						:type="fieldItem.limitInfo.limitType === 1 ? 'number' : 'text'"
						:placeholder="fieldItem.placeholder" :maxlength="fieldItem.limitInfo.limitLength"
						placeholder-style="color: #D9D9D9;"
						@blur="(e) => emit('textInput', { subIndex: '', fieldIndex, e, type: fieldItem.limitInfo.limitType })"
						:class="isView ? 'form-input view-bg' : fieldItem.error ? 'error-border form-input' : 'form-input'"
						:disabled="isView" />
					<view v-if="fieldItem.error || fieldItem.noInt" class="error">
						{{ fieldItem.error ? `请维护${fieldItem.fieldName}` : `请输入整数后提交` }}
					</view>
				</view>
				<!-- 长文本输入框类型 -->
				<view v-if="fieldItem.componentType === 'LONG_TEXT'">
					<textarea v-model="fieldItem.fieldValue"
						:type="fieldItem.limitInfo.limitType === 1 ? 'number' : 'text'"
						:placeholder="fieldItem.placeholder" :maxlength="fieldItem.limitInfo.limitLength"
						placeholder-style="color: #D9D9D9;"
						@blur="(e) => emit('textInput', { subIndex: '', fieldIndex, e, type: fieldItem.limitInfo.limitType })"
						:class="isView ? 'form-textarea textarea-pad view-bg' : fieldItem.error ? 'error-border form-textarea' : 'form-textarea'"
						:disabled="isView" />
					<view v-if="fieldItem.error || fieldItem.noInt" class="error">
						{{ fieldItem.error ? `请维护${fieldItem.fieldName}` : `请输入整数后提交` }}
					</view>
				</view>

				<!-- 手机号类型 -->
				<view v-else-if="fieldItem.componentType === 'MOBILE'"
					:class="isView ? 'form-mobile view-bg' : fieldItem.error ? 'error-border form-mobile' : 'form-mobile'">
					<input v-model.trim="fieldItem.fieldValue" type="number" maxlength="11"
						:placeholder="fieldItem.placeholder" placeholder-style="color: #D9D9D9;"
						@blur="(e) => emit('mobileInput', { subIndex: '', fieldIndex, e })"
						class="form-input form-input-short" :disabled="isView" />
					<view v-if="fieldItem.fieldValue && !isView"
						@click="emit('updateMobile', { subIndex: '', fieldIndex })" class="btn">更换手机号
					</view>
					<view v-if="fieldItem.error" class="error">
						请维护{{ fieldItem.fieldName }}
					</view>
				</view>
				<!-- 身份证号类型 -->
				<view v-else-if="fieldItem.componentType === 'ID_CARD'" class="form-card">
					<input v-model.trim="fieldItem.fieldValue" type="idcard" maxlength="18"
						:placeholder="fieldItem.placeholder" placeholder-style="color: #D9D9D9;"
						@blur="(e) => emit('cardInput', { subIndex: '', fieldIndex, e })"
						:class="isView ? 'form-input view-bg' : fieldItem.error ? 'error-border form-input' : 'form-input'"
						:disabled="isView" />
					<image :src="$baseUrl + 'sign-up/idcard.png'" class="arrow-icon" />
					<view v-if="fieldItem.error" class="error">
						请维护{{ fieldItem.fieldName }}
					</view>
				</view>
				<!-- 图片类型 -->
				<view v-else-if="fieldItem.componentType === 'IMG'" class="form-img">
					<view class="img-warp">
						<view v-if="(!fieldItem.fieldValue || fieldItem.fieldValue?.length < 3) && !isView"
							class="upload-image" @click="emit('onUpload', { subIndex: '', fieldIndex })">
							<image v-if="!isView" :src="$baseUrl + 'sign-up/picture.png'"></image>
						</view>
						<view class="img-list" v-for="(itm, idx) in fieldItem.fieldValue" :key="idx">
							<view class="upload-image"
								@click="emit('onPreviewImage', { subIndex: '', fieldIndex, idx })">
								<image :src="itm" mode="aspectFill"></image>
							</view>
							<image v-if="!isView" @click="emit('onImageDel', { subIndex: '', fieldIndex, idx })"
								class="img-del" :src="$baseUrl + 'sign-up/del.png'">
							</image>
						</view>
					</view>
					<view class="img-tip">*可以上传jpg、png、jpeg，您可上传3张以内照片</view>
					<view v-if="fieldItem.error" class="error">
						请维护{{ fieldItem.fieldName }}
					</view>
				</view>
				<!-- 日期类型 -->
				<view v-else-if="fieldItem.componentType === 'DATE'"
					:class="isView ? 'form-date view-bg' : 'form-date'">
					<view @click="emit('openDatePicker', { subIndex: '', fieldIndex })"
						:class="isView ? 'form-input date-display view-bg' : fieldItem.error ? 'error-border form-input date-display' : 'form-input date-display'">
						<text v-if="fieldItem.fieldValue">{{
							fieldItem.fieldValue }}</text>
						<text v-else class="date-text">{{ fieldItem.placeholder }}</text>
						<image :src="$baseUrl + 'sign-up/date.png'" class="arrow-icon" />
					</view>
					<view v-if="fieldItem.error" class="error">
						请维护{{ fieldItem.fieldName }}
					</view>
				</view>
				<!-- 单选类型 -->
				<view v-else-if="fieldItem.componentType === 'SELECT'">
					<radio-group @change="(e) => emit('onRadioChange', { subIndex: '', fieldIndex, e })"
						class="form-radio">
						<view v-for="opt in fieldItem.options" :key="opt.value" class="radio-item">
							<radio :value="opt.optionValue" :style="{ opacity: 0 }"
								:checked="fieldItem.fieldValue === opt.optionValue" />
							<view class="custom-radio">
								<image v-if="fieldItem.fieldValue === opt.optionValue"
									:src="$baseUrl + 'sign-up/radio.png'" mode="aspectFit" />
								<image v-else :src="$baseUrl + 'sign-up/noradio.png'" mode="aspectFit" />
								<text class="radio-label">{{ opt.optionLabel }}</text>
							</view>
						</view>
					</radio-group>
					<view v-if="fieldItem.error" class="error">
						请维护{{ fieldItem.fieldName }}
					</view>
				</view>
				<!-- 多选类型 -->
				<view v-else-if="fieldItem.componentType === 'MULTI_SELECT'">
					<checkbox-group @change="(e) => emit('onCheckChange', { subIndex: '', fieldIndex, e })"
						class="form-check">
						<view v-for="opt in fieldItem.options" :key="opt.value" class="check-item">
							<checkbox :value="opt.optionValue" :style="{ opacity: 0 }"
								:checked="fieldItem.fieldValue?.includes(opt.optionValue)" class="check-icon">{{
								opt.optionLabel }}</checkbox>
							<view class="custom-check">
								<view
									:class="fieldItem.fieldValue?.includes(opt.optionValue) ? 'check-text check-bg' : 'check-text nocheck-bg'">
									<text class="check-label">{{ opt.optionLabel }}</text>
								</view>
							</view>
						</view>
					</checkbox-group>
					<view v-if="fieldItem.error" class="error">
						请维护{{ fieldItem.fieldName }}
					</view>
				</view>
				<!-- 地址类型 -->
				<view v-else-if="fieldItem.componentType === 'ADDRESS'"
					:class="isView ? 'form-date view-bg' : 'form-date'">
					<view @click="emit('openAddressPicker', { subIndex: '', fieldIndex })"
						:class="isView ? 'form-input date-display view-bg' : fieldItem.error ? 'error-border form-input date-display' : 'form-input date-display'">
						<text v-if="fieldItem.fieldValue">{{
							fieldItem.fieldValue.provinceName }}-{{
							fieldItem.fieldValue.cityName }}-{{
							fieldItem.fieldValue.regionName }}</text>
						<text v-else class="date-text">{{ fieldItem.placeholder }}</text>
						<image :src="$baseUrl + 'sign-up/union.png'" class="union-icon" />
					</view>
					<view v-if="fieldItem.error" class="error">
						请维护{{ fieldItem.fieldName }}
					</view>
				</view>
			</view>
		</view>
		<view
			:class="((!isView && item.subFormList && item.subFormList.length > 0) || (isView && hasFilledOutList(item?.subFormList))) ? 'line-dash' : ''">
		</view>
		<view v-if="item.subFormList && item.subFormList.length > 0" class="sub-box">
			<view v-if="!isView"
				:class="item.subFormList.length === 1 ? 'sub-warp-one' : item.subFormList.length === 2 ? 'sub-warp-two' : 'sub-warp-three'">
				<view v-for="(subItm, subIndex) in item.subFormList" :key="subIndex"
					:class="subItm.isShow ? 'gray sub-item sub-item-one sub-item-two sub-item-three' : 'sub-item sub-item-one sub-item-two sub-item-three'">
					<view @click="emit('addSubForm', subIndex)" class="sub-title">
						{{ subItm.formButtonName }}
					</view>
				</view>
			</view>
			<view v-if="item.subFormList && item.subFormList.length > 0" v-for="(subItm, subIndex) in item.subFormList"
				:key="subIndex">
				<view v-if="(!isView && subItm.isShow) || (isView && subItm.hasFilledOut)">
					<view
						v-if="(!isView && subItm.isShow && !subItm.isFirstFound) || (isView && subItm.hasFilledOut && !subItm.isFirstFound)"
						class='line-dash'></view>
					<form-tree v-bind="{ item: subItm, index, visible, areaVisible, formData, isView }"
						@addSubForm="() => emit('addSubForm', subIndex)"
						@delSubForm="() => emit('delSubForm', subIndex)"
						@textInput="({ fieldIndex, e, type }) => emit('textInput', { subIndex, fieldIndex, e, type })"
						@mobileInput="({ fieldIndex, e }) => emit('mobileInput', { subIndex, fieldIndex, e })"
						@updateMobile="({ fieldIndex }) => emit('updateMobile', { subIndex, fieldIndex })"
						@cardInput="({ fieldIndex, e }) => emit('cardInput', { subIndex, fieldIndex, e })"
						@onRadioChange="({ fieldIndex, e }) => emit('onRadioChange', { subIndex, fieldIndex, e })"
						@onCheckChange="({ fieldIndex, e }) => emit('onCheckChange', { subIndex, fieldIndex, e })"
						@onUpload="({ fieldIndex }) => emit('onUpload', { subIndex, fieldIndex })"
						@onPreviewImage="({ fieldIndex, idx }) => emit('onPreviewImage', { subIndex, fieldIndex, idx })"
						@onImageDel="({ fieldIndex, idx }) => emit('onImageDel', { subIndex, fieldIndex, idx })"
						@openAddressPicker="({ fieldIndex }) => emit('openAddressPicker', { subIndex, fieldIndex })"
						@openDatePicker="({ fieldIndex }) => emit('openDatePicker', { subIndex, fieldIndex })" />
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { toRefs } from 'vue'
import FormTree from './formTree.vue'
const props = defineProps({
	item: {
		type: Object,
		default: {}
	},
	index: {
		type: Number,
		default: 0
	},
	visible: {
		type: Boolean,
		default: false
	},
	areaVisible: {
		type: Boolean,
		default: false
	},
	formData: {
		type: Array,
		default: []
	},
	isView: {
		type: String,
		default: ''
	},
})
const { visible, areaVisible, item, index, formData, isView } = toRefs(props)
const emit = defineEmits(['textInput', 'mobileInput', 'updateMobile', 'cardInput', 'onUpload', 'onPreviewImage', 'onImageDel', 'openAddressPicker', 'openDatePicker', 'addSubForm', 'delSubForm', 'onRadioChange', 'onCheckChange'])
const hasFilledOutList = (list) => {
	return list && list.some(itm => itm.hasFilledOut)
}
</script>

<style lang="less" scoped>
.form-child {
	padding: 20rpx;
	box-sizing: border-box;
	color: #1C1C1C;
}
.form-tree {
	position: relative;
	margin-bottom: 20rpx;
	background-color: #FFFFFF;
	border-radius: 16rpx;
	color: #1C1C1C;

	.sub-top {
		display: flex;
		justify-content: space-between;

		.form-title {
			font-weight: 600;
			font-size: 30rpx;
		}

		.form-del {
			color: #C3C3C3;
			background-color: #F7F7F7;
			border-radius: 30rpx;
			width: 140rpx;
			height: 52rpx;
			line-height: 52rpx;
			text-align: center;
		}
	}

	.form-row {
		margin-bottom: 35rpx;
		font-size: 28rpx;

		.form-label {
			margin: 20rpx 0rpx;
			display: block;
			font-weight: 500;

			.required {
				color: #FF2828;
			}
		}

		.error {
			// position: absolute;
			font-size: 18rpx;
			color: #FF2828;
		}

		.form-input {
			border-radius: 8rpx;
			width: 100%;
			height: 68rpx;
			padding: 0rpx 10rpx;
			box-sizing: border-box;
			border: 1px solid #D9D9D9;
			font-size: 24rpx;
		}

		.form-textarea {
			border-radius: 8rpx;
			width: 100%;
			height: 154rpx;
			line-height: 1.5;
			border: 1px solid #D9D9D9;
			font-size: 24rpx;
		}
		.textarea-pad{
			height: 164rpx;
			padding-bottom: 10rpx;
			box-sizing: border-box;
		}

		.form-radio {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			width: calc(100vw - 59rpx);
			font-size: 26rpx;

			.radio-item {
				margin-bottom: 20rpx;
			}

			.custom-radio {
				margin: -40rpx 35rpx 0rpx 0rpx;
				display: flex;
				align-items: center;
				image {
					width: 26rpx;
					height: 26rpx;
				}

				.radio-label {
					margin-left: 10rpx;
				}
			}
		}

		.form-check {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			width: calc(100vw - 59rpx);
			font-size: 24rpx;

			.check-item {
				margin-bottom: 20rpx;
			}

			.check-icon {
				width: 213rpx;
				height: 68rpx;
				line-height: 68rpx;
			}

			.custom-check {
				width: 213rpx;
				height: 68rpx;
				margin: -70rpx 16rpx 0rpx 0rpx;
				line-height: 68rpx;
				text-align: center;
				font-size: 24rpx;

				.check-text {
					border-radius: 8rpx;
				}

				.check-bg {
					border: 1px solid #B27C1E;
					background: rgba(178, 124, 30, 0.1);
					color: #B27C1E;
				}

				.nocheck-bg {
					color: #D9D9D9;
					border: 1px solid #D9D9D9;
				}
			}
		}

		.form-mobile {
			position: relative;
			border-radius: 8rpx;
			width: 100%;
			height: 68rpx;
			border: 1px solid #D9D9D9;
			font-size: 24rpx;

			.form-input-short {
				border: none;
				width: calc(100% - 120rpx);
			}

			.btn {
				position: absolute;
				color: #D9D9D9;
				right: 10rpx;
				top: 19rpx;
				z-index: 99;
			}
		}

		.form-card {
			position: relative;
			font-size: 24rpx;

			.arrow-icon {
				width: 48rpx;
				height: 48rpx;
				position: absolute;
				right: 10rpx;
				top: 10rpx;
				opacity: 0.5;
			}
		}

		.form-date {
			.date-display {
				display: flex;
				align-items: center;
				justify-content: space-between;
				line-height: 68rpx;
				font-size: 24rpx;

				.date-text {
					color: #D9D9D9;
					font-size: 24rpx;
				}

				.arrow-icon {
					width: 48rpx;
					height: 48rpx;
					opacity: 0.5;
				}

				.union-icon {
					width: 29rpx;
					height: 36rpx;
					opacity: 0.5;

				}
			}
		}

		.form-img {
			display: flex;
			flex-direction: column;

			.img-warp {
				display: flex;
				flex-wrap: wrap;

				.upload-image {
					width: 136rpx;
					height: 136rpx;
					border-radius: 10rpx;
					overflow: hidden;
					margin-right: 19rpx;

					image {
						width: 136rpx;
						height: 136rpx;
					}
				}
				.img-list {
					margin-bottom: 15rpx;
					position: relative;

					.img-del {
						position: absolute;
						right: 13rpx;
						top: -10rpx;
						width: 24rpx;
						height: 24rpx;
					}
				}
			}

			.img-tip {
				font-size: 20rpx;
				margin-top: 10rpx;
			}
		}

		.error-border {
			border: 1px solid #FF2828;
		}

		.view-bg {
			border: none;
			background-color: #F7F7F7;
		}

	}

	.line-dash {
		border-bottom: 1px dashed #D9D9D9;
		margin: 40rpx 0rpx;
	}

	.sub-box {
		.sub-warp-one {
			display: flex;
			justify-content: center;
			align-items: center;
			color: #B27C1E;
			margin-bottom: 20rpx;

			.sub-item-one {
				width: 520rpx;
			}
		}

		.sub-warp-two {
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #B27C1E;
			margin-bottom: 20rpx;

			.sub-item-two {
				width: 320rpx;
			}
		}

		.sub-warp-three {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			color: #B27C1E;
			width: calc(100vw - 59rpx);
			margin-bottom: 20rpx;

			.sub-item-three {
				width: 208rpx;
				margin-right: 17rpx;

				.sub-title {
					padding: 0 20rpx;
					white-space: nowrap;
					/* 禁止文本换行 */
					overflow: hidden;
					/* 隐藏溢出内容 */
					text-overflow: ellipsis;
				}
			}

		}

		.sub-item {
			height: 60rpx;
			border-radius: 50rpx;
			font-weight: 500;
			line-height: 60rpx;
			text-align: center;
			border: 1px solid #B27C1E;
			background: rgba(211, 164, 88, 0.1);
			margin-top: 20rpx;
			margin-bottom: 20rpx;
		}

		.gray {
			opacity: 0.2;
		}
	}
}
</style>