import React, { Component } from 'react';
import { Form, Modal, Alert } from 'antd';
import './index.less';
import Select from '@src/components/Select';
import QuestionNoList from '../QuestionNoList';

class Association extends Component {
  constructor(props) {
    super(props);
    this.state = { ids: this.props.ids, nos: this.props.nos, show: !!props.modal, loading: false, err: '' };
    this.questionNos = [];
  }

  onConfirm() {
    this.props.form.validateFields((err, fieldsValue) => {
      if (err) {
        return;
      }
      if (this.props.onConfirm && this.props.modal) {
        this.setState({ loading: true });
        this.props
          .onConfirm(fieldsValue)
          .then(() => {
            this.setState({ loading: false });
            this.onCancel();
          })
          .catch(e => {
            this.setState({ loading: false, err: e.message });
          });
      } else {
        this.onCancel();
      }
    });
  }

  onCancel() {
    if (this.props.modal) this.setState({ show: false });
    if (this.props.onCancel) this.props.onCancel();
  }

  renderForm() {
    const { getFieldDecorator, setFieldsValue } = this.props.form;
    const { field = 'questionNoIds' } = this.props;
    return <Form>
      <Form.Item>
        {getFieldDecorator(field)(
          <Select mode='tags' maxTagCount={200} notFoundContent={null} placeholder='输入题目id, 逗号分隔' tokenSeparators={[',', '，']} onChange={(values) => {
            this.setState({ nos: values });
          }} />,
        )}
      </Form.Item>
      <QuestionNoList module={this.props.module} loading={false} ids={this.state.ids} nos={this.state.nos} onChange={(questionNos) => {
        this.questionNos = questionNos;
        getFieldDecorator(field);
        const nos = questionNos.map(row => row.no);
        setFieldsValue({ [field]: nos });
      }} />
    </Form>;
  }

  render() {
    const { modal, title, confirmText = '确定', cancelText = '取消' } = this.props;
    const { show, loading, err } = this.state;
    return modal ? (
      <Modal
        title={title}
        visible={show}
        okText={confirmText}
        cancelText={cancelText}
        confirmLoading={loading}
        onOk={() => this.onConfirm()}
        onCancel={() => this.onCancel()}
      >
        {err && <Alert type="error" showIcon message={err} closable onClose={() => this.setState({ err: '' })} />}
        {this.renderForm()}
      </Modal>
    ) : (<div>{this.renderForm()}</div>);
  }
}
export default Form.create()(Association);