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

const { Option } = Select

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

  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 })
        }
      }
    })
  }

  GetTeamSelectData = () => {
    const { login, dispatch } = this.props
    const json = initFilter(login.OrgId)
    dispatch({
      type: 'app/getDataByPost',
      url: 'EA/AdjustAccounts/GetTeamFiltertData',
      payload: json,
      onlyData: false,
      onComplete: (res) => {
        if (res && res.IsSuccessful && res.Data && res.Data) {
          const team = res.Data
          const teamSelect = team.length > 0 ? team[0].ID : ''
          this.setState({ team, teamSelect })
        }
      }
    })
  }

  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,
    })
    value.rules.push({
      field: 'Parameter4',
      operator: 0,
      value: this.state.teamSelect,
      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/GetTeamTimeData',
      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
          }
        })
      }
    })
  }

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

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

  handleTeamChange = (value) => {
    this.setState({ teamSelect: value })
  }

  render () {
    const { formId, formCode, login, dispatch } = this.props
    const { option, type, head, data, teamSelect, team, 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='EaKpiTeamTimePage_Node'>
              <KpiCascader
                onChange={this.onCascaderChange}
                OrgId={login.OrgId}
                dispatch={dispatch}
                onLoadData={() => this.handleSearch(this.state.searchRules)}
              />
            </Form.Item>,
            <Form.Item label='矿山安全类型' key='EaKpiTeamTimePage_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>,
            <Form.Item label='班组' key='EaKpiTeamTimePage_Team'>
              <Select value={teamSelect} onChange={this.handleTeamChange}>
                {team.map(item => <Option key={item.ID} value={item.ID}>{item.NAME}</Option>)}
              </Select>
            </Form.Item>
          ]}
        />
        <LayoutCard style={{ marginBottom: 16 }}>
          <CommonChart
            chartId='EaKpiTeamPage'
            {...chartData}
            style={{ height: 300 }}
          />
        </LayoutCard>
        <LayoutCard>
          <Table
            id='EaKpiTeamTimePageExport'
            size='small'
            bordered
            columns={columns}
            dataSource={data}
            pagination={false}
          />
        </LayoutCard>
      </>
    )
  }
}

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