<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>
export default {
	data() {
		return {};
	},
	props: {
		inputData: {
			type: Object
		}
	},
	methods: {
		handleValue: function(value) {
			this.$emit('hangleInput', event.target.value, this.inputData.checkType);
		}
	}
};
</script>

<style lang="scss" scoped>
.login-input {
	display: flex;
	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: 90%;
		line-height: 70rpx;
		flex: 1 1 auto;
		border: none;
		border-radius: 50rpx;
		outline: medium;
	}
	.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>
