<template>
	<view class="_input" :class="{_bb:bb,_left:left,_unit:!!unit,_disabled:disabled}">
		<input type="hidden" :name="name" :value="tvalue" style="display:none;" />
		<input v-if="hasmore" type="hidden" :name="name+'_unit'" :value="unit" style="display:none;" />
		<input type="digit" :name="hasmore?name+'_num':''" :class="{_disabled:disabled}" :value="txvalue" :placeholder="placeholder" :confirm-type="confirmType" @input="textinput" @focus="textfocus" @blur="textblur" @confirm="textconfirm" :cursor-spacing="120" :disabled="disabled" :style="ciystyle" />
		<view class="_unit" v-if="unit" :class="{_disabled:disabled}">{{unit}}</view>
	</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: ''
			},
			disabled: {
				type: Boolean,
				default: false
			},
			initevent: {
				type: Boolean,
				default: false
			},
			hasmore: {
				type: Boolean,
				default: false
			},
			bb: { //传统文本框效果
				type: Boolean,
				default: false
			},
			left: {
				type: Boolean,
				default: false
			},
			ciystyle: {
				type: [String, Object],
				default: {
					width: '5em'
				}
			},
			placeholder: {
				type: String,
				default: ''
			},
			bet: {
				type: [String, Number],
				default: 1
			},
			unit: {
				type: [String],
				default: ""
			},
			confirmType: {
				type: String, // send发送、search搜索、next下一个、go前往、done完成
				default: 'done'
			}
		},
		data() {
			return {
				tvalue: 0
			};
		},
		watch: {},
		computed: {
			txvalue() {
				var v = 0;
				if (this.modelValue)
					v = this.toint(this.modelValue);
				if (this.value)
					v = this.toint(this.value);
				this.tvalue = v;
				return this.tofix(v / this.mybet, -4);
			},
			mybet() {
				var bet = this.toint(this.bet);
				if (bet < 1)
					bet = 1;
				return bet;
			},
		},
		mounted() {
			this.tvalue = this.txvalue * this.mybet;
			if (this.initevent) {
				this.$emit('change', {
					name: this.name,
					from: 'init',
					value: this.tvalue
				});
			}
		},
		methods: {
			textfocus(e) {
				this.$emit('focus', e);
			},
			textblur(e) {
				this.$emit('blur', e);
				var txt = e.detail.value;
				if (txt === undefined)
					txt = e.data;
				txt = this.toint(this.tofloat(txt) * this.mybet);
				this.tvalue = txt;
				this.$emit('update:modelValue', txt);
			},
			textinput(e) {
				var txt = e.detail.value;
				if (txt === undefined)
					txt = e.data;
				txt = this.toint(this.tofloat(txt) * this.mybet);
				this.tvalue = txt;
				this.$emit('change', {
					name: this.name,
					from: 'input',
					value: txt
				});
			},
			textconfirm(e) {
				var txt = e.detail.value;
				if (txt === undefined)
					txt = e.data;
				txt = this.toint(this.tofloat(txt) * this.mybet);
				this.tvalue = txt;
				this.$emit('update:modelValue', txt);
				this.$emit('change', {
					name: this.name,
					from: 'confirm',
					value: txt
				});
			}
		}
	}
</script>

<style scoped>
	._input {
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 0.5em;
	}

	._input._left {
		justify-content: flex-start;
	}

	._input input {
		font-size: 1em;
		height: 1em;
		text-align: right;
	}

	._input._bb {
		gap: 0;
	}

	._input._bb input {
		background: var(--bg1);
		padding: 0.5em;
		border-radius: 0.5em;
		border: 1px solid var(--bg5);
	}

	._input._bb._unit input {
		border-radius: 0.5em 0 0 0.5em;
		border-right: none;
	}

	._input._bb ._unit {
		background: var(--bg1);
		padding: 0.5em;
		height: 2.5em;
		border-radius: 0 0.5em 0.5em 0;
		border: 1px solid var(--bg5);
	}

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

	._input ._disabled {
		color: var(--bg7);
	}
</style>