<template>
	<view class="input-wrapper">
		<view class="ft32 left">{{label}}</view>
		<view class="right">
			<input v-if="type==='normal'" class="ft32 inputValue" :value="value" :placeholder="holder" @blur="handleBlur" @input="handleInput"/>
			<view class="vertifyWrap" v-else-if="type==='vertify'">
				<input class="ft32 inputValue" :value="value" :placeholder="holder" @blur="handleBlur" @input="handleInput"/>
				<view class="ft28 button">发送验证码</view>
			</view>
			<slot v-else></slot>
		</view>
	</view>
</template>

<script>
	export default {
		name:"doctorInfoInput",
		data() {
			return {
				
			};
		},
		props: {
			label: {
				type: String,
				default: '个人照片'
			},
			type: {
				type: String,
				default: ''
			},
			value: {
				type: String,
				default: ""
			},
			holder: {
				  type: String,
				  default: ''
			},
		},
		methods: {
		  handleBlur(e) {
				var value = e.detail.value
				var res = this.check(value);
				if(!res){
					this.$emit('blurEvent', value, false)
					return
				}
				this.$emit('blurEvent', value, true)
		  },
			handleInput(e){
				if(!this.errormsg) return;
				var value = e.detail.value
				var res = this.check(value);
				if(!res){
					this.$emit('blurEvent', value, false)
					return
				}
				this.$emit('blurEvent', value, true)
			},
		}
	}
</script>

<style>
.input-wrapper{
	padding: 40rpx 12rpx;
	border-bottom:2rpx solid rgba(151,151,151,0.15);;
	display: flex;
	align-items: center;
	justify-content: space-between;
	
	&:last-child {
		border: none;
	}
	.left {
		font-weight: 500;
		color: #000000;
		line-height: 44rpx;
		letter-spacing: 2rpx;
		text-wrap: nowrap;
	}
	.right {
		.inputValue {
			text-align: right;
		}
		.vertifyWrap {
			display: flex;
			align-items: center;
			.button {
				color: #55C483;
				line-height: 70rpx;
				text-align: center;
				
				width: 192rpx;
				height: 70rpx;
				background: #EBFFF1;
				border-radius: 8rpx;
				margin-left: 24rpx;
			}
		}
	}
}
</style>