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

const { Option } = Select

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

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

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

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

  onCascaderChange = (value) => {
    this.setState({ parameter2: value })
  }

  handleSearch = (value) => {
    value.rules.push({
      field: 'Parameter2',
      operator: 0,
      value: this.state.parameter2,
      isCustom: true,
      isSysParam: false,
    })
    value.rules.push({
      field: 'Parameter3',
      operator: 0,
      value: this.state.type,
      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/GetTeamData',
      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 })
  }

  render () {
    const { formParam, formId, formCode, login, dispatch } = this.props
    const { option, type, head, data, 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='节点' key='EaKpiTeamPage_Node'>
              <KpiCascader
                onChange={this.onCascaderChange}
                OrgId={login.OrgId}
                dispatch={dispatch}
                onLoadData={() => this.handleSearch(this.state.searchRules)}
              />
            </Form.Item>,
            <Form.Item label='矿山安全类型' key='EaKpiTeamPage_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>
          ]}
          iconEle={
            <div
              style={{ cursor: 'pointer', backgroundColor: '#16A8ED', padding: '3px 6px', borderRadius: '4px' }}
              onClick={this.showModal}
            >
              {/* <EnergyIcon type="icon-peizhi1" style={{ fontSize: '20px', color: '#fff' }} /> */}
              <Icon type="setting" style={{ fontSize: '20px', color: '#fff' }}></Icon>
            </div>
          }
        />
        <LayoutCard style={{ marginBottom: 16 }}>
          <CommonChart
            chartId='EaKpiTeamPage'
            {...chartData}
            style={{ height: 300 }}
          />
        </LayoutCard>
        <LayoutCard>
          <Table
            id='EaKpiTeamPageExport'
            size='small'
            bordered
            columns={columns}
            dataSource={data}
            pagination={false}
          />
        </LayoutCard>
        <TransferModal
          onRef={this.onModalRef}
          onLoadData={() => this.handleSearch(this.state.searchRules)}
          login={login}
          formParam={formParam}
          dispatch={dispatch}
        />
      </>
    )
  }
}

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