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


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

  handleSearch = (value) => {
    const { dateType, dateString } = this.state
    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: 'Parameter5',
      operator: 0,
      value: "LOSS",
      isCustom: true,
      isSysParam: false,
    })
    // 获取数据
    const { login, dispatch } = this.props
    const json = initFilter(login.OrgId)
    addRuleAndGroups(json, value)

    dispatch({
      type: 'app/getDataByPost',
      url: 'EM/EMEnergyDosage/GetLossRanking',
      payload: json
    }).then(res => {
      if (res) {
        const { chartData } = res
        this.setState({
          ...res,
          chartData: {
            xAxis: chartData.XAxis[0].Data,
            yAxis: chartData.YAxis,
            data: chartData.Data
          }
        })
      }
    })
  }

  render() {
    const { formId, formCode } = this.props
    const { head, data,dateType, dateString, chartData } = this.state
    return (
      <>
        <Search
          formId={formId}
          formCode={formCode}
          onSearch={this.handleSearch}
          extraSearch={[
            <FullDatePicker
              dateType={dateType}
              dateString={dateString}
              onlyItem
              onChange={({ dateString, dateType }) => this.setState({ dateString, dateType })}
              options={['0', '1', '3']}
            />
          ]}
        />
        <LayoutCard title='排名'>
          <CommonChart
            chartId='EMLossRankingPage'
            {...chartData}
            style={{ height: 300 }}
          />
        </LayoutCard>
        <LayoutCard title='损耗同比'>
          <Table
            size='small'
            columns={head.map(({ Title: title, DataIndex: dataIndex }) => ({ title, dataIndex }))}
            dataSource={data}
            pagination={{ pageSize: 5 }}
            style={{ marginTop: 8 }}
          />
        </LayoutCard>
      </>
    )
  }
}

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