<template>
   <u-datetime-picker
		ref="datetimePickerRef"
		:show="isShow"
		v-model="innerValue"
		:mode="mode"
		@confirm="confirm"
		@cancel="close"
		:formatter="formatter"
		:maxDate="maxDate"
		:minDate="minDate"
   ></u-datetime-picker>
</template>

<script>
/* https://uviewui.com/components/datetimePicker.html */

export default {
	props: {
		value: {
			type: String | Number,
			default: function() {
				return null
			}
		},
		
		//展示格式
		mode: {
			type: String,
			default: 'datetime'
		},
		format: {
			type: String,
			default: 'YYYY-MM-DD HH:mm'
		},
		
		disStartDate: {
			type: String,
			default: ''
		},
		disEndDate: {
			type: String,
			default: ''
		}
	},
	
	watch: {
		value: {
			handler(newVal) {
				this.innerValue = newVal
			}
		},
		innerValue: {
			handler(newVal) {
				this.$emit('input', newVal)
			}
		},
	},
	computed: {
		maxDate() {
			let res
			if(this.disEndDate) {
				res = this.dayjs(this.disEndDate).valueOf() - 60000
			} else {
				res = this.dayjs().add(20, 'year').valueOf() 
			}
			return res
		},
		minDate() {
			
			let res
			if(this.disStartDate) {
				res = this.dayjs(this.disStartDate).valueOf() + 60000
			} else {
				res = this.dayjs().subtract(20, 'year').valueOf()
			}
			return res
		},
	},
    data() {
        return {
           isShow: false,
		   innerValue: Number(new Date()),
        }
    },
	onReady() {
		// 微信小程序需要用此写法
		this.$refs.datetimePickerRef.setFormatter(this.formatter)
	},
	
    methods: {
		
		show() {
			this.isShow= true;
		},
		
		close() {
		    this.isShow = false
		},
		
		confirm(e) {
			
			let time = this.dayjs(e.value).format(this.format)
			this.$emit('confirm',time)
			this.close()
		},
		
		 formatter(type, value) {
			if (type === 'year') {
				return `${value}年` 
			}
			if (type === 'month') {
				return `${value}月`
			}
			if (type === 'day') {
				return `${value}日`
			}
			if (type === 'hour') {
				return `${value}时`
			}
			if (type === 'minute') {
				return `${value}分`
			}
			return value
		},
	 
    }
}
</script>

<style lang="scss" scoped>
	
</style>
