define(['vue', 'jquery', 'moment', 'datetimepicker'], function(Vue, $, moment){
	Vue.component('date-time-picker', {
		// props: ['startTime'],
		template: '<div id="datetimepicker" class="input-group date">\
					<input class="form-control" type="text" />\
					<span class="input-group-addon">\
						<span class="glyphicon glyphicon-calendar"></span>\
					</span>\
					<select v-model="mTime" class="form-control" style="margin-left: 5px;">\
						<option v-show="opt1">00:00</option>\
						<option v-show="opt2">06:00</option>\
						<option v-show="opt3">12:00</option>\
						<option v-show="opt4">18:00</option>\
					</select>\
				   </div>',
		mounted: function(){
			var _this = this;

			$("#datetimepicker").datetimepicker({
                format: "YYYY/MM/DD",
                showTodayButton: true,
                widgetPositioning: {
                	horizontal: 'left'
                },
                maxDate: moment().endOf('day')
			});

			$("#datetimepicker").on("dp.change", function(e){
				var isToday = e.date.isSame(moment(), 'day');
				if (isToday) {
					var nHour = e.date.hour();
					if (nHour < 6) {
						_this.opt1 = true;
						_this.opt2 = _this.opt3 = _this.opt4 = false;
					} else if (nHour < 12) {
						_this.opt1 = _this.opt2 = true;
						_this.opt3 = _this.opt4 = false;
					} else if (nHour < 18) {
						_this.opt1 = _this.opt2 = _this.opt3 = true;
						_this.opt4 = false;
					} else {
						_this.opt1 = _this.opt2 = _this.opt3 = _this.opt4 = true;
					}
				} else {
					_this.opt1 = _this.opt2 = _this.opt3 = _this.opt4 = true;
				}
				var mDate = e.date.clone();
				var hrs = _this.mTime.split(':')[0], mins = _this.mTime.split(':')[1];
				mDate.hour(parseInt(hrs));
				mDate.minute(parseInt(mins));
				_this.mDate = mDate;
			});

			$("#datetimepicker").data("DateTimePicker").date(this.mDate);
		},
		data: function(){
			return {
				mDate: moment(),
				mTime: '00:00',
				opt1: true,
				opt2: true,
				opt3: true,
				opt4: true
			}
		},
		methods: {
			onChange: function(){
				this.$emit('calendar-change', this.mDate);
			}
		},
		watch: {
			mTime: function(mTime){
				var mDate = this.mDate.clone();
				var hrs = this.mTime.split(':')[0], mins = this.mTime.split(':')[1];
				mDate.hour(parseInt(hrs));
				mDate.minute(parseInt(mins));
				this.mDate = mDate;
				this.onChange();
			},
			mDate: function(){
				this.onChange();
			}
		}
	});
});