import React from 'react';
import { Form, Input, Row, Col, Button, Icon, Checkbox } from 'antd';
import './index.less';
// import DragList from '@src/components/DragList';
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 FilterLayout from '@src/layouts/FilterLayout';
// import FileUpload from '@src/components/FileUpload';
import { formatFormError, formatDate, bindSearch } from '@src/services/Tools';
import { asyncSMessage } from '@src/services/AsyncTools';
import { TextbookSubject, TextbookType, TextbookQuality } from '../../../../Constant';
import { Textbook } from '../../../stores/textbook';

export default class extends Page {
  init() {
    this.filterForm = [{
      key: 'textbookSubject',
      type: 'select',
      name: '单项',
      select: TextbookSubject,
      allowClear: true,
    }, {
      key: 'libraryId',
      type: 'select',
      name: '换库表',
      select: [],
      number: true,
      allowClear: true,
    }];

    bindSearch(this.filterForm, 'libraryId', this, (search) => {
      return Textbook.listLibrary(search);
    }, (row) => {
      return {
        title: `${formatDate(row.startDate, 'YYYY-MM-DD')}-${row.endDate ? `${formatDate(row.endDate, 'YYYY-MM-DD')}` : '至今'}`,
        value: row.id,
      };
    }, this.state.search.libraryId ? Number(this.state.search.libraryId) : null, null);
  }

  initData() {
    const { id } = this.params;
    const { form } = this.props;
    if (id) {
      Textbook.getTopic({ id })
        .then(result => {
          form.setFieldsValue({ 'topic[0]': result });
          this.setState({ data: result });
        });
    } else {
      this.refreshLibrary();
    }
  }

  refreshLibrary() {
    const { libraryId, textbookSubject } = this.state.search;
    Textbook.getNextTopic({ libraryId, textbookSubject }).then(result => {
      this.setState({ no: result });
      this.addTopic();
    });
  }

  removeTopic(k) {
    const { form } = this.props;
    const keys = form.getFieldValue('keys');
    if (keys.length === 1) {
      return;
    }
    form.setFieldsValue({
      keys: keys.filter(key => key !== k),
    });
  }

  addTopic() {
    const { form } = this.props;
    const keys = form.getFieldValue('keys') || [];
    if (!this.uuid) {
      this.uuid = 1;
    } else {
      this.uuid += 1;
    }
    const nextKeys = keys.concat(this.uuid);
    form.setFieldsValue({
      keys: nextKeys,
    });
  }

  submit() {
    const { form } = this.props;
    form.validateFields((err) => {
      if (!err) {
        const data = form.getFieldsValue();
        let handler;
        if (!this.params.id) {
          const { libraryId, textbookSubject } = this.state.search;
          handler = Promise.all([data.topic.filter(row => row).map((row, index) => Textbook.addTopic(Object.assign({ libraryId, textbookSubject }, row, { isOld: row.isOld ? 1 : 0, no: this.state.no + index })))]);
        } else {
          handler = Textbook.editTopic(Object.assign({ id: this.params.id }, data.topic[0], { isOld: data.topic[0].isOld }));
        }
        handler.then(() => {
          asyncSMessage('保存成功');
          if (!this.params.id) {
            linkTo('/textbook/topic');
          }
        }).catch((e) => {
          if (e.result) form.setFields(formatFormError(data, e.result));
        });
      }
    });
  }

  renderInfo(index, textbookSubject, no) {
    const { getFieldDecorator } = this.props.form;
    return <Block flex>
      <Row>
        <Col span={10}>
          <h1>录入题目</h1>
        </Col>
        <Col span={2} offset={10}>
          序号：{no}</Col>
        <Col span={1} offset={1}>
          {!this.params.id && <Icon
            type='minus-circle-o'
            onClick={() => this.removeTopic(index)}
          />}</Col>
      </Row>
      <Form>
        <Row key={index}>
          <Col span={8}>
            <Form.Item labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} label='关键词'>
              {getFieldDecorator(`topic[${index}].keyword`, {
                rules: [{
                  required: true,
                  message: '请选择',
                }],
              })(
                textbookSubject === 'quant' ? <Select select={TextbookType} /> : <Input />,
              )}
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} label='机经质量'>
              {getFieldDecorator(`topic[${index}].quality`, {
                rules: [{
                  required: true,
                  message: '请选择',
                }],
              })(
                <Select select={TextbookQuality} />,
              )}
            </Form.Item>
          </Col>
          <Col span={4} offset={4}>
            {getFieldDecorator(`topic[${index}].isOld`, {
              valuePropName: 'checked',
            })(
              <Checkbox>考古题目</Checkbox>,
            )}
          </Col>
        </Row>
        <Form.Item>
          {getFieldDecorator(`topic[${index}].detail`, {
          })(
            <Editor placeholder='输入机经题目' />,
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator(`topic[${index}].content`, {
          })(
            <Editor placeholder='输入机经解析' />,
          )}
        </Form.Item>
      </Form>
    </Block>;
  }

  renderAdd() {
    const { getFieldDecorator, getFieldValue } = this.props.form;
    getFieldDecorator('keys');
    const keys = getFieldValue('keys') || [];
    return <div><Block flex>
      <FilterLayout
        show
        itemList={this.filterForm}
        data={this.state.search}
        onChange={data => {
          data.page = 1;
          this.search(data);
        }} />
    </Block>
      {keys.map((key, index) => this.renderInfo(key, this.state.search.textbookSubject, this.state.no + index))}
      {this.state.no && <Row type="flex" justify="center">
        <Col>
          <Form.Item>
            <Button type='dashed' onClick={() => this.addTopic()}>
              <Icon type='plus' /> 新增
        </Button>
          </Form.Item>
        </Col>
      </Row>}
    </div>;
  }

  renderEdit() {
    return this.renderInfo(0, this.state.data.textbookSubject, this.state.data.no);
  }

  renderView() {
    return <div flex >
      {!this.params.id && this.renderAdd()}
      {this.params.id && this.renderEdit()}
      <Row type="flex" justify="center">
        <Col>
          <Button type="primary" onClick={() => {
            this.submit();
          }}>保存</Button>
        </Col>
      </Row>
    </div>;
  }
}