<style>
.datepicker{
    padding: 10px;
}
.datepicker.vue-show{
    display:block;
}
.datepicker>div.vue-show-imo{
    display:block;
}
.datepicker input[type='number']{
    text-align: center;
}
.calendar-button{
    float:right;
    margin: 5px 5px 0;
}
.calendar-time{
    text-align:center;
    margin: 5px 0;
}
 </style>
<template>
	<input type="text" class="form-control" @click="showCalendar" :value="date" :placeholder="placeholder">
	<div class="datepicker datepicker-dropdown dropdown-menu vue-show" :style="{'left':x+'px','top':y+'px'}" v-show="isshow">
	<date-days :date-time.sync="dateTime" :mo.sync="mo" :state="state" v-show="mo==='day'"></date-days>
	<date-months :date-time.sync="dateTime" :mo.sync="mo" v-show="mo==='month'"></date-months>
	</div>
</template>
<script>
import dateDays from "./dateDays.vue"
import dateMonths from "./dateMonths.vue"
	export default {
		props:{
			value:{
				type:String,
				default:''
			},
			state:{
				type:String,
				default:''
			},
			format:{
				type:String,
				default:"yyyy-MM-dd"
			},
			placeholder:{
				type:String,
				default:'选择时间'
			}
		},
		components:{
			dateDays,
			dateMonths
		},
		data() {
			return {
				// dateText: this.value?new Date(this.value):new Date(),

				dateTime:{
					year:'',
					month:'',
					date:'',
					hour:'',
					minute:'',
					second:''
				},

				x: 0,
				y: 0,
				mo:'day',
				show:false
			}
		},
		computed:{
			date(){
				if(this.dateTime.year&&this.dateTime._hasdefault){
					this.value=this.showDate(this.dateTime,this.format);
				}
				return this.value;
			},
			isshow(){
				return this.mo?true:false;
			}
		},
		methods:{
			showCalendar(e){
				var that=this;
				this.x=e.target.offsetLeft;
            	this.y=e.target.offsetTop+e.target.offsetHeight+0;
            	if(this.format.indexOf("dd")>-1){
            		this.mo="day";
            	}else{
            		this.mo="month";
            	}
				e.stopPropagation();//阻止事件向上冒泡
			},
			showDate(dateTime,format) {
		        var o = {
		            "M+": dateTime.month + 1, //month
		            "d+": dateTime.date,    //day
		            "h+": dateTime.hour,   //hour
		            "m+": dateTime.minute, //minute
		            "s+": dateTime.second
		        }
		        if (/(y+)/.test(format)) format = format.replace(RegExp.$1,
		        (dateTime.year + "").substr(4 - RegExp.$1.length));
		        for (var k in o) if (new RegExp("(" + k + ")").test(format))
		            format = format.replace(RegExp.$1,
		            RegExp.$1.length == 1 ? o[k] :
		            ("00" + o[k]).substr(("" + o[k]).length));
		        return format;
		    },
			//点击空白处弹层关闭
			blindEvent(){
				var self = this;
				$(document).on("click", function(){
					self.mo="";
				});
				$(".datepicker").on("click", function(event){
					event.stopPropagation();//阻止事件向上冒泡
				});
			}
		},
		ready(){
			this.mo="";
			let dateTime=this.value?new Date(this.value):new Date();

			this.dateTime={
				year:dateTime.getFullYear(),
				month:dateTime.getMonth(),
				date:dateTime.getDate(),
				hour:dateTime.getHours(),
				minute:dateTime.getMinutes(),
				second:dateTime.getSeconds(),
				_hasdefault:this.value?true:false
			};
			if(this.value){
				this.value=this.showDate(this.dateTime,this.format);
			}
			this.blindEvent();
		}
	}
</script>