<template>
	<div class="form-input-container" :class="{ 'half-width': halfWidth, 'full-width': !halfWidth }">
		<!-- 单行输入框 -->
		<div v-if="type === 'input'" class="input-wrapper"
			:style="{ backgroundColor: backgroundColor, borderRadius: borderRadius }" :class="{ 'border': showBorder }">
			<div class="input-content">
				<span v-if="required" class="required-star">*</span>
				<span class="placeholder-text">{{ placeholder }}</span>
				<img v-if="showDropdown" class="dropdown-icon" :src="dropdownIcon" alt="Dropdown" />
			</div>
			<input type="text" v-model="inputValue" @input="onInput" @focus="onFocus" @blur="onBlur"
				class="actual-input" />
		</div>

		<!-- 多行文本框 -->
		<div v-else-if="type === 'textarea'" class="textarea-wrapper"
			:style="{ backgroundColor: backgroundColor, borderRadius: borderRadius }" :class="{ 'border': showBorder }">
			<span v-if="required" class="required-star">*</span>
			<span class="placeholder-text">{{ placeholder }}</span>
			<textarea v-model="inputValue" @input="onInput" @focus="onFocus" @blur="onBlur" class="actual-textarea"
				:rows="rows"></textarea>
		</div>

		<!-- 按钮样式 -->
		<div v-else-if="type === 'button'" class="button-wrapper" :style="{ 
        backgroundColor: buttonBackgroundColor,
        borderRadius: borderRadius,
        width: buttonWidth,
        height: buttonHeight
      }" @click="onClick">
			<span class="button-text">{{ buttonText }}</span>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'FormInput',
		props: {
			// 基础属性
			type: {
				type: String,
				default: 'input', // input, textarea, button
				validator: (value) => ['input', 'textarea', 'button'].includes(value)
			},
			placeholder: {
				type: String,
				default: ''
			},
			value: {
				type: String,
				default: ''
			},
			required: {
				type: Boolean,
				default: false
			},

			// 样式相关
			halfWidth: {
				type: Boolean,
				default: true
			},
			backgroundColor: {
				type: String,
				default: 'rgba(255, 255, 255, 1)'
			},
			borderRadius: {
				type: String,
				default: '7px'
			},
			showBorder: {
				type: Boolean,
				default: true
			},

			// 下拉框相关
			showDropdown: {
				type: Boolean,
				default: false
			},
			dropdownIcon: {
				type: String,
				default: 'src/assets/common/bottom.png'
			},

			// 文本域相关
			rows: {
				type: Number,
				default: 10
			},

			// 按钮相关
			buttonText: {
				type: String,
				default: ''
			},
			buttonBackgroundColor: {
				type: String,
				default: 'rgba(0, 82, 217, 1)'
			},
			buttonWidth: {
				type: String,
				default: '22.92vw'
			},
			buttonHeight: {
				type: String,
				default: '3.13vw'
			}
		},

		data() {
			return {
				inputValue: this.value
			}
		},

		watch: {
			value(newVal) {
				this.inputValue = newVal
			},

			inputValue(newVal) {
				this.$emit('input', newVal)
			}
		},

		methods: {
			onInput(event) {
				this.inputValue = event.target.value
				this.$emit('input', this.inputValue)
			},

			onFocus(event) {
				this.$emit('focus', event)
			},

			onBlur(event) {
				this.$emit('blur', event)
			},

			onClick() {
				this.$emit('click')
			}
		}
	}
</script>

<style scoped>
	.form-input-container {
		margin-bottom: 1.04vw;
	}

	.half-width {
		width: 35.94vw;
	}

	.full-width {
		width: 72.92vw;
	}

	.input-wrapper,
	.textarea-wrapper {
		border: 1px solid rgba(210, 210, 210, 1);
		border-radius: 7px;
		position: relative;
		overflow: hidden;
	}

	.input-wrapper {
		height: 3.13vw;
	}

	.textarea-wrapper {
		height: 10.42vw;
	}

	.input-content {
		display: flex;
		align-items: center;
		height: 100%;
		padding: 0 1.09vw;
		pointer-events: none;
	}

	.required-star {
		color: rgba(255, 0, 0, 1);
		font-size: 0.93vw;
		font-family: OPPOSans-M;
		font-weight: 500;
		margin-right: 0.1vw;
	}

	.placeholder-text {
		color: rgba(149, 149, 149, 1);
		font-size: 0.93vw;
		font-family: OPPOSans-M;
		font-weight: 500;
		flex: 1;
	}

	.dropdown-icon {
		width: 1.05vw;
		height: 0.58vw;
	}

	.actual-input,
	.actual-textarea {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: transparent;
		border: none;
		outline: none;
		padding: 0 1.09vw;
		font-size: 0.93vw;
		font-family: OPPOSans-M;
		font-weight: 500;
		color: rgba(0, 0, 0, 1);
	}

	.actual-textarea {
		padding-top: 1.09vw;
		padding-bottom: 1.09vw;
		resize: none;
	}

	.button-wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
	}

	.button-text {
		color: rgba(255, 255, 255, 1);
		font-size: 1.25vw;
		font-family: OPPOSans-B;
		font-weight: 700;
		text-align: center;
	}

	input::placeholder {
		color: rgba(149, 149, 149, 1);
	}

	input:focus::placeholder {
		opacity: 0;
	}

	input:focus+.placeholder-text {
		opacity: 0;
	}
</style>