import React from 'react'
import { connect } from 'dva'
import moment from 'moment'
import { Calendar, Badge } from 'antd'
import styles from '../ED/EDProRecordSchedulingPage.css'
import { LayoutCard } from '@woowalker/feui'
import { guid, extendRule, initQueryFilter, extendInclude } from "../../../utils/common"
import storage from "../../../utils/storage"
class CalendarPage extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      CurrentMonthFirstDay: moment(new Date()).startOf('month').format("YYYY-MM-DD"),
      CurrentMonthLastDay: moment(new Date()).endOf('month').format("YYYY-MM-DD"),
      CurrentMonthList: [],
      currentData: '',
      CalendarModelList: [],
      nodeId: '',
      nodeName: ''
    }
  };

  LoadDailyData = (callBack) => { //取每日工作时间数据
    this.setState({ nodeId: this.props.data.selectedNodes[0].node.id, nodeName: this.props.data.selectedNodes[0].node.name })
    const orgId = storage('lacal').getItem('webOrgId').val
    let json = initQueryFilter(orgId, 1, 100, "START_TIME", 0)
    extendRule(json, "NODE_ID", 1, this.props.data.selectedNodes[0].node.id)
    extendInclude(json, "Nav_MeterNode")
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: 'PM/ProductPlan/OrderEntities',
      payload: json,
      onComplete: (ret) => {
        this.setState({
          CurrentMonthList: ret
        }, () => {
          if (callBack && typeof callBack == "function") {
          }
        })
      }
    })
  }

  componentDidMount() {
    this.LoadDailyData()
  }

  getListData = (value) => {
    let listData = []
    let listSumData = []
    if (this.state.CurrentMonthList) {
      this.state.CurrentMonthList.forEach(v => {
        if (v.START_TIME.slice(0, 10) <= value.format("YYYY-MM-DD") && v.END_TIME.slice(0, 10) >= value.format("YYYY-MM-DD")) {
          var find = listData.find(item => item.time >= v.START_TIME.slice(0, 10) && item.time <= v.END_TIME.slice(0, 10))
          if (find) {
            find.qty = find.qty + v.AVG_QTY
          }
          else {
            listData.push({
              type: v.ENABLE_STATUS == 1 ? 'default' : 'success',
              time: value.format("YYYY-MM-DD"),
              qty: v.AVG_QTY
            })
          }
        }
      })
    }
    listData.forEach(v => {
      listSumData.push({
        type: v.ENABLE_STATUS == 1 ? 'default' : 'success',
        content: "计划产量：" + parseInt(v.qty)
      })
    })
    return listSumData || []
  }
  dateCellRender = (value) => {
    if (value.format("YYYY-MM-DD") >= this.state.CurrentMonthFirstDay && value.format("YYYY-MM-DD") <= this.state.CurrentMonthLastDay) {
      const listData = this.getListData(value)
      return (
        <ul key={guid()} className={styles.events}>
          {
            listData.map(item => (
              <li key={item.content} style={{ listStyle: 'none' }}>
                <Badge status={item.type} text={item.content} />
              </li>
            ))
          }
        </ul>
      )
    }
  }

  getMonthData = ({ value }) => {
    if (value.month() === 8) {
      return 1394
    }
  }

  monthCellRender = ({ value }) => {
    const num = this.getMonthData(value)
    return num ? (
      <div className="notes-month">
        <section>{num}</section>
        <span>Backlog number</span>
      </div>
    ) : null
  };
  onPanelChange = (date, mode) => {
    this.setState({
      CurrentMonthFirstDay: moment(date).startOf('month').format("YYYY-MM-DD"),
      CurrentMonthLastDay: moment(date).endOf('month').format("YYYY-MM-DD"),
    }, () => {
      this.LoadDailyData()
    })
  };

  handleCalenderDisabledDate = (currentDate) => {
    if (!this.state.CurrentMonthFirstDay || !this.state.CurrentMonthLastDay) return false
    if ((moment(this.state.CurrentMonthFirstDay).isBefore(currentDate, 'day') && currentDate.isBefore(moment(this.state.CurrentMonthLastDay), 'day')) ||
      currentDate.isSame(moment(this.state.CurrentMonthFirstDay), 'day') || currentDate.isSame(moment(this.state.CurrentMonthLastDay), 'day')) {
      return false
    }
    return true
  }


  render() {
    return (
      <div className='scroll_page'>
        <LayoutCard className={styles.calendarWrap}>
          <Calendar
            dateCellRender={this.dateCellRender}
            onPanelChange={this.onPanelChange}
            disabledDate={this.handleCalenderDisabledDate}
          />
        </LayoutCard>
      </div>
    )
  }
}

export default connect()(CalendarPage)