<template>
	<view class="_tp" :class="{_left:left,_disabled:disabled}">
		<input type="hidden" :name="name" :value="innervalue" style="display:none;" />
		<input v-if="hasmore" type="hidden" :name="name+'_name'" :value="hour+':'+minute+(bsec?':' + sec:'')" style="display:none;" />
		<input v-if="hasmore" type="hidden" :name="name+'_hour'" :value="hour" style="display:none;" />
		<input v-if="hasmore" type="hidden" :name="name+'_min'" :value="minute" style="display:none;" />
		<input v-if="hasmore && bsec" type="hidden" :name="name+'_sec'" :value="sec" style="display:none;" />
		<ciy-select v-model="hour" :disabled="disabled" :diastema="diastema" noarrow :rows="6" itemalign="center" :minselectsearch="100" :range="hours" :ciystyle="{width:'2em',textAlign:'center'}" @change="chg"></ciy-select>
		:
		<ciy-select v-model="minute" :disabled="disabled" :diastema="diastema" noarrow :rows="5" itemalign="center" :minselectsearch="100" :range="minutes" :ciystyle="{width:'2em',textAlign:'center'}" @change="chg"></ciy-select>
		<template v-if="bsec">
			:
			<ciy-select v-model="sec" :disabled="disabled" :diastema="diastema" noarrow :rows="5" itemalign="center" :minselectsearch="100" :range="minutes" :ciystyle="{width:'2em',textAlign:'center'}" @change="chg"></ciy-select>
		</template>
	</view>
</template>

<script>
	export default {
		behaviors: ['uni://form-field-group'],
		emits: ['change', 'update:modelValue'],
		props: {
			name: {
				type: String
			},
			modelValue: {
				type: [String, Number]
			},
			value: {
				type: [String, Number]
			},
			disabled: {
				type: Boolean,
				default: false
			},
			initevent: {
				type: Boolean,
				default: false
			},
			hasmore: {
				type: Boolean,
				default: false
			},
			bsec: {
				type: Boolean,
				default: false
			},
			left: {
				type: Boolean,
				default: false
			},
			diastema: { //上下间隙
				type: Number,
				default: 16
			}
		},
		data() {
			return {
				innervalue: this.modelValue !== undefined ? this.modelValue : this.value,
				hours: [],
				minutes: [],
				hour: 0,
				minute: 0,
				sec: 0
			};
		},
		watch: {
			modelValue(newD) {
				if (newD !== undefined) {
					this.innervalue = newD;
				}
			},
			value(newD) {
				if (this.modelValue === undefined) {
					this.innervalue = newD;
				}
			},
			innervalue: {
				handler(newD, oldD) {
					var time = this.toint(newD);
					if (time <= 0 || time > 86400)
						return;
					time--;
					this.hour = this.toint(time / 3600);
					this.minute = this.toint((time - this.hour * 3600) / 60);
					this.sec = time - this.hour * 3600 - this.minute * 60;
				},
				immediate: true
			},
		},
		computed: {},
		mounted() {
			for (var i = 0; i < 24; i++)
				this.hours.push({
					id: i,
					name: this.topad0(i, 2)
				});
			for (var i = 0; i < 60; i++)
				this.minutes.push({
					id: i,
					name: this.topad0(i, 2)
				});
			if (this.initevent) {
				this.$emit('change', {
					name: this.name,
					from: 'init',
					value: this.innervalue
				});
			}
		},
		methods: {
			updatevalue() {
				this.innervalue = this.hour * 3600 + this.minute * 60 + 1;
				if (this.bsec)
					this.innervalue += this.sec;
			},
			chg(e) {
				if (this.disabled)
					return;
				this.updatevalue();
				this.$emit('update:modelValue', this.innervalue);
				this.$emit('change', {
					name: this.name,
					from: 'click',
					value: this.innervalue
				});
			}
		}
	}
</script>
<style scoped>
	._tp {
		display: flex;
		justify-content: flex-end;
	}

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

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