import React from 'react';
import { Form, Input, Button, Row, Col } from 'antd';
import './index.less';
import Editor from '@src/components/Editor';
import Page from '@src/containers/Page';
import Block from '@src/components/Block';
// import FileUpload from '@src/components/FileUpload';
import { formatFormError, getMap } from '@src/services/Tools';
import { asyncSMessage } from '@src/services/AsyncTools';
// import {  } from '../../../../Constant';
// import { User } from '../../../stores/user';
import { System } from '../../../stores/system';
import { MessageCategory } from '../../../../Constant';

const MessageCategoryMap = getMap(MessageCategory, 'value', 'label');
const MessageCategoryParamsMap = getMap(MessageCategory, 'value', 'params');

export default class extends Page {
  initData() {
    const { id } = this.params;
    const { form } = this.props;
    let handler;
    if (id) {
      handler = System.getMessage({ id });
    } else {
      handler = Promise.resolve({ messageMethod: 'inside', messageCategory: 'custom' });
    }

    handler
      .then(result => {
        form.setFieldsValue(result);
        this.setState({ data: result });
      });
  }

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

  renderBase() {
    const { getFieldDecorator } = this.props.form;
    const { data } = this.state;
    return <Block>
      <h1>{data.messageMethod === 'email' && '邮件模版'}{data.messageMethod === 'inside' && '站内信模版'}</h1>
      <Form>
        {getFieldDecorator('id')(<input hidden />)}
        <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='触发场景'>
          {MessageCategoryMap[data.messageCategory] || ''}
        </Form.Item>
        <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='消息标题'>
          {getFieldDecorator('title', {
            rules: [
              { required: true, message: '请输入名称' },
            ],
          })(
            <Input placeholder='请输入名称' />,
          )}
        </Form.Item>
        {data.messageMethod === 'inside' && <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='跳转链接'>
          {getFieldDecorator('link', {
            rules: [
              { required: true, message: '请输入链接' },
            ],
          })(
            <Input placeholder='请输入链接' />,
          )}
        </Form.Item>}
      </Form>
    </Block>;
  }

  renderContent() {
    const { getFieldDecorator } = this.props.form;
    const { data } = this.state;
    return <Block>
      <Form>
        <Form.Item label='正文'>
          可插入自定义字段：{(MessageCategoryParamsMap[data.messageCategory] || []).map(row => `{${row}}`).join(', ')}
          {getFieldDecorator('content', {
          })(
            <Editor placeholder='输入内容' />,
          )}
        </Form.Item>
      </Form>
    </Block>;
  }

  renderView() {
    return <div flex>
      {this.renderBase()}
      {this.renderContent()}
      <Row type="flex" justify="center">
        <Col>
          <Button type="primary" onClick={() => {
            this.submit();
          }}>保存</Button>
        </Col>
      </Row>
    </div>;
  }
}