import React from 'react';
import { Form, Button, Select } from 'antd';
import './index.less';
import Page from '@src/containers/Page';
import Block from '@src/components/Block';
import { formatFormError } from '@src/services/Tools';
import { asyncSMessage } from '@src/services/AsyncTools';
import { QuestionType } from '../../../../Constant';
import { System } from '../../../stores/system';

export default class extends Page {
  initData() {
    System.getPlace().then(result => {
      const { form } = this.props;
      form.setFieldsValue(result);
      this.setState({ load: true, data: result });
    });
  }

  submit() {
    const { form } = this.props;
    form.validateFields((err) => {
      if (!err) {
        const data = form.getFieldsValue();
        System.setPlace(data)
          .then(() => {
            this.setState(data);
            asyncSMessage('保存成功');
          }).catch((e) => {
            form.setFields(formatFormError(data, e.result));
          });
      }
    });
  }

  renderView() {
    const { getFieldDecorator } = this.props.form;
    return <Block>
      <Form>
        {QuestionType.map(row => {
          return <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label={row.label}>
            {getFieldDecorator(row.value, {
              rules: [
                { required: false, message: '请输入跳转地址' },
              ],
            })(
              <Select mode='tags' maxTagCount={200} notFoundContent={null} placeholder='输入多个考点, 逗号分隔' tokenSeparators={[',', '，']} />,
            )}
          </Form.Item>;
        })}

        <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16, offset: 5 }}>
          <Button type="primary" onClick={() => {
            this.submit();
          }}>保存</Button>
        </Form.Item>
      </Form>
    </Block>;
  }
}