// 核心库
import React from 'react'
import { connect } from 'dva'
// 组件库
import { Form, Select } from 'antd'
import { LocalSearch, FullDatePicker, LayoutCard } from '@woowalker/feui'
import CommonChart from '../../Chart/CommonChart'
// 工具库
import { initFilter, addRuleAndGroups } from '../../../utils/common'
import moment from 'moment'

const { Option } = Select

class EDUnitUseByCrewPage extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      dateType: '1',
      dateString: moment().format('YYYY-MM'),
      orderType: 1,
      energyType:0,
      chartData: {}
    }
  }

  handleSearch = (value) => {
    const { data } = this.props
    const { dateType, dateString, orderType,energyType} = this.state
    value.rules.push({
      field: 'Parameter1',
      operator: 0,
      value: orderType,
      isCustom: true,
      isSysParam: false,
    })
    value.rules.push({
      field: 'Parameter2',
      operator: 0,
      value: dateType,
      isCustom: true,
      isSysParam: false,
    })
    value.rules.push({
      field: 'Parameter3',
      operator: 0,
      value: dateString,
      isCustom: true,
      isSysParam: false,
    })
    value.rules.push({
      field: 'Parameter4',
      operator: 0,
      value: data.selectedNodes ? data.selectedNodes[0].node.id : null,
      isCustom: true,
      isSysParam: false,
    })
    value.rules.push({
      field: 'Parameter5',
      operator: 0,
      value: energyType,
      isCustom: true,
      isSysParam: false,
    })
    // 获取数据
    const { login, dispatch } = this.props
    const json = initFilter(login.OrgId)
    addRuleAndGroups(json, value)

    dispatch({
      type: 'app/getDataByPost',
      url: 'ED/EDUnitUse/LoadUnitUseDataByCrew',
      payload: json
    }).then(res => {
      if (res) {
        const { chartData } = res
        this.setState({
          chartData: {
            xAxis: chartData.XAxis[0].Data,
            yAxis: chartData.YAxis,
            data: chartData.Data
          }
        })
      }
    })
  }
  handleChange = (value) => {
    this.setState({ orderType: value })
  }
  handleEnergyChange = (value) => {
    this.setState({ energyType: value })
  }
  render () {
    const { orderType,energyType, chartData } = this.state
    return (
      <div className='scroll_page'>
        <LocalSearch
          isRemember
          shareKey='EDUnitUseByShiftPage'
          setExtraData={({ dateString, dateType }, callback) => this.setState({ dateString, dateType }, callback)}
          getExtraData={() => ({ dateType: this.state.dateType, dateString: this.state.dateString })}
          onSearch={this.handleSearch}
          extraSearch={[
            <FullDatePicker
              dateType={this.state.dateType}
              dateString={this.state.dateString}
              onlyItem
              onChange={({ dateString, dateType }) => this.setState({ dateString, dateType })}
              options={['0', '1', '4']}
            />,
            <Form.Item label='统计方式'>
              <Select value={orderType} onChange={this.handleChange}>
                <Option value={0}>时间统计</Option>
                <Option value={1}>产量统计</Option>
              </Select>
            </Form.Item>,
            <Form.Item label='类型'>
              <Select value={energyType} onChange={this.handleEnergyChange}>
                <Option value={0}>能耗</Option>
                <Option value={1}>用量</Option>
              </Select>
            </Form.Item>
          ]}
        />
        <LayoutCard title='按班组'>
          <CommonChart
            chartId='EDUnitUseByCrewPage'
            {...chartData}
            style={{ height: 300 }}
          />
        </LayoutCard>
      </div>
    )
  }
}

export default connect(({ login }) => ({ login }))(EDUnitUseByCrewPage)
