<template>
	<view style="display: flex;flex-direction: row;align-items: center;height:100rpx;">

		<input v-if="(inputType=='text')" type="text"
			style="margin-right: 30rpx;flex: 1;padding-left: 36rpx;font-size: 30rpx;" :placeholder="hint"
			@input="textChange" :value="value" :maxlength="maxlength"></input>
		<input v-if="(inputType=='number')" type="number"
			style="margin-right: 30rpx;flex: 1;padding-left: 36rpx;font-size: 30rpx;" :placeholder="hint"
			@input="textChange" :value="value" :maxlength="maxlength"></input>
		<input v-if="(inputType=='idcard')" type="idcard"
			style="margin-right: 30rpx;flex: 1;padding-left: 36rpx;font-size: 30rpx;" :placeholder="hint"
			@input="textChange" :value="value" :maxlength="maxlength"></input>
		<input v-if="(inputType=='digit')" type="digit"
			style="margin-right: 30rpx;flex: 1;padding-left: 36rpx;font-size: 30rpx;" :placeholder="hint"
			@input="textChange" :value="value" :maxlength="maxlength"></input>
		<image v-if="isShowDelete" style="width: 50rpx;height: 50rpx;margin-right: 20rpx;flex-shrink: 0;"
			src="../../static/img/public/shanchu1.png" mode="aspectFill" @click="clickRight()">
		</image>
	</view>
</template>

<script>
	export default {
		props: {
			hint: {
				type: String,
				default: ""
			},
			text: {
				type: String,
				default: ""
			},
			inputType: {
				type: String,
				default: "text"
			},
			maxlength: {
				type: Number,
				default: 99999999
			},

		},
		watch: {
			text: {
				handler(t, oldT) {
					this.value = t
					this.$emit("onTextChange", this.value)
					this.isShowDelete = !this.IsEmpty(this.value)
				},
				immediate: true,
			}
		},
		data() {
			return {
				isShowDelete: false,
				value: ""
			};
		},
		methods: {
			textChange(e) {
				this.isShowDelete = !this.IsEmpty(e.detail.value)
				this.$emit("onTextChange", e.detail.value)
				this.value = e.detail.value
			},
			clickRight() {
				this.value = ""
				this.$emit("onTextChange", this.value)
				this.isShowDelete = !this.IsEmpty(this.value)
			}
		}
	}
</script>

<style>

</style>
