import React from 'react';
import cn from 'classnames';
import ReactDOM from 'react-dom';

import BigCalendar from '@beisen/m-calendar';
import events from './events';

import '@beisen/m-calendar/lib/less/styles.less';
import './styles.less';
import './prism.less';

var injectTapEventPlugin = require("react-tap-event-plugin");
injectTapEventPlugin();
const allData = {
    "code": 200,
    "message": null,
    "param": "[{\"Day\":\"2017-05-01T00:00:00\",\"ShowInfo\":\"坐班\",\"IsWorkDay\":false,\"IsHoliday\":false,\"IsPublicHoliday\":true,\"IsErrorRecord\":true,\"RecordInfo4Mobile\":null,\"VacationInfoMobiles\":null},{\"Day\":\"2017-05-02T00:00:00\",\"ShowInfo\":\"坐班\",\"IsWorkDay\":false,\"IsHoliday\":false,\"IsPublicHoliday\":true,\"IsErrorRecord\":true,\"RecordInfo4Mobile\":{\"Title\":\"2017 五月 02Tuesday\",\"AbsenceHors\":\"0小时\",\"ApproveStatus\":\"审批中\"},\"VacationInfoMobiles\":[{\"BeginDateTime\":\"2017-05-09T19:01:56.1677862+08:00\",\"StopDateTime\":\"2017-05-09T19:01:56.1677862+08:00\",\"ApproveStatus\":\"审批中\",\"AbsenceHors\":\"1小时\",\"Title\":\"年假\"}]},{\"Day\":\"2017-05-03T00:00:00\",\"ShowInfo\":\"坐班\",\"IsWorkDay\":false,\"IsHoliday\":false,\"IsPublicHoliday\":true,\"IsErrorRecord\":true,\"RecordInfo4Mobile\":null,\"VacationInfoMobiles\":null},{\"Day\":\"2017-05-04T00:00:00\",\"ShowInfo\":\"坐班\",\"IsWorkDay\":false,\"IsHoliday\":false,\"IsPublicHoliday\":true,\"IsErrorRecord\":true,\"RecordInfo4Mobile\":null,\"VacationInfoMobiles\":null},{\"Day\":\"2017-05-05T00:00:00\",\"ShowInfo\":\"坐班\",\"IsWorkDay\":false,\"IsHoliday\":false,\"IsPublicHoliday\":true,\"IsErrorRecord\":true,\"RecordInfo4Mobile\":null,\"VacationInfoMobiles\":null},{\"Day\":\"2017-05-06T00:00:00\",\"ShowInfo\":\"坐班\",\"IsWorkDay\":false,\"IsHoliday\":false,\"IsPublicHoliday\":true,\"IsErrorRecord\":true,\"RecordInfo4Mobile\":null,\"VacationInfoMobiles\":null},{\"Day\":\"2017-05-07T00:00:00\",\"ShowInfo\":\"坐班\",\"IsWorkDay\":false,\"IsHoliday\":false,\"IsPublicHoliday\":true,\"IsErrorRecord\":true,\"RecordInfo4Mobile\":null,\"VacationInfoMobiles\":null},{\"Day\":\"2017-05-08T00:00:00\",\"ShowInfo\":\"坐班\",\"IsWorkDay\":false,\"IsHoliday\":false,\"IsPublicHoliday\":true,\"IsErrorRecord\":true,\"RecordInfo4Mobile\":null,\"VacationInfoMobiles\":null},{\"Day\":\"2017-05-09T00:00:00\",\"ShowInfo\":\"坐班\",\"IsWorkDay\":false,\"IsHoliday\":false,\"IsPublicHoliday\":true,\"IsErrorRecord\":true,\"RecordInfo4Mobile\":null,\"VacationInfoMobiles\":null},{\"Day\":\"2017-05-10T00:00:00\",\"ShowInfo\":\"坐班\",\"IsWorkDay\":false,\"IsHoliday\":false,\"IsPublicHoliday\":true,\"IsErrorRecord\":true,\"RecordInfo4Mobile\":null,\"VacationInfoMobiles\":null},{\"Day\":\"2017-05-11T00:00:00\",\"ShowInfo\":\"坐班\",\"IsWorkDay\":false,\"IsHoliday\":false,\"IsPublicHoliday\":true,\"IsErrorRecord\":true,\"RecordInfo4Mobile\":null,\"VacationInfoMobiles\":null},{\"Day\":\"2017-05-12T00:00:00\",\"ShowInfo\":\"坐班\",\"IsWorkDay\":false,\"IsHoliday\":false,\"IsPublicHoliday\":true,\"IsErrorRecord\":true,\"RecordInfo4Mobile\":null,\"VacationInfoMobiles\":null},{\"Day\":\"2017-05-13T00:00:00\",\"ShowInfo\":\"坐班\",\"IsWorkDay\":false,\"IsHoliday\":false,\"IsPublicHoliday\":true,\"IsErrorRecord\":true,\"RecordInfo4Mobile\":null,\"VacationInfoMobiles\":null},{\"Day\":\"2017-05-14T00:00:00\",\"ShowInfo\":\"坐班\",\"IsWorkDay\":false,\"IsHoliday\":false,\"IsPublicHoliday\":true,\"IsErrorRecord\":true,\"RecordInfo4Mobile\":null,\"VacationInfoMobiles\":null},{\"Day\":\"2017-05-15T00:00:00\",\"ShowInfo\":\"坐班\",\"IsWorkDay\":false,\"IsHoliday\":false,\"IsPublicHoliday\":true,\"IsErrorRecord\":true,\"RecordInfo4Mobile\":null,\"VacationInfoMobiles\":null},{\"Day\":\"2017-05-16T00:00:00\",\"ShowInfo\":\"坐班\",\"IsWorkDay\":false,\"IsHoliday\":false,\"IsPublicHoliday\":true,\"IsErrorRecord\":true,\"RecordInfo4Mobile\":null,\"VacationInfoMobiles\":null},{\"Day\":\"2017-05-17T00:00:00\",\"ShowInfo\":\"坐班\",\"IsWorkDay\":false,\"IsHoliday\":false,\"IsPublicHoliday\":true,\"IsErrorRecord\":true,\"RecordInfo4Mobile\":null,\"VacationInfoMobiles\":null},{\"Day\":\"2017-05-18T00:00:00\",\"ShowInfo\":\"坐班\",\"IsWorkDay\":false,\"IsHoliday\":false,\"IsPublicHoliday\":true,\"IsErrorRecord\":true,\"RecordInfo4Mobile\":null,\"VacationInfoMobiles\":null},{\"Day\":\"2017-05-19T00:00:00\",\"ShowInfo\":\"坐班\",\"IsWorkDay\":false,\"IsHoliday\":false,\"IsPublicHoliday\":true,\"IsErrorRecord\":true,\"RecordInfo4Mobile\":null,\"VacationInfoMobiles\":null},{\"Day\":\"2017-05-20T00:00:00\",\"ShowInfo\":\"坐班\",\"IsWorkDay\":false,\"IsHoliday\":false,\"IsPublicHoliday\":true,\"IsErrorRecord\":true,\"RecordInfo4Mobile\":null,\"VacationInfoMobiles\":null},{\"Day\":\"2017-05-21T00:00:00\",\"ShowInfo\":\"坐班\",\"IsWorkDay\":false,\"IsHoliday\":false,\"IsPublicHoliday\":true,\"IsErrorRecord\":true,\"RecordInfo4Mobile\":null,\"VacationInfoMobiles\":null},{\"Day\":\"2017-05-22T00:00:00\",\"ShowInfo\":\"坐班\",\"IsWorkDay\":false,\"IsHoliday\":false,\"IsPublicHoliday\":true,\"IsErrorRecord\":true,\"RecordInfo4Mobile\":{\"Title\":\"2017 五月 22Monday\",\"AbsenceHors\":\"0小时\",\"ApproveStatus\":\"审批中\"},\"VacationInfoMobiles\":[{\"BeginDateTime\":\"2017-05-09T19:01:56.1687872+08:00\",\"StopDateTime\":\"2017-05-09T19:01:56.1687872+08:00\",\"ApproveStatus\":\"审批中\",\"AbsenceHors\":\"1小时\",\"Title\":\"年假\"}]},{\"Day\":\"2017-05-23T00:00:00\",\"ShowInfo\":\"坐班\",\"IsWorkDay\":false,\"IsHoliday\":false,\"IsPublicHoliday\":true,\"IsErrorRecord\":true,\"RecordInfo4Mobile\":null,\"VacationInfoMobiles\":null},{\"Day\":\"2017-05-24T00:00:00\",\"ShowInfo\":\"坐班\",\"IsWorkDay\":false,\"IsHoliday\":false,\"IsPublicHoliday\":true,\"IsErrorRecord\":true,\"RecordInfo4Mobile\":null,\"VacationInfoMobiles\":null},{\"Day\":\"2017-05-25T00:00:00\",\"ShowInfo\":\"坐班\",\"IsWorkDay\":false,\"IsHoliday\":false,\"IsPublicHoliday\":true,\"IsErrorRecord\":true,\"RecordInfo4Mobile\":null,\"VacationInfoMobiles\":null},{\"Day\":\"2017-05-26T00:00:00\",\"ShowInfo\":\"坐班\",\"IsWorkDay\":false,\"IsHoliday\":false,\"IsPublicHoliday\":true,\"IsErrorRecord\":true,\"RecordInfo4Mobile\":null,\"VacationInfoMobiles\":null},{\"Day\":\"2017-05-27T00:00:00\",\"ShowInfo\":\"坐班\",\"IsWorkDay\":false,\"IsHoliday\":false,\"IsPublicHoliday\":true,\"IsErrorRecord\":true,\"RecordInfo4Mobile\":null,\"VacationInfoMobiles\":null},{\"Day\":\"2017-05-28T00:00:00\",\"ShowInfo\":\"坐班\",\"IsWorkDay\":false,\"IsHoliday\":false,\"IsPublicHoliday\":true,\"IsErrorRecord\":true,\"RecordInfo4Mobile\":null,\"VacationInfoMobiles\":null},{\"Day\":\"2017-05-29T00:00:00\",\"ShowInfo\":\"坐班\",\"IsWorkDay\":false,\"IsHoliday\":false,\"IsPublicHoliday\":true,\"IsErrorRecord\":true,\"RecordInfo4Mobile\":null,\"VacationInfoMobiles\":null},{\"Day\":\"2017-05-30T00:00:00\",\"ShowInfo\":\"坐班\",\"IsWorkDay\":false,\"IsHoliday\":false,\"IsPublicHoliday\":true,\"IsErrorRecord\":true,\"RecordInfo4Mobile\":null,\"VacationInfoMobiles\":null},{\"Day\":\"2017-05-31T00:00:00\",\"ShowInfo\":\"坐班\",\"IsWorkDay\":false,\"IsHoliday\":false,\"IsPublicHoliday\":true,\"IsErrorRecord\":true,\"RecordInfo4Mobile\":null,\"VacationInfoMobiles\":null}]",
    "id": null,
    "tipType": null,
    "moreMessage": null
}


class Example extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      date: new Date()
    }
    this.onChange = ( step )=>{
       let date = this.state.date;
       let year = date.getFullYear();
       let month = date.getMonth() + step;
       this.setState({
         date : new Date(year ,month ,1)
       });
    } 
  }

  getEventAndAttribute(){
		let events = [];
		let attribute = [];
    var list = JSON.parse(allData.param)
    
		list.forEach(item=>{
			attribute.push({
				time: new Date(item.Day),
				title: item.ShowInfo,
				VacationInfoMobiles: item.VacationInfoMobiles,
				RecordInfo4Mobile: item.RecordInfo4Mobile
			})
			if(item && item.hasOwnProperty('IsErrorRecord') && item.IsErrorRecord) {
					events.push({
							title: '',
							start: new Date(item.Day),
							end: new Date(item.Day)
					});
      }
		})

		return {
			events
			,attribute
		}
	}
 
  render(){
    let eventsAndAttr = this.getEventAndAttribute();
    return (<div className='app'>
              <div className='examples'>
                 <BigCalendar
                    {...eventsAndAttr}
                    date={ this.state.date }
                    defaultDate={ this.state.date }
                    onSelectEvent={(date,event,attr)=>{
                      console.log(date,event,attr)
                      this.setState({date:date})
                    }}
                    onSwipeLeft = {
                      this.onChange.bind(this,1)
                    } 
                    onSwipeRight = {
                      this.onChange.bind(this, -1)
                    } 
                  />
              </div>
            </div>)
  }
}

ReactDOM.render(<Example/>, document.getElementById('root'));