<template>
	<input class="_input" :style="ciystyle" :type="type" :name="name" :value="txtvalue" :password="password" :placeholder="placeholder" :disabled="disabled" :maxlength="maxlength" :confirm-type="confirmType" @input="textinput" @focus="textfocus" @blur="textblur" @confirm="textconfirm" :cursor-spacing="120" :class="{_bb:bb,_left:left,_disabled:disabled}" />
</template>

<script>
	export default {
		options: {
			virtualHost: true
		},
		behaviors: ['uni://form-field-group'],
		emits: ['change', 'update:modelValue', 'focus', 'blur', 'input'],
		props: {
			name: {
				type: String
			},
			modelValue: {
				type: [String, Number],
				default: ''
			},
			value: {
				type: [String, Number],
				default: ''
			},
			initevent: {
				type: Boolean,
				default: false
			},
			type: {
				type: String, //text、number、idcard、digit    微信小程序:safe-password、nickname
				default: 'text'
			},
			ciystyle: {
				type: [String, Object]
			},
			password: {
				type: Boolean,
				default: false
			},
			bb: { //传统文本框效果
				type: Boolean,
				default: false
			},
			left: {
				type: Boolean,
				default: false
			},
			placeholder: {
				type: String,
				default: ''
			},
			disabled: {
				type: Boolean,
				default: false
			},
			maxlength: {
				type: Number,
				default: 180
			},
			confirmType: {
				type: String, // send发送、search搜索、next下一个、go前往、done完成
				default: 'done'
			}
		},
		data() {
			return {};
		},
		watch: {},
		computed: {
			txtvalue() {
				if (typeof(this.modelValue) == 'number')
					return this.modelValue;
				if (typeof(this.value) == 'number')
					return this.value;
				if (this.modelValue)
					return this.modelValue;
				if (this.value)
					return this.value;
				return '';
			}
		},
		mounted() {
			if (this.initevent) {
				this.$emit('change', {
					name: this.name,
					from: 'init',
					value: this.txtvalue
				});
			}
		},
		methods: {
			textfocus(e) {
				this.$emit('focus', e);
			},
			textblur(e) {
				this.$emit('blur', e);
			},
			textinput(e) {
				var txt = e.detail.value;
				if (txt === undefined)
					txt = e.data;
				this.$emit('update:modelValue', txt);
				this.$emit('input', {
					name: this.name,
					value: txt
				});
			},
			textconfirm(e) {
				var txt = e.detail.value;
				if (txt === undefined)
					txt = e.data;
				this.$emit('update:modelValue', txt);
				this.$emit('change', {
					name: this.name,
					from: 'confirm',
					value: txt
				});
			}

		}
	}
</script>

<style scoped>
	._input {
		font-size: 1em;
		height: 1em;
		width: inherit;
		padding: 0 0.5em;
	}

	._input._left {
		text-align: left;
	}

	._input._disabled {
		color: var(--txt1);
	}

	._input._bb._disabled {
		background: var(--bg4);
	}

	._input._bb {
		background: var(--bg1);
		text-align: left;
		padding: 0.5em;
		border-radius: 0.5em;
		border: 1px solid var(--bg5);
	}
</style>