import React, {Component} from 'react';
import {observer} from 'mobx-react';
import * as mobx from 'mobx';
import {WeaLocaleProvider, WeaNewScroll, WeaYear} from 'ecCom';
import {Calendar, Tooltip} from 'antd';
import moment from 'moment';
const getLabel = WeaLocaleProvider.getLabel;
const toJS = mobx.toJS;

@observer
export default class CalendarComs extends Component{
    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(16106, "周日"), getLabel(16100, "周一"), getLabel(16101, "周二"), getLabel(16102, "周三"), getLabel(16103, "周四"), getLabel(16104, "周五"), getLabel(16105, "周六")],
					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}'
				}
			},
		}
    }

    renderYearCellBottom(data) {
        return (
          <div className="year-cell-bottom">
            <div style={{backgroundColor: window.defaultScheduleBGColor[0], height: '100%'}}></div>
          </div>
        )
      }
    
    yearDateCellRender(date) {
        const {store} = this.props;
        let {calendarData, holidayData} = store;
        const d = date.getDayOfMonth();
        const select = moment(date.time);
        calendarData = toJS(calendarData);
        let formatDate = `${date.getYear()}-${(date.getMonth()+1+'').padLeft(2,0)}-${ (date.getDayOfMonth()+'').padLeft(2,0)}`
        let data = calendarData[formatDate];
        let holiday = holidayData[formatDate];
        let content = (
          <span>
            {holiday && <span className="tip" style={{color: holiday.isWorkday ? '#FF1B10' : '#1B9B12'}}>{holiday.tip}</span>}
            {d}
            {data && this.renderYearCellBottom(data)}
          </span>
        )
        
        return <div className="date-item">
          {content}
        </div>
    }

    onyearMonthSelect(date) {
        const {store} = this.props;
        let select = new moment(date.time).toDate();
        store.changeDateHandler(select);
        store.updateDateTabkey('2');
        store.getData();
    }

    monthDateCellRender(date) {
        const {store} = this.props;
        let {dateTabkey, pDate, calendarData, holidayData, statusActiveType} = store;
        calendarData = toJS(calendarData);
        const select = moment(date.time);
        if (moment(toJS(pDate)).format('YYYY-MM') == select.format('YYYY-MM')) {
          let data = calendarData[select.format('YYYY-MM-DD')];
          let holiday = holidayData[select.format('YYYY-MM-DD')];
          return (
            <div className="calendar-item">
                {
                  holiday && <span className="tip" style={{color: holiday.isWorkday ? '#FF1B10' : '#1B9B12'}}>{holiday.tip}</span>
                }
                {
                  data && 
                  <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@mw44xz`} placement="right" title={data.serial}>
                    <div className='workflow-item text-overflow shift-item' style={{backgroundColor: window.defaultScheduleBGColor[0], color: '#fff'}}>
                      {data.serial}
                    </div>
                  </Tooltip>
                }
              </div>
          )
        }
    }

    render(){
        const {store} = this.props;
        let {dateTabkey, pDate, calendarData} = store;

        return (
            <div className='calendar'>
                <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@zqpfxj`} height={'100%'}>
                {
                    dateTabkey == '1' ? 
                    <WeaYear ecId={`${this && this.props && this.props.ecId || ''}_WeaYear@p9idue`} value={pDate}
                        dateCellRender={this.yearDateCellRender.bind(this)}
                        onMonthSelect={this.onyearMonthSelect.bind(this)}
                    />
                    : 
                    <Calendar ecId={`${this && this.props && this.props.ecId || ''}_Calendar@5mu8z5`}
                        mode="month"
                        dateCellRender={this.monthDateCellRender.bind(this)}
                        locale={this.getLocale()}
                        value={pDate}
                    />
                }
                </WeaNewScroll>
            </div>
        )
    }
}