import React from 'react';
import { Tabs, Form, Row, Col, Input, InputNumber, Button } from 'antd';
import './index.less';
import Editor from '@src/components/Editor';
import Page from '@src/containers/Page';
import Block from '@src/components/Block';
import { flattenObject, formatFormError } from '@src/services/Tools';
import { asyncSMessage } from '@src/services/AsyncTools';
import { System } from '../../../stores/system';

export default class extends Page {
  constructor(props) {
    super(props);
    this.state.tab = 'sentence';
  }

  initData() {
    this.refresh(this.state.tab);
  }

  refresh(tab) {
    if (tab === 'sentence') {
      return this.refreshSentence();
    }
    if (tab === 'prepare') {
      return this.refreshPrepare();
    }
    return Promise.reject();
  }

  refreshSentence() {
    return System.getSentenceInfo().then(result => {
      this.setState({ sentence: result || {} });
      const { form } = this.props;
      form.setFieldsValue(flattenObject(result, 'sentence'));
    });
  }

  refreshPrepare() {
    return System.getPrepareInfo().then(result => {
      this.setState({ prepare: result || {} });
      const { form } = this.props;
      form.setFieldsValue(flattenObject(result, 'prepare'));
    });
  }

  changeMapValue(field, second, index, key, value) {
    const data = this.state[field] || {};
    data[second] = data[second] || [];
    data[second][index] = data[second][index] || {};
    data[second][index][key] = value;
    this.setState({ [field]: data });
  }

  changeValue(field, key, value) {
    const { data } = this.state;
    data[field] = data[field] || {};
    data[field][key] = value;
    this.setState({ data });
  }

  submit(tab) {
    let handler = Promise.reject();
    if (tab === 'sentence') {
      handler = this.submitSentence();
    }
    if (tab === 'prepare') {
      handler = this.submitPrepare();
    }
    handler.then(() => {
      asyncSMessage('保存成功');
    });
  }

  submitSentence() {
    const { form } = this.props;
    return new Promise((resolve, reject) => {
      form.validateFields(['sentence'], (err, values) => {
        if (err) {
          reject(err);
        }
        const data = values.sentence;
        return System.setSentenceInfo(data)
          .then(() => {
            resolve();
          }).catch((e) => {
            form.setFields(formatFormError(data, e.result));
            reject(e);
          });
      });
    });
  }

  submitPrepare() {
    const { form } = this.props;
    return new Promise((resolve, reject) => {
      form.validateFields(['prepare'], (err, values) => {
        if (err) {
          reject(err);
        }
        const data = values.prepare;
        return System.setPrepareInfo(data)
          .then(() => {
            resolve();
          }).catch((e) => {
            form.setFields(formatFormError(data, e.result));
            reject(e);
          });
      });
    });
  }

  renderSentence() {
    const { getFieldDecorator } = this.props.form;
    return <Form>
      <Row>
        <Form.Item labelCol={{ span: 4 }} wrapperCol={{ span: 16 }} label='购买链接'>
          {getFieldDecorator('sentence.link', {
            rules: [
              { required: true, message: '输入购买链接' },
            ],
          })(
            <Input placeholder='请输入购买链接' onChange={(e) => {
              this.changeValue('sentence', 'link', e.target.value);
            }} style={{ width: '200px' }} />,
          )}
        </Form.Item>
        <Form.Item labelCol={{ span: 4 }} wrapperCol={{ span: 16 }} label='购买价格'>
          {getFieldDecorator('sentence.price', {
            rules: [
              { required: true, message: '输入购买价格' },
            ],
          })(
            <InputNumber placeholder='请输入购买价格' onChange={(value) => {
              this.changeValue('sentence', 'price', value);
            }} style={{ width: '200px' }} />,
          )}
        </Form.Item>
        <Form.Item label='Code说明'>
          {getFieldDecorator('sentence.detail', {
          })(
            <Editor placeholder='请输入内容' onUpload={(file) => System.uploadImage(file)} />,
          )}
        </Form.Item>
      </Row>
    </Form>;
  }

  renderPrepare() {
    const { getFieldDecorator } = this.props.form;
    return <Form>
      <Row>
        <Form.Item labelCol={{ span: 4 }} wrapperCol={{ span: 16 }} label='访问链接'>
          {getFieldDecorator('prepare.link', {
            rules: [
              { required: true, message: '输入访问链接' },
            ],
          })(
            <Input placeholder='请输入访问链接' onChange={(e) => {
              this.changeValue('prepare', 'link', e.target.value);
            }} style={{ width: '200px' }} />,
          )}
        </Form.Item>
        <Form.Item labelCol={{ span: 4 }} wrapperCol={{ span: 16 }} label='访问标题'>
          {getFieldDecorator('prepare.title', {
            rules: [
              { required: true, message: '输入访问标题' },
            ],
          })(
            <Input placeholder='请输入访问标题' onChange={(value) => {
              this.changeValue('prepare', 'title', value);
            }} style={{ width: '200px' }} />,
          )}
        </Form.Item>
      </Row>
    </Form>;
  }

  renderView() {
    const { tab } = this.state;
    return <Block><Tabs activeKey={tab} onChange={(value) => {
      this.setState({ tab: value, selectedKeys: [], checkedKeys: [] });
      this.refresh(value);
    }}>
      <Tabs.TabPane tab="长难句购买" key="sentence">
        {this.renderSentence()}
      </Tabs.TabPane>
      <Tabs.TabPane tab="备考时间" key="prepare">
        {this.renderPrepare()}
      </Tabs.TabPane>
    </Tabs>
      <Row type="flex" justify="center">
        <Col>
          <Button type="primary" onClick={() => {
            this.submit(tab);
          }}>保存</Button>
        </Col>
      </Row>
    </Block>;
  }
}