import React from 'react';
import moment from 'moment';
import { Form, Input, Button, Row, Col, InputNumber, DatePicker } 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, generateSearch } from '@src/services/Tools';
import { asyncSMessage } from '@src/services/AsyncTools';
import { PrepareStatus, ExperienceScoreRange, ExperiencePercent } from '../../../../Constant';
import { Course } from '../../../stores/course';
import { User } from '../../../stores/user';

const [minScore, maxScore, step] = ExperienceScoreRange;
let tmp = minScore;
const ExperienceScore = [];
while (tmp <= maxScore) {
  ExperienceScore.push({ label: `${tmp}`, value: tmp });
  tmp += step;
}

export default class extends Page {
  initState() {
    return { showNickname: true };
  }

  initData() {
    const { id } = this.params;
    const { form } = this.props;
    let handler;
    if (id) {
      handler = Course.getExperience({ id });
    } else {
      handler = Promise.resolve({});
    }

    handler
      .then(result => {
        if (result.userId) {
          this.setState({ showNickname: false });
        }
        result.experienceTime = moment(result.experienceTime);
        generateSearch('userId', {
          allowClear: true,
        }, this, (search) => {
          return User.list(search);
        }, (row) => {
          return {
            title: `${row.nickname}(${row.mobile})`,
            value: row.id,
          };
        }, result.userId, null);
        form.setFieldsValue(result);
      });
  }

  submit() {
    const { form } = this.props;
    form.validateFields((err) => {
      if (!err) {
        const data = form.getFieldsValue();
        let handler;
        data.description = (data.content || '').replace(/<[^>]+>/g, '').substr(0, 200);
        if (data.id) {
          handler = Course.editExperience(data);
        } else {
          handler = Course.addExperience(data);
        }
        handler.then(() => {
          asyncSMessage('保存成功');
          goBack();
        }).catch((e) => {
          if (e.result) form.setFields(formatFormError(data, e.result));
        });
      }
    });
  }

  renderBase() {
    const { getFieldDecorator } = this.props.form;
    const { showNickname } = this.state;
    return <Block>
      <Form>
        {getFieldDecorator('id')(<input hidden />)}
        <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='题目'>
          {getFieldDecorator('title', {
            rules: [
              { required: true, message: '请输入名称' },
            ],
          })(<Input placeholder='请输入名称' />)}
        </Form.Item>
        <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='作者'>
          {getFieldDecorator('userId', {
            rules: [
              { required: !showNickname, message: '请选择作者' },
            ],
          })(
            <Select {...this.state.userId} onChange={(value) => {
              this.setState({ showNickname: !value });
            }} placeholder='请选择作者' />,
          )}
        </Form.Item>
        <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='昵称'>
          {getFieldDecorator('nickname', {
            rules: [
              { required: showNickname, message: '请输入昵称' },
            ],
          })(
            <Input disabled={!showNickname} placeholder='输入昵称' />,
          )}
        </Form.Item>
        <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='作者信息'>
          <Row>
            <Col span={12}>
              <Form.Item labelCol={{ span: 8 }} wrapperCol={{ span: 14 }} label='身份'>
                {getFieldDecorator('prepareStatus', {
                  rules: [{
                    required: true, message: '请选择',
                  }],
                })(
                  <Select select={PrepareStatus} placeholder='身份' />,
                )}
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item labelCol={{ span: 8 }} wrapperCol={{ span: 14 }} label='备考周期'>
                {getFieldDecorator('experienceDay', {
                  rules: [{
                    required: true, message: '请输入备考天数',
                  }],
                })(
                  <InputNumber placeholder='备考周期: 天' />,
                )}
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item labelCol={{ span: 8 }} wrapperCol={{ span: 14 }} label='分手成绩'>
                {getFieldDecorator('experienceScore', {
                  rules: [{
                    required: true, message: '请选择',
                  }],
                })(
                  <Select select={ExperienceScore} placeholder='分手成绩' />,
                )}
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item labelCol={{ span: 8 }} wrapperCol={{ span: 14 }} label='提分范围'>
                {getFieldDecorator('experiencePercent', {
                  rules: [{
                    required: true, message: '请选择',
                  }],
                })(
                  <Select select={ExperiencePercent} placeholder='提分范围' />,
                )}
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item labelCol={{ span: 8 }} wrapperCol={{ span: 14 }} label='考试时间'>
                {getFieldDecorator('experienceTime', {
                  rules: [{
                    required: true, message: '请选择',
                  }],
                })(
                  <DatePicker placeholder='考试时间' />,
                )}
              </Form.Item>
            </Col>
          </Row>
        </Form.Item>
        <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='问卷链接'>
          {getFieldDecorator('link', {
          })(
            <Input placeholder='输入内容' />,
          )}
        </Form.Item>
        <Form.Item label='正文'>
          {getFieldDecorator('content', {
          })(
            <Editor placeholder='输入内容' />,
          )}
        </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>;
  }
}