import React from 'react';
import { Form, Button, Row, Col, List, Icon, Switch, Typography, Input } from 'antd';
import './index.less';
// import Editor from '@src/components/Editor';
import Page from '@src/containers/Page';
import Block from '@src/components/Block';
import DragList from '@src/components/DragList';
// import FileUpload from '@src/components/FileUpload';
import { formatFormError, formatDate, getMap } from '@src/services/Tools';
import { asyncSMessage } from '@src/services/AsyncTools';
import { PcUrl } from '../../../../Constant';
import { Exercise } from '../../../stores/exercise';
import { Course } from '../../../stores/course';

export default class extends Page {
  init() {
    this.exerciseMap = {};
    Exercise.courseStruct().then((result) => {
      this.exerciseMap = getMap(result.map(row => {
        row.title = `${row.titleZh}`;
        row.value = row.id;
        return row;
      }), 'id', 'title');

      this.setState({ exercise: result });
    });
  }

  initData() {
    const { id } = this.params;
    let handler;
    if (id) {
      handler = Course.getAsk({ id });
    } else {
      handler = Promise.resolve({ others: [] });
    }
    handler
      .then(result => {
        result.ignoreStatus = result.answerStatus === 2;
        const { getFieldDecorator, setFieldsValue } = this.props.form;
        getFieldDecorator('id');
        getFieldDecorator('answer');
        getFieldDecorator('showStatus');
        getFieldDecorator('content');
        setFieldsValue({ id: result.id, content: result.content, answer: result.answer });
        this.setState({ data: result });
      });
  }

  orderQuestion(oldIndex, newIndex) {
    const { data } = this.state;
    const { others = [] } = data;
    const tmp = others.splice(oldIndex, 1);
    if (newIndex === others.length) {
      others.push(tmp[0]);
    } else {
      others.splice(newIndex, 0, tmp[0]);
    }
    this.setState({ others });
  }

  addOrder() {
    const { data } = this.state;
    const { others } = data;
    others.push(data);
    this.setState({ data });
  }

  removeOrder() {
    const { data } = this.state;
    const { others } = data;
    data.others = others.filter(row => row.id !== data.id);
    this.setState({ data });
  }

  submit() {
    const { form } = this.props;
    form.validateFields((err) => {
      if (!err) {
        const data = form.getFieldsValue();
        data.showStatus = data.showStatus ? 1 : 0;
        data.other = this.state.data.others.map(row => row.id);
        Course.editAsk(data).then(() => {
          asyncSMessage('保存成功');
        }).catch((e) => {
          if (e.result) form.setFields(formatFormError(data, e.result));
        });
      }
    });
  }

  ignore() {
    const { data } = this.state;
    Course.editAsk({ id: data.id, ignoreStatus: 1 }).then(() => {
      asyncSMessage('操作成功');
      goBack();
    });
  }

  renderBase() {
    const { data } = this.state;
    const { course = {} } = data;
    return <Block>
      <h1>提问信息</h1>
      <Form>
        <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='学科'>
          {this.exerciseMap[course.structId]}
        </Form.Item>
        <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='课程'>
          <a href={`${PcUrl}/course/detail/${course.id}`} target='_blank'>{course.title}</a>
        </Form.Item>
      </Form>
    </Block>;
  }

  renderAsk() {
    const { getFieldDecorator, getFieldValue } = this.props.form;
    const { data, editContent } = this.state;
    const { user = {}, createTime, courseNo = {}, position, originContent, content } = data;
    return <Block>
      <h1>提问信息</h1>
      <Form>
        <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='用户姓名'>
          {user.nickname}
        </Form.Item>
        <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='提问时间'>
          {formatDate(createTime, 'YYYY-MM-DD HH:mm:ss')}
        </Form.Item>
        <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='提问位置'>
          {`P${courseNo.no}:${position}-${position + 5}min`}
        </Form.Item>
        <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='提问内容'>
          {originContent}
        </Form.Item>
        <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='提问详情'>
          {!editContent && content}
          {getFieldDecorator('content', {
          })(
            editContent ? <Input.TextArea placeholder='输入内容' /> : <input hidden />,
          )}
          <Switch checked={editContent} checkedChildren='编辑模式' unCheckedChildren='关闭' onChange={(value) => {
            data.content = getFieldValue('content');
            this.setState({ editContent: value, data });
          }} />
        </Form.Item>
      </Form>
    </Block>;
  }

  renderQuestionList() {
    return <Block>
      <h1>该时段的展示中问题</h1>
      <DragList
        loading={this.props.core.loading}
        dataSource={this.state.data.others || []}
        handle={'.icon'}
        onMove={(oldIndex, newIndex) => {
          this.orderQuestion(oldIndex, newIndex);
        }}
        renderItem={(item) => (
          <List.Item actions={[<Icon type='bars' className='icon' />, <Typography.Text copyable={{ text: `${PcUrl}/course/answer/${item.courseId}?courseNoId=${item.courseNoId}&askId=${item.id}` }} />]}>
            <Row style={{ width: '100%' }}>
              <Col span={11}>问题：<span dangerouslySetInnerHTML={{ __html: item.content }} /></Col>
              <Col span={11} offset={1}>答复：<span dangerouslySetInnerHTML={{ __html: item.answer }} /></Col>
            </Row>
          </List.Item>
        )}
      /></Block>;
  }

  renderAnswer() {
    const { getFieldDecorator } = this.props.form;
    return <Block>
      <Form>
        {getFieldDecorator('id')(<input hidden />)}
        <Form.Item label='教师回复'>
          {getFieldDecorator('answer', {
          })(
            <Input.TextArea placeholder='输入内容' />,
          )}
        </Form.Item>
        <Row type="flex" justify="center">
          <Col span={12}>
            <Form.Item labelCol={{ span: 12 }} wrapperCol={{ span: 10 }} label='显示状态'>
              {getFieldDecorator('showStatus', {
                valuePropName: 'checked',
              })(
                <Switch onChange={(value) => {
                  if (value) {
                    this.addOrder();
                  } else {
                    this.removeOrder();
                  }
                }} checkedChildren='on' unCheckedChildren='off' />,
              )}
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </Block>;
  }

  renderView() {
    return <div flex>
      {this.renderBase()}
      {this.renderAsk()}
      {this.renderQuestionList()}
      {this.renderAnswer()}

      <Row type="flex" justify="center">
        <Col>
          <Button type="drange" onClick={() => {
            this.ignore();
          }}>忽略问题</Button>
        </Col>
        <Col>
          <Button type="primary" onClick={() => {
            this.submit();
          }}>保存</Button>
        </Col>
      </Row>
    </div>;
  }
}