<template>
	<view style="margin-bottom: 20rpx;">
		<view class="login-input">
			<view :class="'iconfont ' + inputData.iconfont + ' login-icon'"></view>
			<input
				:type="inputData?.type"
				:placeholder="inputData.placeholder"
				:password="inputData?.password"
				class="input-text"
				v-model="inputData.inputValue"
				@blur="handleValue"
			/>
			<text class="getcode" v-if="inputData.checkType === 'code'">获取验证码</text>
		</view>
		<text class="check" v-if="inputData.check">{{ inputData.checkContent }}</text>
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue';

let props = defineProps({
	inputData: Object
});

let emits = defineEmits(['hangleInput']);

let handleValue = (Value: any) => {
	emits('hangleInput', Value.detail.value, props.inputData?.checkType);
};
</script>

<style lang="scss" scoped>
.login-input {
	display: flex;
	flex-direction: inherit;
	border: 1px solid #ccc;
	border-radius: 50rpx;
	width: 560rpx;
	height: 70rpx;
	.login-icon {
		line-height: 70rpx;
		margin: 0 15rpx;
		font-size: 42rpx;
		color: #c7c7c7;
	}
	.input-text {
		height: 100%;
		line-height: 70rpx;
		flex: 1 1 auto;
	}
	.getcode {
		height: 100%;
		width: 144rpx;
		font-size: 24rpx;
		color: #c7c7c7;
		line-height: 70rpx;
	}
}
.check {
	font-size: 24rpx;
	color: red;
	margin: 0 0 10rpx 21rpx;
}
</style>
