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

const { GradientCard } = LayoutCard

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

  handleSearch = (value) => {
    value.rules.push({
      field: "Keyword",
      operator: 0,
      value: this.props.data.id,
      isCustom: true,
      isSysParam: false,
    })
    value.rules.push({
      field: 'Parameter1',
      operator: 0,
      value: this.props.formParam.Parameter1,
      isCustom: true,
      isSysParam: false,
    })
    this.setState({
      searchRules: value
    }, () => {
      this.getAmortizeData(value)
    })
  }
  getAmortizeData = (value) => {
    const json = initFilter(this.props.login.OrgId)
    addRuleAndGroups(json, value)
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: 'EA/AdjustAccounts/GetAmortizeData',
      payload: json,
      onlyData: false,
      onComplete: (re) => {
        if (re && re.IsSuccessful && re.Data && re.Data.data) {
          const { data, statisticalDatas } = re.Data
          const currState = {
            data,
            statisticalDatas
          }
          this.setState(currState)
        }
      }
    })
  }

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

  showModal = () => {
    this.modalChild.showModal(this.props.data.id)
  }


  render () {
    const { data, statisticalDatas } = this.state
    const { formId, formCode, formParam, login, dispatch } = this.props
    const columns = [
      { title: '节点名称', dataIndex: 'NodeName' },
      { title: '器具名称', dataIndex: 'Name' },
      { title: '接入量', dataIndex: 'Value' },
      { title: '损耗量', dataIndex: 'Loss' },
      { title: '摊销结果', dataIndex: 'Amortize' },
      { title: '摊销比例（%）', dataIndex: 'Ratio' },
      { title: '成本摊销（元）', dataIndex: 'Price' }
    ]
    return (
      <>
        <Search
          formId={formId}
          formCode={formCode}
          onSearch={this.handleSearch}
          iconEle={
            <span
              style={{ cursor: 'pointer', marginRight: 8 }}
              onClick={this.showModal}>
              <Icon type="setting" />
              <span>配置</span>
            </span>
          }
        />
        <Row gutter={16} style={{ marginBottom: '0.15rem' }}>
          {
            statisticalDatas.map((item, index) => {
              return (
                <Col span={6} style={{ width: `${100 / statisticalDatas.length}%` }}>
                  <GradientCard
                    key={'GradientCard_EMUsePage2_' + index}
                    title={item.Name}
                    colorIndex={index}
                    style={{ borderRadius: '4px' }}>
                    <span style={{ fontSize: 20, lineHeight: 1 }}>
                      {`${item.Value}${item.Unit ? ' ' + item.Unit : ''}`}
                    </span>
                    <br />
                    {
                      item.Value2 ? <span>{item.Value2}</span> :
                        <span style={{ opacity: 0 }}>{'占位'}</span>
                    }
                  </GradientCard>
                </Col>
              )
            })
          }
        </Row>
        <LayoutCard>
          <Table
            id='EaEnergyAmortizePageExport'
            size='small'
            columns={columns}
            dataSource={data}
            style={{ marginTop: 8 }}
          />
        </LayoutCard>
        <AmortizeSettingModal
          onRef={this.onModalRef}
          login={login}
          formParam={formParam}
          dispatch={dispatch} />
      </>
    )
  }
}

EaEnergyAmortizePage.propTypes = {
}

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