<template>
	<view :class="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"
						@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.trim="fieldItem.fieldValue"
						:type="fieldItem.limitInfo.limitType === '1' ? 'number' : 'text'"
						:placeholder="fieldItem.placeholder" :maxlength="fieldItem.limitInfo.limitLength"
						@blur="(e) => emit('textInput', { subIndex: '', fieldIndex, e, type: fieldItem.limitInfo.limitType })"
						:class="isView ? 'form-textarea 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="form-mobile">
					<input v-model.trim="fieldItem.fieldValue" type="number" maxlength="11"
						:placeholder="fieldItem.placeholder"
						@blur="(e) => emit('mobileInput', { subIndex: '', fieldIndex, e })"
						:class="isView ? 'form-input view-bg' : fieldItem.error ? 'error-border form-input' : 'form-input'"
						:disabled="isView" />
					<view @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" @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" 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}chanjianTool/1001/icon14.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="fieldItem.error ? 'error-border form-input date-display' : 'form-input date-display'">
						<text v-if="fieldItem.fieldValue" class="date-text">{{
							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/circle.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="fieldItem.error ? 'error-border form-input date-display' : 'form-input date-display'">
						<text v-if="fieldItem.fieldValue" class="date-text">{{
							fieldItem.fieldValue.provinceName }}-{{
								fieldItem.fieldValue.cityName }}-{{
								fieldItem.fieldValue.regionName }}</text>
						<text v-else class="date-text">{{ fieldItem.placeholder }}</text>
					</view>
					<view v-if="fieldItem.error" class="error">
						请维护{{ fieldItem.fieldName }}
					</view>
				</view>
			</view>
		</view>
		<view :class="item.subFormList || item.isShow ? 'line-dash' : ''"></view>
		<view v-if="item.subFormList" class="sub-box">
			<view v-if="!isView" class="sub-warp">
				<view v-for="(subItm, subIndex) in item.subFormList" :key="subIndex" class="sub-item">
					<view @click="emit('addSubForm', subIndex)" :class="subItm.isShow ? 'gray sub-title' : 'sub-title'">
						{{ subItm.formButtonName }}
					</view>
				</view>
			</view>
			<view v-if="item.subFormList" v-for="(subItm, subIndex) in item.subFormList" :key="subIndex">
				<view v-if="(!isView && subItm.isShow) || isView">
					<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 { ref, watch, onMounted, computed, 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'])
</script>

<style lang="less" scoped>
.form-child {
	padding: 20rpx;
	box-sizing: border-box;
}

.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: 28rpx;
		}

		.form-del {
			color: #C3C3C3;
			background-color: #F7F7F7;
			padding: 8rpx 40rpx;
			border-radius: 30rpx;
		}
	}

	.form-row {
		// border-bottom: 1rpx solid #f2f2f2;
		margin-bottom: 40rpx;
		font-size: 24rpx;

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

			.required {
				color: #FF2828;
			}
		}

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

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

		.form-textarea {
			border-radius: 8rpx;
			width: 100%;
			height: 136rpx;
			padding: 10rpx;
			box-sizing: border-box;
			border: 1px solid #A8A8A8;
		}

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

		.form-radio {
			display: flex;
			align-items: center;
			flex-wrap: wrap;

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

			.custom-radio {
				margin: -40rpx 50rpx 0rpx 0rpx;

				image {
					width: 18rpx;
					height: 18rpx;
				}

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

		.form-check {
			display: flex;
			flex-wrap: wrap;
			align-items: center;

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

			.check-icon {
				line-height: 68rpx;
				height: 68rpx;
				padding: 0px 15rpx;
			}

			.custom-check {
				margin: -70rpx 30rpx 0rpx 0rpx;
				line-height: 68rpx;
				font-size: 24rpx;

				.check-text {
					padding: 0px 40rpx;
					box-sizing: border-box;
					border-radius: 8rpx;
				}

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

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

		.form-mobile {
			position: relative;

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

		.form-card {
			position: relative;

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

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

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

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

		.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: 86rpx;
						// height: 86rpx;
						width: 136rpx;
						height: 136rpx;
					}
				}

				// :last-child{
				// 	.upload-image{
				// 		margin-right: 0rpx;
				// 	}
				// }

				.img-list {
					margin-bottom: 15rpx;
					position: relative;

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

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

		.error-border {
			border: 1px solid red;
		}

	}

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

	.sub-box {
		.sub-warp {
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin: 20rpx 0rpx;

			.sub-item {
				flex: 1;
				margin-right: 20rpx;
				height: 60rpx;
				font-weight: 500;
				line-height: 60rpx;
				text-align: center;

				.gray {
					opacity: 0.2;
				}

				.sub-title {
					background: #D3A4581A;
					border: 1px solid #B27C1E;
					color: #D3A458;
					border-radius: 50rpx;
				}
			}

			:last-child {
				margin-right: 0rpx;
			}
		}

	}
}
</style>