// 核心库
import React from 'react'
import { connect } from 'dva'
// 组件库
import { Form, Icon, Table, Button } from 'antd'
import { ExportToExcel, FullDatePicker, LayoutCard } from '@woowalker/feui'
import EnergyClassDosageModel from './EnergyClassDosageModel'
// 工具库
import { addRuleAndGroups } from '../../../utils/common'
import moment from 'moment'

class EmEnergyClassDosagePage extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      head: [],
      dataSource: [],
      dateType: '0',
      dateString: moment().format('YYYY'),
    }
  }

  componentDidMount () {
    this.getTableData()
  }

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

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

  handleSearch = () => {
    this.getTableData()
  }

  getTableData = (value) => {
    const json = {
      OrgId: this.props.login.OrgId,
      Parameter3: this.state.dateType,
      Parameter4: this.state.dateString,
    }
    addRuleAndGroups(json, value)
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: 'EM/EMEnergyDosage/GetEnergyClassDosageData',
      payload: json,
      onlyData: false,
      onComplete: (res) => {
        if (res && res.IsSuccessful && res.Data && res.Data.tableHead && res.Data.tableData) {
          const { tableHead, tableData } = res.Data
          this.setState({
            head: tableHead,
            dataSource: tableData
          })
        }
      }
    })
  };

  render () {
    const paginationConfig = {
      pageSizeOptions: ['12', '24', '36'],
      pageSize: 12,
      total: this.state.dataSource.length,
      showSizeChanger: true,
      size: 'small',
      showTotal: () => `共 ${this.state.dataSource.length} 条`
    }
    const columns = []
    this.state.head.forEach((n, i) => {
      var item = {
        title: n.Title,
        dataIndex: n.DataIndex
      }
      columns.push(item)
    })
    const { dispatch, login } = this.props
    const exportInserTitle = this.state.dateType === '0' ? '年' : this.state.dateType === '1' ? '月' : '日'
    return (
      <>
        <LayoutCard style={{ marginBottom: '0.15rem' }}>
          <div className='advanced-search__form'>
            <Form>
              <FullDatePicker
                dateType={this.state.dateType}
                dateString={this.state.dateString}
                onlyItem
                onChange={({ dateString, dateType }) => this.setState({ dateString, dateType })}
              />
              <div className='advanced-search__btns-zone'>
                <Button type='primary' onClick={this.handleSearch}>查询</Button>
                <span
                  style={{ cursor: "pointer" }}
                  onClick={this.showModal}>
                  <Icon type='setting' /> 配置
                </span>
              </div>
            </Form>
          </div>
        </LayoutCard>
        <LayoutCard style={{ textAlign: 'right' }}>
          <ExportToExcel
            fileName='矿山安全用量表'
            columns={columns}
            dataSource={this.state.dataSource}
            insertRows={[`矿山安全用量表 ${this.state.dateString + exportInserTitle}`]}
          />
          <Table
            bordered
            size="small"
            columns={columns}
            dataSource={this.state.dataSource}
            scroll={{ x: '100%' }}
            pagination={paginationConfig}
            style={{ marginTop: 8 }}
          />
        </LayoutCard>
        <EnergyClassDosageModel
          onRef={this.onModalRef}
          getTableData={this.getTableData}
          login={login}
          dispatch={dispatch}
        />
      </>
    )
  }
}

EmEnergyClassDosagePage.propTypes = {
}

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