// 核心库
import React from 'react'
import { connect } from 'dva'
// 组件库
import { Form, DatePicker, Table, InputNumber, Input } from 'antd'
import { LayoutCard } from '@woowalker/feui'
// 工具库
import moment from 'moment'
import { guid } from '../../../utils/common'

const EditableContext = React.createContext()
const EditableRow = ({ form, index, ...props }) => (
  <EditableContext.Provider value={form}>
    <tr {...props} />
  </EditableContext.Provider>
)

const EditableFormRow = Form.create()(EditableRow)

class EditableCell extends React.Component {
  state = {
    editing: false,
  };

  toggleEdit = () => {
    const editing = !this.state.editing
    this.setState({ editing }, () => {
      if (editing) {
        this.input.focus()
      }
    })
  };

  save = e => {
    const { record, handleSave } = this.props
    this.form.validateFields((error, values) => {
      if (error && error[e.currentTarget.id]) {
        return
      }
      this.toggleEdit()
      handleSave({ ...record, ...values })
    })
  };

  renderCell = form => {
    this.form = form
    const { children, dataIndex, record } = this.props
    const { editing } = this.state
    return editing ? (
      <Form.Item style={{ margin: 0 }}>
        {form.getFieldDecorator(dataIndex, {
          initialValue: record[dataIndex],
        })(<InputNumber ref={node => (this.input = node)} onPressEnter={this.save} onBlur={this.save} />)}
      </Form.Item>
    ) : (
        <div
          className="editable-cell-value-wrap"
          style={{ paddingRight: 24 }}
          onClick={this.toggleEdit}
        >
          {children}
        </div>
      )
  };

  render() {
    const {
      editable,
      dataIndex,
      title,
      record,
      index,
      handleSave,
      children,
      ...restProps
    } = this.props
    return (
      <td {...restProps}>
        {editable ? (
          <EditableContext.Consumer>{this.renderCell}</EditableContext.Consumer>
        ) : (
            children
          )}
      </td>
    )
  }
}

class KrEnterpriseEnergyBalancePage extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      echertKey: guid(),
      date: moment(),
      editing: false,
      dataSource: []
    }
  }

  onBarRef = (ref) => {
    this.barChild = ref
  }

  dateChange = (date) => {
    this.setState({ date })
  }

  handleSave = (row) => {
    const newData = [...this.state.dataSource]
    const index = newData.findIndex((item) => row.key === item.key)
    const item = newData[index]
    newData.splice(index, 1, {
      ...item,
      ...row
    })
    this.setState({ dataSource: newData })
  };

  render() {
    const { editing } = this.state

    const data = [
      {
        EnergyType: "输入能量",
        EnergyName: "煤炭",
        PhysicalQuantity: "28000(t)",
        EquivalentValue: "150000",
        Equivalent: "150000",
        PowerStation: "148000",
        PumpRoom: "",
        Others: "",
        terminal: "",
        Total4: "148000",
        DeliveryDistribution: "",
        MainProduction: "",
        AuxiliaryProduction: "",
        Heating: "",
        Lighting: "",
        AirCond: "",
        Other: "",
        Total6: "",
      },
      {
        EnergyType: "输入能量",
        EnergyName: "柴油",
        PhysicalQuantity: "137(t)",
        EquivalentValue: "200",
        Equivalent: "200",
        PowerStation: "",
        PumpRoom: "",
        Others: "",
        terminal: "200",
        Total4: "200",
        DeliveryDistribution: "200",
        MainProduction: "",
        AuxiliaryProduction: "",
        Heating: "",
        Lighting: "",
        AirCond: "",
        Other: "200",
        Total6: "200",
      },
      {
        EnergyType: "输入能量",
        EnergyName: "汽油",
        PhysicalQuantity: "1360(t)",
        EquivalentValue: "2000",
        Equivalent: "2000",
        PowerStation: "",
        PumpRoom: "",
        Others: "",
        terminal: "2000",
        Total4: "2000",
        DeliveryDistribution: "2000",
        MainProduction: "",
        AuxiliaryProduction: "",
        Heating: "",
        Lighting: "",
        AirCond: "",
        Other: "2000",
        Total6: "2000",
      },
      {
        EnergyType: "输入能量",
        EnergyName: "蒸汽",
        PhysicalQuantity: "28000(t)",
        EquivalentValue: "",
        Equivalent: "",
        PowerStation: "",
        PumpRoom: "",
        Others: "",
        terminal: "",
        Total4: "",
        DeliveryDistribution: "75000",
        MainProduction: "5000",
        AuxiliaryProduction: "2450",
        Heating: "",
        Lighting: "",
        AirCond: "",
        Other: "",
        Total6: "7450",
      },
      {
        EnergyType: "输入能量",
        EnergyName: "电力",
        PhysicalQuantity: "100(GWh)",
        EquivalentValue: "34000",
        Equivalent: "12290",
        PowerStation: "180",
        PumpRoom: "",
        Others: "",
        terminal: "12110",
        Total4: "12290",
        DeliveryDistribution: "22110",
        MainProduction: "15010",
        AuxiliaryProduction: "6100",
        Heating: "",
        Lighting: "",
        AirCond: "",
        Other: "",
        Total6: "21110",
      },
      {
        EnergyType: "输入能量",
        EnergyName: "热水（回收利用能量）",
        PhysicalQuantity: "",
        EquivalentValue: "",
        Equivalent: "",
        PowerStation: "",
        PumpRoom: "",
        Others: "",
        terminal: "",
        Total4: "",
        DeliveryDistribution: "",
        MainProduction: "",
        AuxiliaryProduction: "",
        Heating: "500",
        Lighting: "",
        AirCond: "",
        Other: "3500",
        Total6: "4000",
      },
      {
        EnergyType: "输入能量",
        EnergyName: "合计1",
        PhysicalQuantity: "",
        EquivalentValue: "220200",
        Equivalent: "198490",
        PowerStation: "181180",
        PumpRoom: "",
        Others: "",
        terminal: "14310",
        Total4: "195490",
        DeliveryDistribution: "109310",
        MainProduction: "65010",
        AuxiliaryProduction: "30600",
        Heating: "1000",
        Lighting: "",
        AirCond: "",
        Other: "2200",
        Total6: "107310",
      },
      {
        EnergyType: "有效能量",
        EnergyName: "煤炭",
        PhysicalQuantity: "",
        EquivalentValue: "",
        Equivalent: "148000",
        PowerStation: "",
        PumpRoom: "",
        Others: "",
        terminal: "",
        Total4: "",
        DeliveryDistribution: "",
        MainProduction: "",
        AuxiliaryProduction: "",
        Heating: "",
        Lighting: "",
        AirCond: "",
        Other: "",
        Total6: "",
      },
      {
        EnergyType: "有效能量",
        EnergyName: "柴油",
        PhysicalQuantity: "",
        EquivalentValue: "",
        Equivalent: "200",
        PowerStation: "",
        PumpRoom: "",
        Others: "",
        terminal: "200",
        Total4: "200",
        DeliveryDistribution: "200",
        MainProduction: "",
        AuxiliaryProduction: "",
        Heating: "",
        Lighting: "",
        AirCond: "",
        Other: "200",
        Total6: "200",
      },
      {
        EnergyType: "有效能量",
        EnergyName: "汽油",
        PhysicalQuantity: "",
        EquivalentValue: "",
        Equivalent: "2000",
        PowerStation: "",
        PumpRoom: "",
        Others: "",
        terminal: "2000",
        Total4: "2000",
        DeliveryDistribution: "2000",
        MainProduction: "",
        AuxiliaryProduction: "",
        Heating: "",
        Lighting: "",
        AirCond: "",
        Other: "2000",
        Total6: "2000",
      },
      {
        EnergyType: "有效能量",
        EnergyName: "蒸汽",
        PhysicalQuantity: "",
        EquivalentValue: "",
        Equivalent: "",
        PowerStation: "75000",
        PumpRoom: "",
        Others: "",
        terminal: "",
        Total4: "74000",
        DeliveryDistribution: "15000",
        MainProduction: "24000",
        AuxiliaryProduction: "",
        Heating: "",
        Lighting: "",
        AirCond: "",
        Other: "",
        Total6: "69000",
      },
      {
        EnergyType: "有效能量",
        EnergyName: "电力",
        PhysicalQuantity: "",
        EquivalentValue: "",
        Equivalent: "12290",
        PowerStation: "10000",
        PumpRoom: "",
        Others: "",
        terminal: "12110",
        Total4: "12110",
        DeliveryDistribution: "12110",
        MainProduction: "12050",
        AuxiliaryProduction: "5100",
        Heating: "",
        Lighting: "",
        AirCond: "",
        Other: "",
        Total6: "17150",
      },
      {
        EnergyType: "有效能量",
        EnergyName: "热水（回收利用能量）",
        PhysicalQuantity: "",
        EquivalentValue: "",
        Equivalent: "",
        PowerStation: "",
        PumpRoom: "",
        Others: "",
        terminal: "",
        Total4: "",
        DeliveryDistribution: "",
        MainProduction: "",
        AuxiliaryProduction: "",
        Heating: "485",
        Lighting: "",
        AirCond: "",
        Other: "3500",
        Total6: "3985",
      },
      {
        EnergyType: "有效能量",
        EnergyName: "合计2",
        PhysicalQuantity: "",
        EquivalentValue: "",
        Equivalent: "195490",
        PowerStation: "95000",
        PumpRoom: "",
        Others: "",
        terminal: "14310",
        Total4: "109310",
        DeliveryDistribution: "107310",
        MainProduction: "57050",
        AuxiliaryProduction: "29100",
        Heating: "9700",
        Lighting: "",
        AirCond: "",
        Other: "2200",
        Total6: "101550",
      },
      {
        EnergyType: "损失能量",
        PhysicalQuantity: "",
        EquivalentValue: "",
        Equivalent: "3000",
        PowerStation: "86180",
        PumpRoom: "",
        Others: "",
        terminal: "",
        Total4: "86180",
        DeliveryDistribution: "2000",
        MainProduction: "3960",
        AuxiliaryProduction: "1500",
        Heating: "300",
        Lighting: "",
        AirCond: "",
        Other: "",
        Total6: "5760",
      },
      {
        EnergyType: "回收利用能量（热水）",
        PhysicalQuantity: "",
        EquivalentValue: "",
        Equivalent: "",
        PowerStation: "",
        PumpRoom: "",
        Others: "",
        terminal: "",
        Total4: "",
        DeliveryDistribution: "",
        MainProduction: "4000",
        AuxiliaryProduction: "",
        Heating: "",
        Lighting: "",
        AirCond: "",
        Other: "",
        Total6: "4000",
      },
      {
        EnergyType: "合计3",
        PhysicalQuantity: "",
        EquivalentValue: "",
        Equivalent: "198490",
        PowerStation: "181180",
        PumpRoom: "",
        Others: "",
        terminal: "14310",
        Total4: "195490",
        DeliveryDistribution: "109310",
        MainProduction: "65010",
        AuxiliaryProduction: "30600",
        Heating: "10000",
        Lighting: "",
        AirCond: "",
        Other: "2200",
        Total6: "107310",
      },
      {
        EnergyType: "矿山安全利用率%",
        PhysicalQuantity: "",
        EquivalentValue: "",
        Equivalent: "98.49",
        PowerStation: "52.43",
        PumpRoom: "",
        Others: "",
        terminal: "98.17",
        Total4: "55.92",
        DeliveryDistribution: "98.17",
        MainProduction: "87.76",
        AuxiliaryProduction: "95.10",
        Heating: "97.00",
        Lighting: "",
        AirCond: "",
        Other: "100",
        Total6: "94.63",
      },

    ]

    const render0 = (value, row, index) => {
      return {
        children: value,
        props: {
          colSpan: 1
        },
      }
    }

    const columns = [
      {
        title: "矿山安全名称",
        colSpan: 2,
        dataIndex: "EnergyType",
        key: "EnergyType",
        render: (value, row, index) => {
          if (index < 7) {
            if (index == 0) {
              return {
                children: value,
                props: {
                  rowSpan: 7
                }
              }
            }
            else {
              return {
                props: {
                  rowSpan: 0
                }
              }
            }
          }
          else if (index < 14) {
            if (index == 7) {
              return {
                children: value,
                props: {
                  rowSpan: 7
                }
              }
            }
            else {
              return {
                props: {
                  rowSpan: 0
                }
              }
            }
          }
          return {
            children: value,
            props: {
              colSpan: 2
            },
          }
        }
      },
      {
        title: "",
        colSpan: 0,
        dataIndex: "EnergyName",
        key: "EnergyName",
        render: (value, row, index) => {
          if (index < 14) {
            return {
              children: value,
              props: {
                rowSpan: 1
              }
            }
          }
          return {
            children: value,
            props: {
              rowSpan: 0
            },
          }
        }
      },
      {
        title: "购入存储",
        children: [
          {
            title: "实物量(单位)",
            dataIndex: "PhysicalQuantity",
            key: "PhysicalQuantity",
            render: render0,
            editable: editing,
            onCell: (record) => ({
              record,
              editable: editing,
              dataIndex: "PhysicalQuantity",
              title: "实物量",
              handleSave: this.handleSave
            })
          }
        ]
      },
      {
        title: "",
        children: [
          {
            title: "等价值",
            dataIndex: "EquivalentValue",
            key: "EquivalentValue",
            render: render0,
            editable: editing,
            onCell: (record) => ({
              record,
              editable: editing,
              dataIndex: "EquivalentValue",
              title: "等价值",
              handleSave: this.handleSave
            })
          }
        ]
      },
      {
        title: "",
        children: [
          {
            title: "当量值",
            dataIndex: "Equivalent",
            key: "Equivalent",
            render: render0,
            editable: editing,
            onCell: (record) => ({
              record,
              editable: editing,
              dataIndex: "Equivalent",
              title: "当量值",
              handleSave: this.handleSave
            })
          }
        ]
      },
      {
        title: "加工转换",
        children: [
          {
            title: "发电站",
            dataIndex: "PowerStation",
            key: "PowerStation",
            render: render0,
            editable: editing,
            onCell: (record) => ({
              record,
              editable: editing,
              dataIndex: "PowerStation",
              title: "发电站",
              handleSave: this.handleSave
            })
          },
          {
            title: "水泵房",
            dataIndex: "PumpRoom",
            key: "PumpRoom",
            render: render0,
            editable: editing,
            onCell: (record) => ({
              record,
              editable: editing,
              dataIndex: "PumpRoom",
              title: "水泵房",
              handleSave: this.handleSave
            })
          },
          {
            title: "其他",
            dataIndex: "Others",
            key: "Others",
            render: render0,
            editable: editing,
            onCell: (record) => ({
              record,
              editable: editing,
              dataIndex: "Others",
              title: "其他",
              handleSave: this.handleSave
            })
          },
          {
            title: "直接进入终端",
            dataIndex: "terminal",
            key: "terminal",
            render: render0,
            editable: editing,
            onCell: (record) => ({
              record,
              editable: editing,
              dataIndex: "terminal",
              title: "直接进入终端",
              handleSave: this.handleSave
            })
          },
          {
            title: "合计4",
            dataIndex: "Total4",
            key: "Total4",
            render: render0,
            editable: editing,
            onCell: (record) => ({
              record,
              editable: editing,
              dataIndex: "Total4",
              title: "合计4",
              handleSave: this.handleSave
            })
          },

        ]
      },
      {
        title: "",
        colSpan: 0,
        children: [
          {
            title: "输送分配",
            dataIndex: "DeliveryDistribution",
            key: "DeliveryDistribution",
            width: 100,
            render: render0,
            editable: editing,
            onCell: (record) => ({
              record,
              editable: editing,
              dataIndex: "DeliveryDistribution",
              title: "输送分配",
              handleSave: this.handleSave
            })
          }
        ],
      },
      {
        title: "终端使用",
        children: [
          {
            title: "主要生产",
            dataIndex: "MainProduction",
            key: "MainProduction",
            render: render0,
            editable: editing,
            onCell: (record) => ({
              record,
              editable: editing,
              dataIndex: "MainProduction",
              title: "主要生产",
              handleSave: this.handleSave
            })
          },
          {
            title: "辅助生产",
            dataIndex: "AuxiliaryProduction",
            key: "AuxiliaryProduction",
            render: render0,
            editable: editing,
            onCell: (record) => ({
              record,
              editable: editing,
              dataIndex: "AuxiliaryProduction",
              title: "辅助生产",
              handleSave: this.handleSave
            })
          },
          {
            title: "采暖",
            dataIndex: "Heating",
            key: "Heating",
            render: render0,
            editable: editing,
            onCell: (record) => ({
              record,
              editable: editing,
              dataIndex: "Heating",
              title: "采暖",
              handleSave: this.handleSave
            })
          },
          {
            title: "照明",
            dataIndex: "Lighting",
            key: "Lighting",
            render: render0,
            editable: editing,
            onCell: (record) => ({
              record,
              editable: editing,
              dataIndex: "Lighting",
              title: "照明",
              handleSave: this.handleSave
            })
          },
          {
            title: "空调",
            dataIndex: "AirCond",
            key: "AirCond",
            render: render0,
            editable: editing,
            onCell: (record) => ({
              record,
              editable: editing,
              dataIndex: "AirCond",
              title: "空调",
              handleSave: this.handleSave
            })
          },
          {
            title: "其他",
            dataIndex: "Other",
            key: "Other",
            render: render0,
            editable: editing,
            onCell: (record) => ({
              record,
              editable: editing,
              dataIndex: "Other",
              title: "其他",
              handleSave: this.handleSave
            })
          },
          {
            title: "合计6",
            dataIndex: "Total6",
            key: "Total6",
            render: render0,
            editable: editing,
            onCell: (record) => ({
              record,
              editable: editing,
              dataIndex: "Total6",
              title: "合计6",
              handleSave: this.handleSave
            })
          },

        ]
      },
    ]



    const components = {
      body: {
        row: EditableFormRow,
        cell: EditableCell,
      },
    }

    return (
      <>
        <LayoutCard >
          <Form layout="inline">
            <Form.Item label="统计期" style={{ textAlign: 'left' }}>
              <DatePicker
                allowClear={false}
                mode='year'
                format='YYYY'
                value={moment(this.state.date, 'YYYY')}
                onChange={this.dateChange}
                style={{ width: '100%' }}
              />
            </Form.Item>
            <Form.Item label="单位" style={{ textAlign: 'right' }}>
              <Input value={"tce"}></Input>
            </Form.Item>
          </Form>
          <Table
            id='KrEnterpriseEnergyBalancePageExport'
            size='small'
            bordered
            columns={columns}
            dataSource={data}
            pagination={false}
            components={components}
            scroll={{ x: '100%' }}
            style={{ marginTop: 8 }}
          />
        </LayoutCard>
      </>
    )
  }
}

KrEnterpriseEnergyBalancePage.propTypes = {
}

export default connect(({ login, app }) => ({ login, app }))(Form.create()(KrEnterpriseEnergyBalancePage))