import React from 'react'
import { connect } from 'dva'
import { Modal, Form, message, Radio, Table, InputNumber } from 'antd'

class AmortizeSettingModal extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      visible: false,
      loading: false,
      nodeid: '',
      isManual: false,
      data: []
    }
  }

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

  showModal = (value) => {
    this.setState({
      nodeid: value,
      visible: true
    }, () => {
      this.loadModalData()
    })
  }

  handleCancel = e => {
    this.setState({
      visible: false,
    })
  }
  handleOk = e => {
    this.SettingSave();
  };

  onChange = e => {
    this.setState({
      isManual: e.target.value,
    });
  };

  valChange = (value, row, index) => {
    row.RATIO = value;
    const newData = [...this.state.data]
    const item = newData[index]
    newData.splice(index, 1, {
      ...item,
      ...row
    })
    this.setState({ data: newData })
  }

  loadModalData = () => {
    const json = {
      OrgId: this.props.login.OrgId,
      Keyword: this.state.nodeid,
    };
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: 'EA/AdjustAccounts/LoadModalData',
      payload: json,
      onlyData: false,
      onComplete: (re) => {
        if (re && re.IsSuccessful && re.Data && re.Data.data) {
          const { data, isManual } = re.Data
          const currState = {
            data, isManual
          }
          this.setState(currState)
        }
      }
    })
  }

  SettingSave = () => {
    const { isManual, nodeid, data } = this.state
    const json = {
      IsManual: isManual,
      NodeId: nodeid,
      Data: data
    };
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: 'EA/AdjustAccounts/AmortizeSettingSave',
      payload: json,
      onlyData: false,
      onComplete: (re) => {
        if (re && re.IsSuccessful && re.Data) {
          if (re.Data.IsSucceed) {
            message.success(re.Data.Msg);
            this.setState({
              visible: false,
            })
          }
          else
            message.error(re.Data.Msg);
        }
      }
    })
  };

  render() {
    const { data, isManual } = this.state

    const render = (value, row, index) => {
      return <InputNumber
        value={value}
        min={0}
        max={100}
        formatter={v => `${v}%`}
        parser={v => v.replace('%', '')}
        onChange={v => this.valChange(v, row, index)}
      />
    }

    const columns = [
      { title: '节点名称', dataIndex: 'Name' },
      { title: '分摊比例（%）', dataIndex: 'RATIO', render },
    ]
    return (
      <Modal title="摊销比例配置" visible={this.state.visible} onOk={this.handleOk} onCancel={this.handleCancel}>
        <Radio.Group onChange={this.onChange} value={isManual}>
          <Radio value={false}>自动</Radio>
          <Radio value={true}>手动</Radio>
        </Radio.Group>
        {
          isManual ? <Table
            size='small'
            columns={columns}
            dataSource={data}
            pagination={false}
            style={{ marginTop: 8 }}
          /> : ''
        }
      </Modal>

    )
  }
}
export default connect(({ app, editPage, loading, login }) => ({ app, editPage, loading, login }))(Form.create()(AmortizeSettingModal))