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

class EDEnergyForeCastPage extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      head: [],
      data: []
    }
  }

  onModalRef = (ref) => {
    this.modalChild = ref
  }

  showModal = () => {
    this.modalChild.showModal()
  }

  handleSearch = (value) => {
    let rule = {
      field: 'Parameter3',
      operator: 0,
      value: this.props.data.way,
      isCustom: true,
      isSysParam: false,
    }
    value.rules.push(rule)
    this.getTableData(value)
  }

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

    dispatch({
      type: 'app/getDataByPost',
      url: 'ED/EDThresholdSet/getTableData',
      payload: json,
      onlyData: false,
      onComplete: (res) => {
        if (res && res.IsSuccessful && res.Data) {
          const currState = {
            head: res.Data.head,
            data: res.Data.data
          }
          this.setState(currState)
        }
      }
    })
  };

  render () {
    const { formId, formCode, formParam, login, dispatch } = this.props
    const render = (value, row, index) => {
      const obj = {
        children: <p style={{ width: 80, display: 'inline-block' }}>{value}</p>,
        props: {},
      }
      obj.props.rowSpan = row.rowSpan
      return obj
    }

    const columns = []
    this.state.head.forEach((n, i) => {
      var item = {
        title: n.Title, dataIndex: n.DataIndex, render: i == 0 ? render : (value, row, index) => {
          if (index % 4 === 3) {
            if (row.red.indexOf(n.DataIndex) != -1)
              return <p style={{ color: 'red', width: 80, display: 'inline-block' }}>{value}</p>
            if (row.green.indexOf(n.DataIndex) != -1)
              return <p style={{ color: '#04F91D', width: 80, display: 'inline-block' }}>{value}</p>
          }
          return value
        }
      }
      columns.push(item)
    })
    return (
      <>
        <Search
          formId={formId}
          formCode={formCode}
          onSearch={(value) => this.handleSearch(value, 'ser001')}
          iconEle={
            <div
              style={{ cursor: 'pointer' }}
              onClick={this.showModal}>
              <Icon type="setting" /> 配置
                        </div>
          }
        />
        <LayoutCard style={{ marginBottom: '0.2rem' }}>
          <Table size='small' scroll={{ x: true }} columns={columns} dataSource={this.state.data} pagination={false} bordered />
        </LayoutCard>
        <ThresholdSettingModal
          onRef={this.onModalRef}
          login={login}
          formParam={formParam}
          dispatch={dispatch}
          way={this.props.data.way} />
      </>
    )
  }

}


export default connect(({ login, loading, EMemOrder, custom, app }) => ({ login, loading, EMemOrder, custom, app }))(Form.create()(EDEnergyForeCastPage))
