// 核心库
import React from 'react'
import { connect } from 'dva'
// 组件库
import { Icon, Row, Col } from 'antd'
import { Scrollbars } from 'react-custom-scrollbars'
import { LocalSearch, FullDatePicker, LayoutCard } from '@woowalker/feui'
import EnergySystemSettingModal from './EnergySystemSettingModal'
import ChartPage from '../../../components/Chart/index'
// 工具库
import moment from 'moment'
import { guid } from '../../../utils/common'
// 样式
import styles from './index.css'

class KrEnergySystemPage extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      dateType: '0',
      dateString: moment().format('YYYY'),
      production: [],
      nonproductive: [],
      key: guid()
    }
  }

  handleSearch = () => {
    const { login, dispatch } = this.props
    const { dateType, dateString } = this.state
    const json = {
      OrgId: login.OrgId,
      Parameter1: dateType,
      Parameter2: dateString
    }

    dispatch({
      type: 'app/getDataByPost',
      url: 'KR/Statistics/GetEnergySystemData',
      payload: json,
      onComplete: (res) => {
        if (res && res.production) {
          const { production = [], nonproductive = [] } = res
          this.setState({
            production,
            nonproductive
          })
        }
      }
    })
  }

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

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

  loadData = () => {
    this.setState({
      key: guid()
    }, this.handleSearch)
  }

  render () {
    const { formParam, login, dispatch, } = this.props
    const { production, nonproductive, key } = this.state
    return (
      <>
        <LocalSearch
          onSearch={this.handleSearch}
          iconEle={
            <div
              style={{ cursor: 'pointer' }}
              onClick={this.showModal}
            >
              <Icon type='setting' /> 配置
            </div>
          }
        >
          <FullDatePicker
            dateType={this.state.dateType}
            dateString={this.state.dateString}
            onlyItem
            onChange={({ dateString, dateType }) => this.setState({ dateString, dateType })}
          />
        </LocalSearch>
        <Row gutter={16} style={{ height: 'calc(100% - 88px)' }}>
          <Col span={14} className='full_height'>
            <LayoutCard title='企业矿山安全系统图' className='full_height'>
              <ChartPage key={key} formCode='KR028' />
            </LayoutCard>
          </Col>
          <Col span={10} className='full_height'>
            <LayoutCard title='生产综合能耗' titleClassName={styles.kesLayoutTitle} style={{ height: 'calc(50% - 16px)', marginBottom: 16 }}>
              <div className={styles.kesScrollV}>
                <Scrollbars autoHide autoHideTimeout={1000} autoHideDuration={200}>
                  {
                    production.map(item => {
                      return (
                        <div key={item.Name}>
                          <p className={styles.kesTitle}>{item.Name}</p>
                          <div className={styles.kesZone}>
                            <Scrollbars autoHide autoHideTimeout={1000} autoHideDuration={200}>
                              {
                                (item.Items || []).map(Item => {
                                  return (
                                    <div key={Item.Name + Item.Unit} className={styles.kesSection}>
                                      <span>{Item.Name + '(' + Item.Unit + ')'}</span>
                                      <h2>{Item.Value}</h2>
                                    </div>
                                  )
                                })
                              }
                            </Scrollbars>
                          </div>
                        </div>
                      )
                    })
                  }
                </Scrollbars>
              </div>
            </LayoutCard>
            <LayoutCard title='用途综合能耗' titleClassName={styles.kesLayoutTitle} style={{ height: '50%' }}>
              <div className={styles.kesScrollV}>
                <Scrollbars autoHide autoHideTimeout={1000} autoHideDuration={200}>
                  {
                    nonproductive.map((item, index) => {
                      return (
                        <div key={item.Name}>
                          <p className={styles.kesTitle}>{item.Name}</p>
                          <div className={styles.kesZone}>
                            <Scrollbars autoHide autoHideTimeout={1000} autoHideDuration={200}>
                              {
                                (item.Items || []).map(Item => {
                                  return (
                                    <div key={Item.Name + Item.Unit} className={styles.kesSection}>
                                      <span>{Item.Name + '(' + Item.Unit + ')'}</span>
                                      <h2>{Item.Value}</h2>
                                    </div>
                                  )
                                })
                              }
                            </Scrollbars>
                          </div>
                        </div>
                      )
                    })
                  }
                </Scrollbars>
              </div>
            </LayoutCard>
          </Col>
        </Row>
        <EnergySystemSettingModal
          onRef={this.onModalRef}
          onLoadData={this.loadData}
          login={login}
          formParam={formParam}
          dispatch={dispatch}
        />
      </>
    )
  }
}

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