// 核心库
import React, { Component } from 'react'
import { connect } from 'dva'
// 组件库
import { FullDatePicker, LocalSearch, LayoutCard } from '@woowalker/feui'
import CommonChart from '../../Chart/CommonChart'
// 工具库
import moment from 'moment'

class EmEnergyMaxDemandHistoryPage extends Component {
  constructor (props) {
    super(props)
    this.state = {
      dateType: '0',
      dateString: moment().format('YYYY'),
      chartData: {}
    }
  }

  handleSearch = () => {
    const json = {
      Keyword: this.props.data.TreeSelected.join(','),
      OrgId: this.props.login.OrgId,
      Parameter1: this.props.formParam.Parameter1,
      Parameter2: this.state.dateType,
      Parameter3: this.state.dateString,
    }
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: 'EM/Monitoring/GetMaxDemandHistoryData',
      payload: json
    }).then(res => {
      if (res && res.chartData) {
        const { chartData } = res
        this.setState({
          chartData: {
            xAxis: chartData.XAxis[0].Data,
            yAxis: chartData.YAxis,
            data: chartData.Data
          }
        })
      }
    })
  }

  render () {
    const { selectedNodes = [] } = this.props.data
    const saveImgName = selectedNodes.length ? `${selectedNodes.map(item => item.node.name).join('-')}最大需量` : '最大需量'
    return (
      <div className='scroll_page'>
        <LocalSearch
          isRemember
          shareKey='EmEnergyMaxDemandHistoryPage'
          setExtraData={({ dateString, dateType }, callback) => this.setState({ dateString, dateType }, callback)}
          getExtraData={() => ({ dateType: this.state.dateType, dateString: this.state.dateString })}
          onSearch={this.handleSearch}
        >
          <FullDatePicker
            dateType={this.state.dateType}
            dateString={this.state.dateString}
            onlyItem
            onChange={({ dateString, dateType }) => this.setState({ dateString, dateType })}
          />
        </LocalSearch>
        <LayoutCard style={{ height: 'calc(100% - 88px)' }}>
          <CommonChart
            chartId='EmEnergyMaxDemandHistoryPage'
            {...this.state.chartData}
            saveImgName={saveImgName}
          />
        </LayoutCard>
      </div>
    )
  }
}

export default connect(({ login, app }) => ({ login, app }))(EmEnergyMaxDemandHistoryPage)
