<template>
	<view class="_unitedit" :class="{_left:left}">
		<input type="hidden" :name="name" :value="tvalue" style="display:none;" />
		<input v-if="hasmore" type="hidden" :name="name+'_unit1'" :value="unit1" style="display:none;" />
		<input v-if="hasmore" type="hidden" :name="name+'_num12'" :value="num12" style="display:none;" />
		<input v-if="hasmore" type="hidden" :name="name+'_unit2'" :value="unit2" style="display:none;" />
		<input v-if="hasmore" type="hidden" :name="name+'_num23'" :value="num23" style="display:none;" />
		<input v-if="hasmore" type="hidden" :name="name+'_unit3'" :value="unit3" style="display:none;" />

		<ciy-input @change="chg" :disabled="disabled" v-model="unit1" class="_unit" type="text" />
		<ciy-input @change="chg" :disabled="disabled" v-model="num12" class="_num" type="number" />
		<ciy-input @change="chg" :disabled="disabled" v-model="unit2" class="_unit" type="text" />
		<ciy-input @change="chg" :disabled="disabled" v-model="num23" class="_num" type="number" />
		<ciy-input @change="chg" :disabled="disabled" v-model="unit3" class="_unit" type="text" />
	</view>
</template>

<style scoped>
	._unitedit {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	._unitedit._left {
		justify-content: start;
	}

	._unitedit ._unit {
		width: 3em;
		text-align: center;
		padding: 0.5em 0px;
		border: 1px solid var(--bg6);
		background: var(--bg1);
		border-radius: 0.3em;
	}

	._unitedit ._num {
		width: 3em;
		text-align: center;
		margin-top: 0.3em;
		padding: 0.3em 0;
		font-size: 0.7em;
		border-top: 1px solid var(--bg6);
		border-left: none;
		border-right: none;
		border-bottom: 1px solid var(--bg6);
		background: var(--bg2);
	}

	._unitedit ._num._disabled {
		background: var(--bg5);
	}

	._unitedit ._unit._disabled {
		background: var(--bg4);
	}
</style>
<script>
	export default {
		behaviors: ['uni://form-field-group'],
		emits: ['change', 'update:modelValue'],
		props: {
			name: {
				type: String
			},
			modelValue: {
				type: String,
				default: ''
			},
			value: {
				type: String,
				default: ''
			},
			disabled: {
				type: Boolean,
				default: false
			},
			initevent: {
				type: Boolean,
				default: false
			},
			hasmore: {
				type: Boolean,
				default: false
			},
			left: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				unit1: '',
				unit2: '',
				unit3: '',
				num12: '',
				num23: '',
			};
		},
		watch: {
			value: {
				handler(newD, oldD) {
					this.setvalue(newD, oldD);
				}
			},
			modelValue: {
				handler(newD, oldD) {
					this.setvalue(newD, oldD);
				}
			},
		},
		computed: {
			tvalue() {
				if (this.unit1) {
					var num12 = this.toint(this.num12);
					var num23 = this.toint(this.num23);
					if (this.unit2 && num12 > 0 && this.unit2 != this.unit1) {
						if (this.unit3 && num23 > 0 && this.unit3 != this.unit1 && this.unit3 != this.unit2)
							return this.unit1 + '|' + num12 + '|' + this.unit2 + '|' + num23 + '|' + this.unit3;
						else
							return this.unit1 + '|' + num12 + '|' + this.unit2;
					} else
						return this.unit1;
				} else
					return "";
			},
		},
		mounted() {
			this.setvalue(this.value || this.modelValue);
			if (this.initevent) {
				this.$emit('change', {
					name: this.name,
					from: 'init',
					value: this.tvalue,
					unit1: this.unit1,
					unit2: this.unit2,
					unit3: this.unit3,
					num12: this.num12,
					num23: this.num23,
				});
			}
		},
		methods: {
			setvalue(val, old) {
				var us = val.split('|'); // 瓶   瓶|24|盒  瓶|24|盒|20|箱
				this.unit1 = '';
				this.unit2 = '';
				this.unit3 = '';
				this.num12 = '';
				this.num23 = '';
				if (this.unit1 != us[0])
					this.unit1 = us[0];
				if (us.length < 3)
					return;
				var num = this.toint(us[1]);
				if (num <= 0 || !us[2])
					return;
				if (this.num12 != num)
					this.num12 = num;
				if (this.unit2 != us[2])
					this.unit2 = us[2];
				if (us.length < 5)
					return;
				num = this.toint(us[3]);
				if (num <= 0 || !us[4])
					return;
				if (this.num23 != num)
					this.num23 = num;
				if (this.unit3 != us[4])
					this.unit3 = us[4];
			},
			chg(e) {
				this.$emit('update:modelValue', this.tvalue);
				this.$emit('change', {
					name: this.name,
					from: 'input',
					value: this.tvalue,
					unit1: this.unit1,
					unit2: this.unit2,
					unit3: this.unit3,
					num12: this.num12,
					num23: this.num23,
				});
			}
		}
	}
</script>