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

const { Option } = Select

class EDUnitUseByPersonPage extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      dateType: '1',
      dateString: moment().format('YYYY-MM'),
      orderType: 0,
      energyType:0,
      searchSize: undefined, 
      columns: [],
      dataSource: [],
      chartData: {}
    }
  }

  updateRelatedFieldConfigs = () => {
    const { dateType, dateString } = this.state
    /**
     * payload: {
     *  code: 'EM079', // 配置了导出按钮的表格（ListPage或者ListTable）的 formCode 
     *  relatedTo: 'EM048', // 需要额外插入查询条件的 Search 组件的 formCode，如果是 LocalSearch 则这个属性可以缺省
     *  extraRows: ['额外插入的标题'] // 导出按钮需要插入的额外的导出标题
     * }
     * relatedTo 可以缺省，缺省的话只是插入 extraRows 作为额外的标题，
     * 不缺省的话，通过 relatedTo 关联的 formCode 获取到对应的 Search 组件，并进一步获取到查询条件，
     * 然后把查询条件连同 extraRows 一同作为额外的标题，插入到导出的文件中
     */
    this.props.dispatch({
      type: 'search/setRelatedFieldConfigs',
      payload: {
        code: 'ED079',
        extraRows: [`${dateString}${dateType === '0' ? '年' : dateType === '1' ? '月' : '日'}`]
      }
    })
  }


  handleSearch = (value) => {
    this.updateRelatedFieldConfigs()
    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/GetUnitUseDataByPerson',
      payload: json
    }).then(res => {
      if (res) {
        const { chartData, listData } = res
        this.setState({
          columns: listData.columns,
          dataSource: listData.data,
          chartData: {
            xAxis: chartData?.XAxis[0].Data,
            yAxis: chartData?.YAxis,
            data: chartData?.Data
          }
        })
      }
    })
    /* this.setState({ searchParams: value }, () => {
      this.refOfTable && this.refOfTable.loadData(this.state.searchParams)
    }) */
  }
  handleSize = (searchSize) => {
    !isEqual(searchSize, this.state.searchSize) && this.setState({ searchSize })
  }

  handleChange = (value) => {
    this.setState({ orderType: value })
  }
  handleEnergyChange = (value) => {
    this.setState({ energyType: value })
  }

  render () {
    const { orderType,energyType ,searchSize,dataSource, columns, 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 style={{ marginBottom: 16 }}>
          <CommonChart
            chartId='EDUnitUseByPersonPage'
            {...chartData}
            style={{ height: 300 }}
          />
        </LayoutCard>
        <LayoutCard style={{ textAlign: 'right' }}>
          <ExportToExcel fileName='产量统计' tableId='ProdStatisticsTable' />
          <div id='ProdStatisticsTable'><EditableTable data={dataSource} columns={columns} /></div>
        </LayoutCard>
       {/*  <EditListTable
          preventDefaultSearch
          formCode={'ED079'}
          onRef={ref => this.refOfTable = ref}
          style={{ height: `calc(100% - ${searchSize?.fullHeight || 0}px)` }}
        /> */}
      </div>
    )
  }
}

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