define(['vue', 'jquery', 'moment', 'constant'], function(Vue, $, moment, Const){
	Vue.component('modal', {
		props: ['trajectoryData', 'hoursModel', 'trackId', 'dataset'],
		template: '<transition name="modal">\
    				<div class="modal-mask">\
      					<div class="modal-wrapper">\
        					<div class="modal-container">\
								<div class="modal-header">\
            						<div name="header">\
            							<h3>Trajectory Data</h3>\
            							<div>Start point coordinate: {{startPoint}}</div>\
            							<div>Data model duration: {{duration}} (Total {{expectNumberHours}} hours)</div>\
            							<div>Data model type: {{type}}</div>\
            							<div>Track way: {{method}}</div>\
            						</div>\
          						</div>\
								<div class="modal-body">\
									<table class="table table-hover">\
										<thead>\
											<tr>\
												<th>#</th><th>Time</th><th>Lat</th><th>Lon</th>\
											</tr>\
										</thead>\
										<tbody>\
											<tr v-for="p in points">\
												<td>{{p.nth}}</td>\
												<td>{{p.time}}</td>\
												<td>{{p.lat}}</td>\
												<td>{{p.lon}}</td>\
											</tr>\
										</tbody>\
									</table>\
								</div>\
								<div class="modal-footer">\
            						<button class="modal-default-button btn btn-success" v-on:click="close">Close</button>\
          						</div>\
        					</div>\
      					</div>\
    				</div>\
  				  </transition>',
		mounted: function(){
			
		},
		data: function(){
			var path = this.trajectoryData ? this.trajectoryData.getPath() : [];
			if(path.length == 0) return {points: []};
			
			var points = [];
			var expectNumberHours = moment(this.hoursModel.max).diff(moment(this.hoursModel.min), 'hours');
			for(var i=0; i<= expectNumberHours; i++) {
				var data = {};
				if(Const.TRACK_METHODS[this.trackId.toUpperCase()].TRACK_WAY == 'backward'){
					data['time'] = moment(this.hoursModel.max).subtract(i, 'hours').format('YYYY/MM/DD HH:mm');
					data['nth'] = -i;
				}else if(Const.TRACK_METHODS[this.trackId.toUpperCase()].TRACK_WAY == 'forward'){
					data['time'] = moment(this.hoursModel.min).add(i, 'hours').format('YYYY/MM/DD HH:mm');
					data['nth'] = i;
				}
				if(path[i]){
					data['lat'] = path[i].lat;
					data['lon'] = path[i].lon;
				}else{
					data['lat'] = '-';
					data['lon'] = '-';
				}
				points.push(data);
			}
			
			return {
				points: points,
				startPoint: '(' + path[0].lat + ', ' + path[0].lon + ')',
				method: Const.TRACK_METHODS[this.trackId.toUpperCase()].NAME,
				expectNumberHours: expectNumberHours,
				type: this.dataset.toUpperCase(),
				duration: moment(this.hoursModel.min).format('YYYY/MM/DD HH:mm') + ' - ' + moment(this.hoursModel.max).format('YYYY/MM/DD HH:mm')
			}
		},
		methods: {
			close: function(){
				this.$emit('close-modal');
			}
		}
	});
});