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 Select from '@src/components/Select';
// import FileUpload from '@src/components/FileUpload';
import { formatFormError, getMap } from '@src/services/Tools';
import { asyncSMessage } from '@src/services/AsyncTools';
import { Ready } from '../../../stores/ready';
import { System } from '../../../stores/system';

export default class extends Page {
  init() {
    Ready.allCategory().then(result => {
      this.categoryList = result.map(row => {
        row.value = row.id;
        return row;
      });
      this.categoryMap = getMap(result, 'id', 'title');
      const select = this.categoryList.filter(row => row.parentId === 0);
      select.push({ label: '其他', value: 0 });
      this.setState({
        parentCategoryId: {
          select,
        },
      });
      this.initData();
    });
  }

  onChangeSearch(parentValue, value) {
    const { setFieldsValue } = this.props.form;
    const info = {};
    let showParentCategory = false;
    let showCategory = false;
    if (parentValue) {
      info.disabled = false;
      info.select = this.categoryList.filter(row => row.parentId === parentValue);
      info.select.push({ label: '其他', value: 0 });
      if (value === 0) {
        showCategory = true;
      } else if (!value) {
        setFieldsValue({ categoryId: null });
      }
    } else if (parentValue === 0) {
      showParentCategory = true;
      showCategory = true;
      info.disabled = true;
      info.select = [];
      setFieldsValue({ categoryId: null });
    } else {
      info.disabled = true;
      info.select = [];
    }
    this.setState({
      showParentCategory,
      showCategory,
      categoryId: info,
    });
  }

  initData() {
    if (!this.categoryList) return;
    const { id } = this.params;
    const { form } = this.props;
    let handler;
    if (id) {
      handler = Ready.getArticle({ id });
    } else {
      handler = Promise.resolve({});
    }

    handler
      .then(result => {
        form.setFieldsValue(result);
        this.onChangeSearch(result.parentCategoryId, result.categoryId);
      });
  }

  submit() {
    const { form } = this.props;
    form.validateFields((err) => {
      if (!err) {
        const data = form.getFieldsValue();
        let handler;
        if (data.id) {
          handler = Ready.editArticle(data);
        } else {
          handler = Ready.addArticle(data);
        }
        handler.then(() => {
          asyncSMessage('保存成功');
          goBack();
        }).catch((e) => {
          if (e.result) form.setFields(formatFormError(data, e.result));
        });
      }
    });
  }

  renderBase() {
    const { getFieldDecorator, getFieldValue } = this.props.form;
    return <Block>
      <Form>
        {getFieldDecorator('id')(<input hidden />)}
        <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='一级标题'>
          {getFieldDecorator('parentCategoryId', {
            rules: [
              { required: !this.state.showParentCategory, message: '请选择标题' },
            ],
          })(
            <Select {...this.state.parentCategoryId} placeholder='请选择标题' onChange={(value) => {
              this.onChangeSearch(value, null);
            }} />,
          )}
          {this.state.showParentCategory && getFieldDecorator('parentCategory', {
            rules: [
              { required: true, message: '请输入标题' },
            ],
          })(
            <Input placeholder='请输入标题' />,
          )}
        </Form.Item>
        <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='二级标题'>
          {getFieldDecorator('categoryId', {
            rules: [
              { required: !this.state.showCategory, message: '请选择标题' },
            ],
          })(
            <Select {...this.state.categoryId} placeholder='请选择标题' onChange={(value) => {
              this.onChangeSearch(getFieldValue('parentCategoryId'), value);
            }} />,
          )}
          {this.state.showCategory && getFieldDecorator('category', {
            rules: [
              { required: true, message: '请输入标题' },
            ],
          })(
            <Input placeholder='请输入标题' />,
          )}
        </Form.Item>
        <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='文章标题'>
          {getFieldDecorator('title', {
            rules: [
              { required: true, message: '请输入标题' },
            ],
          })(
            <Input placeholder='请输入标题' />,
          )}
        </Form.Item>
        <Form.Item label='正文'>
          {getFieldDecorator('content', {
          })(
            <Editor placeholder='请输入内容' onUpload={(file) => System.uploadImage(file)} />,
          )}
        </Form.Item>
      </Form>
    </Block>;
  }

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