import '../style/calendar.less';
import React, {
	Component
} from 'react';
import {
	observer
} from 'mobx-react';
import {
	WeaYear,
	WeaNewScroll
} from 'ecCom';
import {
	Row,
	Col,
	Calendar
} from 'antd';
import classnames from 'classnames';
import indexOf from 'lodash/indexOf';
import has from 'lodash/has';
import {
	WeaLocaleProvider
} from 'ecCom';
import moment from 'moment';
const getLabel = WeaLocaleProvider.getLabel;

@observer
export default class CustomerCalendar extends Component {
	constructor(props) {
		super(props);
	}

	componentDidMount() {}

	componentWillReceiveProps(nextProps) {}

	getLocale() {
		return {
			firstDayOfWeek: 0,
			lang: {
				format: {
					eras: [getLabel(383357, "公元前"), getLabel(383358, "公元")],
					months: [getLabel(1492, "一月"), getLabel(1493, "二月"), getLabel(383385, "三月"), getLabel(383387, "四月"), getLabel(1496, "五月"), getLabel(383392, "六月"),
						getLabel(383393, "七月"), getLabel(383394, "八月"), getLabel(383395, "九月"), getLabel(383396, "十月"), getLabel(383397, "十一月"), getLabel(383398, "十二月")
					],
					shortMonths: [getLabel(1492, "一月"), getLabel(1493, "二月"), getLabel(383385, "三月"), getLabel(383387, "四月"), getLabel(1496, "五月"), getLabel(383392, "六月"),
						getLabel(383393, "七月"), getLabel(383394, "八月"), getLabel(383395, "九月"), getLabel(383396, "十月"), getLabel(383397, "十一月"), getLabel(383398, "十二月")
					],
					weekdays: [getLabel(24626, "星期天"), getLabel(383399, "星期一"), getLabel(383400, "星期二"), getLabel(383402, "星期三"), getLabel(383403, "星期四"),
						getLabel(383404, "星期五"), getLabel(383405, "星期六")
					],
					shortWeekdays: [getLabel(16106, "周日"), getLabel(16100, "周一"), getLabel(16101, "周二"), getLabel(16102, "周三"), getLabel(16103, "周四"), getLabel(16104, "周五"),
						getLabel(16105, "周六")
					],
					veryShortWeekdays: [getLabel(82920, "日"), getLabel(82914, "一"), getLabel(82915, "二"), getLabel(82916, "三"), getLabel(82917, "四"), getLabel(82918, "五"), getLabel(82919, "六")],
					ampms: [getLabel(383408, "上午"), getLabel(383409, "下午")],
					datePatterns: [`yyyy'${getLabel(383372,"年")}'M'${getLabel(383373,"月")}'d'${getLabel(383374,"日")}' EEEE`, `yyyy'${getLabel(383372,"年")}'M'${getLabel(383373,"月")}'d'${getLabel(383374,"日")}'`, "yyyy-M-d", "yy-M-d"],
					timePatterns: [`ahh'${getLabel(383411,"时")}'mm'${getLabel(383412,"分")}'ss'${getLabel(383414,"秒")}' 'GMT'Z`, `ahh'${getLabel(383411,"时")}'mm'${getLabel(383412,"分")}'ss'${getLabel(383414,"秒")}'`, "H:mm:ss", "ah:mm"],
					dateTimePattern: '{date} {time}'
				}
			},
		}
	}

	//dateCellRender={this.monthDateCellRender.bind(this)}
	// locale={this.getLocale()}
	// onSelect={this.onMonthSelect.bind(this)}
	// 
	generateWeekView = () => {
		const {
			store
		} = this.props;
		const {
			calendarData,
			editFormInfo,
			getFormInfo
		} = store;
		return (
			<div className='weekView'>
				<div className='th'>
					<div>{getLabel(16106, "周日")}</div>
					<div>{getLabel(16100, "周一")}</div>
					<div>{getLabel(16101, "周二")}</div>
					<div>{getLabel(16102, "周三")}</div>
					<div>{getLabel(16103, "周四")}</div>
					<div>{getLabel(16104, "周五")}</div>
					<div>{getLabel(16105, "周六")}</div>
				</div>
				<div className='tb'>
					{
						store.toJS(calendarData).map((data, i) => {
							const rest = indexOf([0, 6], moment(data.date).day()) >= 0;
							const currDate = store.moment(data.date);
							const formatDate = currDate.format('YYYY-MM-DD');
							const className = classnames({
								['date']: true,
								['rest']: rest,
								['working']: !rest,
								['today']: moment().day() === moment(data.date).day()
							})
							return (
								<div>
									<div className={className}>
										{currDate.date()}
									</div>
									<div className='list'>
										<WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@nm9hes@${i}`} height={'100%'}>
										{
											data.datas && data.datas.length > 0 ? data.datas.map(d => {
												return (
													<div className='schedul' 
														onClick={() => editFormInfo({id: d.id, startDate: d.date, endDate: d.date, schedule: d.tips})}
														style={{backgroundColor: d.bgColor}}>
														{d.title}
													</div>
												)
											})
											:
											<div className='empty' onClick={() => getFormInfo(true, {startDate: formatDate, endDate: formatDate})}></div>
										}
										</WeaNewScroll>
									</div>
								</div>
							)
						})
					}
				</div>
			</div>
		)
	}

	generateDayView = () => {
		const {
			store
		} = this.props;
		const {
			calendarData,
			editFormInfo
		} = store;
		let th = [];
		for (let i = 0; i < 24; i++) th.push(<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@8wxs7k@${i}`} span={1}>{i}</Col>);
		let start = 0,
			colSpan = 1;
		return (
			<div className='dayView'>
				<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@zz8gd1`} className='th'>
					{th}
				</Row>
				<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@f0wtlk`} className='list'>
					{
						calendarData.map(data => {
							if(has(data, 'cols')){
								colSpan = data.cols;
								start = 0;
							}else if(colSpan != null){
								if(colSpan === (start + 1)){
									colSpan = 1;
									start = 0;
								}else{
									start++;
								}
							}
							if(start === 0)
								return (
									<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@6sf27a@1`} className='schedul' span={colSpan} title={data.tips} 
										onClick={() => editFormInfo({id: data.id, startDate: data.date, endDate: data.date, schedule: data.tips})}
										style={{backgroundColor: data.bgColor}}>
										{data.title}
									</Col>
								)
						})
					}
				</Row>
			</div>
		)
	}

	render() {
		const {
			store
		} = this.props;
		const {
			calendarType,
			currentDay,
			calendarData,
			yearDateCellRender,
			monthDateCellRender,
			changeView
		} = store;
		return (
			<div>
			{
				calendarType === 'year' && 
				<WeaYear ecId={`${this && this.props && this.props.ecId || ''}_WeaYear@f0lmnd`}
		            value={currentDay}
		            dateCellRender={yearDateCellRender}
		            onDateSelect={changeView}
	          	/>
			} 
			{
				calendarType === 'month' &&
				<div className='calendar-wrapper'>
					<Calendar ecId={`${this && this.props && this.props.ecId || ''}_Calendar@wisiq8`}
			            mode="month"
			            locale={this.getLocale()}
			            dateCellRender={monthDateCellRender}
			            value={currentDay}
			          />
			    </div>
			}
			 {
				calendarType === 'week' &&
				this.generateWeekView()
			}
		 	{
				calendarType === 'day' &&
				this.generateDayView()
			} 
			</div>
		)
	}
}