c5_labsci/fapp/ciyon_ap/components/ciy-inputcyc/ciy-inputcyc.vue

<template>
	<view class="_cyc" :class="{_bb:bb,_left:left,_disabled:disabled}">
		<input type="hidden" :name="name" :value="tvalue" style="display:none;" />
		<input v-if="hasmore" type="hidden" :name="name+'_num'" :value="num" style="display:none;" />
		<input v-if="hasmore" type="hidden" :name="name+'_unit'" :value="unit" style="display:none;" />
		<ciy-input @change="chgnum" :disabled="disabled" style="width:4em;" v-model="num"></ciy-input>
		<view class="_unit">
			<ciy-select @change="chgunit" :disabled="disabled" v-model="unit" :rows="trowcnt" align="center" :range="trange"></ciy-select>
		</view>
	</view>
</template>

<script>
	export default {
		behaviors: ['uni://form-field-group'],
		emits: ['change', 'update:modelValue'],
		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
			},
			range: {
				type: String,
				default: 'month,day,min'
			},
		},
		data() {
			return {
				v: '',
				num: 0,
				unit: ''
			};
		},
		watch: {
			value: {
				handler(newD, oldD) {
					this.setvalue(newD, oldD);
				}
			},
			modelValue: {
				handler(newD, oldD) {
					this.setvalue(newD, oldD);
				}
			},
		},
		computed: {
			tvalue() {
				if (this.unit == 'month') {
					return -this.toint(this.num);
				} else if (this.unit == 'day') {
					return this.toint(this.num) * 86400;
				} else if (this.unit == 'hour') {
					return this.toint(this.num) * 3600;
				} else if (this.unit == 'min') {
					return this.toint(this.num) * 60;
				} else {
					return this.num;
				}
			},
			trange() {
				var rg = [];
				var rs = this.range.split(',');
				for (var i = 0; i < rs.length; i++) {
					rg.push({
						id: rs[i],
						name: this.lang('cyc.' + rs[i])
					})
				}
				return rg;
			},
			trowcnt() {
				var cnt = this.range.split(',').length;
				if(cnt > 4)
					return 3;
				return cnt;
			},
		},
		mounted() {
			this.setvalue(this.value || this.modelValue);
			if (this.initevent) {
				this.$emit('change', {
					name: this.name,
					from: 'init',
					value: this.tvalue,
					num: this.num,
					unit: this.unit
				});
			}
		},
		methods: {
			setvalue(val, old) {
				var vi = this.toint(val);
				if (vi == 0)
					vi = 86400;
				var unit = 'day';
				var num = 0;
				if (vi < 0) {
					unit = 'month';
					num = -vi;
				} else if (vi % 86400 == 0) {
					unit = 'day';
					num = this.toint(vi / 86400);
				} else if (vi % 3600 == 0) {
					unit = 'hour';
					num = this.toint(vi / 3600);
				} else if (vi % 60 == 0) {
					unit = 'min';
					num = this.toint(vi / 60);
				} else {
					unit = 'sec';
					num = this.toint(vi);
				}
				if (this.unit != unit)
					this.unit = unit;
				if (this.num != num)
					this.num = num;
			},
			chgnum(e) {
				this.$emit('update:modelValue', this.tvalue);
				this.$emit('change', {
					name: this.name,
					from: 'num',
					value: this.tvalue,
					num: this.toint(this.num),
					unit: this.unit
				});
			},
			chgunit(e) {
				this.$emit('update:modelValue', this.tvalue);
				this.$emit('change', {
					name: this.name,
					from: 'unit',
					value: this.tvalue,
					num: this.num,
					unit: this.unit
				});
			}
		}
	}
</script>
<style scoped>
	._cyc {
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 0.5em;
	}

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

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

	._cyc._bb {
		gap: 0;
	}

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

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

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

	._cyc._bb._disabled ._unit {
		background: var(--bg3);
		color: var(--txt1);
	}
</style>