<template>
	<view class="rel _input _bb">
		<input :style="ciystyle" style="margin-right:3em;" :type="type" :name="name" :value="txtvalue" :placeholder="placeholder" :disabled="disabled" :maxlength="maxlength" :confirm-type="confirmType" @input="textinput" @focus="textfocus" @blur="textblur" @confirm="textconfirm" :cursor-spacing="120" :class="{_left:left,_disabled:disabled}" />
		<button class="btn sm def abs r0 t0 b0" style="z-index:10;line-height: 2em;" @tap="ocr">OCR</button>
	</view>
</template>

<script>
	export default {
		behaviors: ['uni://form-field-group'],
		emits: ['change', 'update:modelValue', 'focus', 'blur'],
		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]
			},
			bb: {
				type: Boolean,
				default: false
			},
			left: {
				type: Boolean,
				default: false
			},
			placeholder: {
				type: String,
				default: ''
			},
			height: {
				type: String,
				default: '66'
			},
			clktxt: {
				type: String,
				default: ''
			},
			disabled: {
				type: Boolean,
				default: false
			},
			maxlength: {
				type: Number,
				default: 140
			},
			confirmType: {
				type: String, // send发送、search搜索、next下一个、go前往、done完成
				default: 'done'
			}
		},
		data() {
			return {
				v: '',
			};
		},
		watch: {
			value: {
				handler(newD, oldD) {
					if (newD || oldD)
						this.v = 'value';
				},
				immediate: true
			},
			modelValue: {
				handler(newD, oldD) {
					if (newD || oldD)
						this.v = 'modelValue';
				},
				immediate: true
			}
		},
		computed: {
			txtvalue() {
				var val = '';
				if (this.v == 'modelValue') {
					val = this.modelValue + '';
				} else if (this.v == 'value') {
					val = this.value + '';
				} else {
					val = this.v;
				}
				return val;
			}
		},
		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('change', {
					name: this.name,
					from: 'input',
					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
				});
			},
			ocr(e) {
				var app = getApp();
				app.globalData.ciy_page_ocr = {
					txt: this.txtvalue,
					clktxt: this.clktxt ? this.clktxt.split(',') : []
				};
				uni.navigateTo({
					url: '/pages/pub/ocrdata',
					events: {
						writedata: data => {
							this.v = data;
							this.$emit('update:modelValue', this.v);
							this.$emit('change', {
								name: this.name,
								from: 'ocr',
								value: this.v
							});
						}
					}
				});
			}
		},
	}
</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 {
		background: var(--bg1);
		text-align: left;
		padding: 0.5em;
		border-radius: 0.5em;
		border: 1px solid var(--bg5);
		height:2.5em;
	}
</style>