import React from 'react'
import { connect } from 'dva'
import { Modal, InputNumber, Table, message, Select } from 'antd'
import { LayoutCard, IFComponent } from '@woowalker/feui'

const { Option } = Select;

class EnergyKpiModal extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      visible: false,
      columnsRatio: [
        { title: '打分项', dataIndex: 'NAME' },
        { title: '最大分值', dataIndex: 'MaxScore' },
        {
          title: '权重',
          dataIndex: 'RATIO',
          render: (text, record, index) => {
            return (
              <InputNumber
                value={text}
                min={0}
                max={100}
                formatter={val => `${val}%`}
                parser={val => val.replace('%', '')}
                onChange={val => this.handleChange(val, record, index, 'itemRatio')}
              />
            )
          }
        },
        {
          title: '计算方式',
          render: (text, record, index) => {
            if (record.CalculateWays && record.CalculateWays.length > 0)
              return (
                <Select value={record.CALCULATE_WAY} style={{ width: 120 }} onChange={val => this.calWayChange(val, record, index)}>
                  {
                    record.CalculateWays.map((item, index) => {
                      return (
                        <Option value={+item.Value}>{item.Text}</Option>
                      )
                    })
                  }
                </Select>
              )
          }
        }
      ],
      itemRatio: [],
      columnsPeak: [
        { title: '峰谷类型', dataIndex: 'NAME' },
        {
          title: '权重',
          dataIndex: 'RATIO',
          render: (text, record, index) => {
            return (
              <InputNumber
                value={text}
                min={0}
                max={100}
                formatter={val => `${val}%`}
                parser={val => val.replace('%', '')}
                onChange={val => this.handleChange(val, record, index, 'peakValleyRatio')}
              />
            )
          }
        }
      ],
      peakValleyRatio: [],
      calType: 0
    }
  }

  componentDidMount() {
    if (this.props.onRef) {
      this.props.onRef(this)
    }
  }

  showModal = (id) => {
    this.setState({
      visible: true
    }, () => {
      const json = {
        OrgId: this.props.login.OrgId,
        Keyword: id
      }
      this.props.dispatch({
        type: 'app/getDataByPost',
        url: 'ED/Calculate/GetSettingData',
        payload: json
      }).then((res) => {
        if (res) {
          const { itemRatio, peakValleyRatio, calType } = res
          this.setState({ itemRatio, peakValleyRatio, calType })
        }
      })
    })
  }

  handleOk = () => {
    const { itemRatio, peakValleyRatio, calType } = this.state
    const json = {
      OrgId: this.props.login.OrgId,
      ItemRatio: itemRatio,
      PeakValleyRatio: peakValleyRatio,
      CalType: calType
    }
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: 'ED/Calculate/ItemRatioSettingSave',
      payload: json
    }).then(res => {
      if (res) {
        if (res.IsSucceed) {
          message.success(res.Msg)
          this.setState({ visible: false })
        } else {
          message.error(res.Msg)
        }
      }
    })
  }

  handleCancel = () => {
    this.setState({ visible: false })
  }

  handleChange = (text, record, index, type) => {
    record.RATIO = text
    const newData = [...this.state[type]]
    const item = newData[index]
    newData.splice(index, 1, {
      ...item,
      ...record
    })
    this.setState({ [type]: newData })
  }

  calWayChange = (val, record, index) => {
    const { itemRatio } = this.state
    itemRatio[index].CALCULATE_WAY = val
    this.setState({ itemRatio })
  }

  calTypeChange = (value) => {
    this.setState({ calType: value })
  }

  render() {
    const { columnsRatio, itemRatio, columnsPeak, peakValleyRatio, calType } = this.state
    const { loading } = this.props
    return (
      <Modal
        title="权重配置"
        visible={this.state.visible}
        onOk={this.handleOk}
        onCancel={this.handleCancel}
      >
        <LayoutCard>
          <span>单耗方式：</span>
          <Select value={calType} style={{ width: 120 }} onChange={this.calTypeChange}>
            <Option value={0}>按产量</Option>
            <Option value={1}>按时间</Option>
          </Select>
        </LayoutCard>
        <LayoutCard title='打分项权重'>
          <Table
            loading={loading.effects['app/getDataByPost']}
            size='small'
            columns={columnsRatio}
            dataSource={itemRatio}
            pagination={false}
            style={{ marginTop: 8 }}
          />
        </LayoutCard>
        <IFComponent IF={!!(peakValleyRatio && peakValleyRatio.length > 0)}>
          <LayoutCard title='峰谷利用率权重'>
            <Table
              loading={loading.effects['app/getDataByPost']}
              size='small'
              columns={columnsPeak}
              dataSource={peakValleyRatio}
              pagination={false}
              style={{ marginTop: 8 }}
            />
          </LayoutCard>
        </IFComponent>
      </Modal>
    )
  }
}
export default connect(({ login, loading }) => ({ login, loading }))(EnergyKpiModal)