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

class PMProdPlanStatisticsPage extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      columns: [],
      dataSource: [],
      chartData: {}
    }
  }

  handleSearch = (value) => {
    value.rules.push({
      field: 'Parameter4',
      operator: 0,
      value: this.props.data.selectedNodes[0].node.id,
      isCustom: true,
      isSysParam: false,
    })

    // 获取数据
    const { login, dispatch } = this.props
    const json = initFilter(login.OrgId)
    addRuleAndGroups(json, value)

    dispatch({
      type: 'app/getDataByPost',
      url: 'PM/PMProductPlan/GetProPlanStatistical',
      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
          }
        })
      }
    })
  }

  render () {
    const { formId, formCode } = this.props
    const { dataSource, columns, chartData } = this.state

    return (
      <div className='scroll_page'>
        <Search
          formId={formId}
          formCode={formCode}
          onSearch={this.handleSearch}
        />
        <LayoutCard style={{ marginBottom: 16 }}>
          <CommonChart
            chartId='PMProdPlanStatisticsPage'
            {...chartData}
            style={{ height: 300 }}
          />
        </LayoutCard>
        <LayoutCard style={{ textAlign: 'right' }}>
          <ExportToExcel fileName='计划产量统计' tableId='ProdStatisticsTable' />
          <div id='ProdStatisticsTable'><EditableTable data={dataSource} columns={columns} /></div>
        </LayoutCard>
      </div >
    )
  }
}

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