<template>
	<view style="position: relative;" :style="{textAlign:left?'left':'right'}">
		<input type="hidden" :name="name" :value="tvalue" style="display:none;" />
		<input v-if="hasmore" type="hidden" :name="name+'_date1'" :value="date1" style="display:none;" />
		<input v-if="hasmore" type="hidden" :name="name+'_date2'" :value="date2" style="display:none;" />
		<input v-if="hasmore" type="hidden" :name="name+'_str1'" :value="todatetime(date1,btime?'':'d')" style="display:none;" />
		<input v-if="hasmore" type="hidden" :name="name+'_str2'" :value="todatetime(date2,btime?'':'d')" style="display:none;" />
		<ciy-inputdatetime :disabled="disabled" @change="chg" class="_dt" v-model="date1" :bordercolor="bordercolor" clearbtn :placeholder="placeholder" :btime="btime" :selectbg="selectbg" :selecttextcolor="selecttextcolor" :weekmonday="weekmonday" :diastema="diastema"></ciy-inputdatetime>
		<view class="_spn">~</view>
		<ciy-inputdatetime :disabled="disabled" @change="chg" class="_dt" v-model="date2" :bordercolor="bordercolor" clearbtn :placeholder="placeholder" :btime="btime" :selectbg="selectbg" :selecttextcolor="selecttextcolor" :weekmonday="weekmonday" :diastema="diastema"></ciy-inputdatetime>
	</view>
</template>

<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
			},
			placeholder: {
				type: String
			},
			btime: {
				type: Boolean,
				default: false
			},
			left: {
				type: Boolean,
				default: false
			},
			bordercolor: {
				type: String,
				default: 'var(--bg6)'
			},
			selecttextcolor: {
				type: String,
				default: 'var(--man5)'
			},
			selectbg: {
				type: String,
				default: 'var(--bg1)'
			},
			weekmonday: {
				type: Boolean,
				default: false
			},
			diastema: { //间隙
				type: Number,
				default: 16
			},
		},
		data() {
			return {
				v: '',
				date1: 0,
				date2: 0
			};
		},
		watch: {
			value: {
				handler(newD, oldD) {
					this.setvalue(newD, oldD);
				},
				immediate: true
			},
			modelValue: {
				handler(newD, oldD) {
					this.setvalue(newD, oldD);
				},
				immediate: true
			},
		},
		computed: {
			tvalue() {
				if (this.date1 && this.date2) {
					if (this.date1 < this.date2)
						return this.todatetime(this.date1, this.btime ? '' : 'd') + '~' + this.todatetime(this.date2, this.btime ? '' : 'd');
					else
						return this.todatetime(this.date2, this.btime ? '' : 'd') + '~' + this.todatetime(this.date1, this.btime ? '' : 'd');
				} else if (this.date1) {
					return this.todatetime(this.date1, this.btime ? '' : 'd') + '~';
				} else if (this.date2) {
					return '~' + this.todatetime(this.date2, this.btime ? '' : 'd');
				}
			}
		},
		mounted() {
			if (this.initevent) {
				this.$emit('change', {
					name: this.name,
					from: 'init',
					value: this.tvalue ? this.tvalue : '',
					date1: this.date1,
					date2: this.date2
				});
			}
		},
		methods: {
			setvalue(val, old) {
				var vals = (val || '').split('~');
				if (vals.length < 2) {
					if (this.date1 != 0)
						this.date1 = 0;
					if (this.date2 != 0)
						this.date2 = 0;
					return;
				}
				var date1 = new Date(vals[0]);
				var date2 = new Date(vals[1]);
				if (isNaN(date1.getTime()))
					date1 = 0;
				else
					date1 = this.tostamp(date1);
				if (isNaN(date2.getTime()))
					date2 = 0;
				else
					date2 = this.tostamp(date2);

				if (this.date1 != date1)
					this.date1 = date1;
				if (this.date2 != date2)
					this.date2 = date2;
			},
			chg(e) {
				if (e.from != 'done')
					return;
				this.$emit('update:modelValue', this.tvalue);
				this.$emit('change', {
					name: this.name,
					from: 'value',
					value: this.tvalue ? this.tvalue : '',
					date1: this.date1,
					date2: this.date2
				});
			}
		}
	}
</script>
<style scoped>
	._dt {
		display: inline-block;
		margin-left: 0.3em;
		text-align: center;
		padding: 0.5em;
		border-radius: 0.5em;
	}

	._dtx {
		min-width: 7em;
		display: inline-block;
		margin-left: 0.3em;
		text-align: center;
		background: var(--bg2);
		border: 1px solid var(--bg6);
		padding: 0.5em;
		border-radius: 0.5em;
	}

	._spn {
		display: inline-block;
		margin: 0 0 0 0.3em;
	}
</style>