<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" v-model="value" :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" :end="end" :begin="begin" :mo.sync="mo" :state="state" v-show="mo==='day'"></date-days>
	<date-months :date-time.sync="dateTime" :end="end" :begin="begin" :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:'选择时间'
			},
			end:{
				type:String
			},
			begin:{
				type:String
			}
		},
		components:{
			dateDays,
			dateMonths
		},
		data() {
			let dateTime=this.value?new Date(this.value):new Date();

			return {

				dateTime:{
					year:dateTime.getFullYear(),
					month:dateTime.getMonth(),
					date:dateTime.getDate(),
					hour:dateTime.getHours(),
					minute:dateTime.getMinutes(),
					second:dateTime.getSeconds(),
					__now__:Date.now()
				},

				x: 0,
				y: 0,
				mo:'day',
				show:false
			}
		},
		watch:{
			'dateTime':{
				handler: function (val, oldVal) { 
					this.value=this.showDate(val,this.format);
				},
      			deep: true
			}
		},
		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="";
			
			this.blindEvent();
		}
	}
</script>