// 核心库
import React from 'react'
import { connect } from 'dva'
// 组件库
import { Form, Select, Table, Cascader } from 'antd'
import { Search, LayoutCard } from '@woowalker/feui'
import CommonChart from '../../Chart/CommonChart'
// 工具库
import { initFilter, addRuleAndGroups } from '../../../utils/common'
// 样式
const { Option } = Select

class EaKpiProductionUnitPage extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      option: [],
      type: '',
      head: [],
      data: [],
      Parameter2: '',
      nodeOptions: [],
      chartData: {}
    }
  }
  componentDidMount () {
    this.getTpye()
    this.getUseTreeData()
  }

  getTpye = () => {
    const { login, dispatch } = this.props
    const json = initFilter(login.OrgId)
    dispatch({
      type: 'app/getDataByPost',
      url: 'KR/Statistics/GetEnergyType',
      payload: json,
      onComplete: (res) => {
        if (res) {
          this.setState({ option: res.option })
        }
      }
    })
  }

  getUseTreeData = () => {
    const json = {
      OrgId: this.props.login.OrgId
    }
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: 'BD/BDMeterNode/UnitTreeData',
      payload: json,
      onComplete: (res) => {
        if (res) {
          this.setState({ nodeOptions: res })
        }
      }
    })
  }

  handleSearch = (value) => {
    value.rules.push({
      field: 'Parameter3',
      operator: 0,
      value: this.state.type,
      isCustom: true,
      isSysParam: false,
    })
    value.rules.push({
      field: 'Parameter2',
      operator: 0,
      value: this.state.parameter2,
      isCustom: true,
      isSysParam: false,
    })
    this.setState({
      searchRules: value
    }, () => {
      this.getData(value)
    })
  }

  getData = (value) => {
    const { login, dispatch } = this.props
    const json = initFilter(login.OrgId)
    addRuleAndGroups(json, value)

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

  handleTypeChange = (value) => {
    this.setState({ type: value })
  }

  onCascaderChange = (value) => {
    this.setState({ parameter2: value.length > 0 ? value[value.length - 1] : '' })
  }

  displayRender = (label) => {
    return label[label.length - 1]
  }

  render () {
    const { formId, formCode } = this.props
    const { option, type, head, data, nodeOptions, chartData } = this.state

    let columns = []
    head.forEach((n, i) => {
      const item = {
        title: n.Title,
        dataIndex: n.DataIndex,
        key: n.DataIndex
      }
      if (i < 2) {
        item.render = (value, row) => {
          return {
            children: value,
            props: {
              rowSpan: Number(row.RowSpan)
            }
          }
        }
      }
      columns.push(item)
    })
    return (
      <>
        <Search
          formId={formId}
          formCode={formCode}
          onSearch={this.handleSearch}
          extraInsertPlace='after'
          extraSearch={[
            <Form.Item label='节点'>
              <Cascader
                changeOnSelect
                options={nodeOptions}
                onChange={this.onCascaderChange}
                fieldNames={{ label: 'Label', value: 'Value', children: 'Children' }}
                displayRender={this.displayRender}
                placeholder='请选择节点'
              />
            </Form.Item>,
            <Form.Item label='矿山安全类型' key='EaKpiProductionUnitPage_Energy'>
              <Select value={type} onChange={this.handleTypeChange}>
                <Option value=''>综合能耗</Option>
                {option.map(item => <Option key={item.ID} value={item.ID}>{item.NAME}</Option>)}
              </Select>
            </Form.Item>
          ]}
        />
        <LayoutCard style={{ marginBottom: 16 }}>
          <CommonChart
            chartId='EaKpiProductionUnitPage'
            {...chartData}
            style={{ height: 300 }}
          />
        </LayoutCard>
        <LayoutCard>
          <Table
            id='EaKpiProductionUnitPageExport'
            size='small'
            bordered
            columns={columns}
            dataSource={data}
            pagination={false}
          />
        </LayoutCard>
      </>
    )
  }
}

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