import React from 'react';
import { Button, Form, Modal, DatePicker, Input, Upload } from 'antd';
import { Link } from 'react-router-dom';
import moment from 'moment';
import './index.less';
import Page from '@src/containers/Page';
import Block from '@src/components/Block';
// import FilterLayout from '@src/layouts/FilterLayout';
// import ActionLayout from '@src/layouts/ActionLayout';
import TableLayout from '@src/layouts/TableLayout';
// import { getMap, bindSearch, formatDate } from '@src/services/Tools';
import { asyncDelConfirm, asyncSMessage } from '@src/services/AsyncTools';
// import { TextbookType } from '../../../../Constant';
import { Textbook } from '../../../stores/textbook';
import { System } from '../../../stores/system';
// import { Question } from '../../../stores/question';
// import { Slient } from '../../../stores/slient';

export default class extends Page {
  constructor(props) {
    super(props);
    this.actionList = [{
      key: 'add',
      name: '新建',
      render: (item) => {
        return <Button onClick={() => {
          linkTo('/subject/textbook/question');
        }}>{item.name}</Button>;
      },
    }];
    this.columns = [{
      title: '库头',
      dataIndex: 'startDate',
    }, {
      title: '库尾',
      dataIndex: 'endDate',
    }, {
      title: '发布次数',
      dataIndex: 'historyNumber',
      render: (text, record) => {
        return text ? <a onClick={() => {
          this.loadHistory(record);
        }}>{text}</a> : 0;
      },
    }, {
      title: '操作',
      dataIndex: 'handler',
      render: (text, record) => {
        return <div className="table-button">
          {(
            <a onClick={() => {
              this.setState({ post: record });
              this.props.form.getFieldDecorator('post.libraryId');
              this.props.form.setFieldsValue({ 'post.libraryId': record.id });
            }}>发布机经</a>
          )}
          {(
            <Link to={`/subject/textbook/question?libraryId=${record.id}`}>录入机经</Link>
          )}
        </div>;
      },
    }];
  }

  initData() {
    const { search } = this.state;
    const data = Object.assign({}, search);
    Textbook.listLibrary(data).then(result => {
      this.setTableData(result.list, result.total || 1);
    });
  }

  loadHistory(record) {
    Textbook.listHistory({ libraryId: record.id }).then(result => {
      this.setState({ history: result.list });
    });
  }

  submit() {
    this.props.form.validateFields(['add'], (err, fieldsValue) => {
      if (err) {
        return;
      }
      const data = fieldsValue.add;
      data.startDate = data.startDate.format('YYYY-MM-DD');
      asyncDelConfirm('新增确认', '是否添加新的换库?', () => {
        return Textbook.addLibrary(data).then(() => {
          asyncSMessage('添加成功!');
          this.refresh();
        });
      });
    });
  }

  submitPost() {
    this.props.form.validateFields(['post'], (err, fieldsValue) => {
      if (err) {
        return;
      }
      const data = fieldsValue.post;
      Textbook.postHistory(data).then(() => {
        asyncSMessage('发布成功!');
        this.close('post', false);
        this.refresh();
      });
    });
  }

  renderView() {
    const { getFieldDecorator, setFieldsValue, getFieldValue } = this.props.form;

    const quant = getFieldValue('post.quant') || null;
    const ir = getFieldValue('post.ir') || null;
    const rc = getFieldValue('post.rc') || null;
    return <Block flex>
      <Form layout="inline">
        <Form.Item>
          {getFieldDecorator('add.startDate', {
            initialValue: moment(new Date(), 'YYYY-mm-dd'),
          })(
            <DatePicker />,
          )}
        </Form.Item>
        <Form.Item><Button type='primary' onClick={() => {
          this.submit();
        }}>新增换库</Button></Form.Item>
      </Form>
      <TableLayout
        columns={this.columns}
        list={this.state.list}
        pagination={this.state.page}
        loading={this.props.core.loading}
        onChange={(pagination, filters, sorter) => this.tableChange(pagination, filters, sorter)}
        onSelect={(keys, rows) => this.tableSelect(keys, rows)}
        selectedKeys={this.state.selectedKeys}
      />
      {this.state.history && <Modal visible closable title='发布历史' onCancel={() => {
        this.close(false, 'history');
      }} onOk={() => {
        this.close(false, 'history');
      }}>
        {this.state.history.map(row => {
          return <p>{row.content}</p>;
        })}
      </Modal>}
      {this.state.post && <Modal visible closable title='发布机经' onCancel={() => {
        this.close(false, 'post');
      }} onOk={() => {
        this.submitPost();
      }}>
        <Form>
          {getFieldDecorator('post.libraryId')}
          <Form.Item label='请上传机经文件，并点击发布'>
            {getFieldDecorator('post.content')(
              <Input.TextArea placeholder='更新日志' />,
            )}
          </Form.Item>
          <Form.Item labelCol={{ span: 4 }} wrapperCol={{ span: 15 }} label='数学机经'>
            {getFieldDecorator('post.quant')(
              <Upload
                listType="text"
                showUploadList={false}
                beforeUpload={(file) => System.uploadImage(file).then((result) => {
                  setFieldsValue({ 'post.quant': result.url });
                  return Promise.reject();
                })}
                onChange={this.handleChange}
              >
                {<div>
                  <Button>上传附件</Button> {quant && '已上传'}
                </div>}
              </Upload>,
            )}
          </Form.Item>
          <Form.Item labelCol={{ span: 4 }} wrapperCol={{ span: 15 }} label='阅读机经'>
            {getFieldDecorator('post.rc')(
              <Upload
                listType="text"
                showUploadList={false}
                beforeUpload={(file) => System.uploadImage(file).then((result) => {
                  setFieldsValue({ 'post.rc': result.url });
                  return Promise.reject();
                })}
                onChange={this.handleChange}
              >
                {<div>
                  <Button>上传附件</Button> {rc && '已上传'}
                </div>}
              </Upload>,
            )}
          </Form.Item>
          <Form.Item labelCol={{ span: 4 }} wrapperCol={{ span: 15 }} label='逻辑机经'>
            {getFieldDecorator('post.ir')(
              <Upload
                listType="text"
                showUploadList={false}
                beforeUpload={(file) => System.uploadImage(file).then((result) => {
                  setFieldsValue({ 'post.ir': result.url });
                  return Promise.reject();
                })}
                onChange={this.handleChange}
              >
                {<div>
                  <Button>上传附件</Button> {ir && '已上传'}
                </div>}
              </Upload>,
            )}
          </Form.Item>
        </Form>
      </Modal>}
    </Block>;
  }
}