import React, { Component } from 'react';
import './index.less';
import { Icon } from 'antd';
import Page from '@src/containers/Page';
import { formatDate } from '@src/services/Tools';
import Modal from '../../../components/Modal';
import UserAction from '../../../components/UserAction';
import CheckboxItem from '../../../components/CheckboxItem';

export default class extends Page {
  initState() {
    return {
      filterMap: {},
      sortMap: {},
      list: [
        {
          title: '比较对象对等问题',
          content:
            '从比较对象和句子结构我们能把DE排除掉，D选项中dffat和livestock不是比较对象，E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题？从比较对象和句子结构我们能把DE排除掉，D选项中fat和livest。ock不是比较对象，E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题？从比较对象和句子结构我们能把DE排除掉，D选项中fat和livestock不是比较对象，E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题？从比较？对象和句子结构我们能把？DE排除掉，D选项中fat和livestock不是比较对象，E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题？从比较对象和句子结。构我们能把DE排除掉，D选项中fat和livestock不是比较对象.',
        },
        {
          title: '比较对象对等问题',
          content:
            '从比较对象和句子结构我们能把DE排除掉，D选项中dffat和livestock不是比较对象，E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题？从比较对象和句子结构我们能把DE排除掉，D选项中fat和livest。ock不是比较对象，E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题？从比较对象和句子结构我们能把DE排除掉，D选项中fat和livestock不是比较对象，E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题？从比较？对象和句子结构我们能把？DE排除掉，D选项中fat和livestock不是比较对象，E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题？从比较对象和句子结。构我们能把DE排除掉，D选项中fat和livestock不是比较对象.',
        },
        {
          title: '比较对象对等问题',
          content:
            '从比较对象和句子结构我们能把DE排除掉，D选项中dffat和livestock不是比较对象，E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题？从比较对象和句子结构我们能把DE排除掉，D选项中fat和livest。ock不是比较对象，E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题？从比较对象和句子结构我们能把DE排除掉，D选项中fat和livestock不是比较对象，E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题？从比较？对象和句子结构我们能把？DE排除掉，D选项中fat和livestock不是比较对象，E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题？从比较对象和句子结。构我们能把DE排除掉，D选项中fat和livestock不是比较对象.',
        },
      ],
      selectList: [],
      allChecked: false,
      showDetail: false,
    };
  }

  initData() {}

  onFilter(value) {
    this.search(value, false);
    this.initData();
  }

  onChangePage(page) {
    this.search({ page }, false);
    this.initData();
  }

  renderView() {
    const { list = [], sortMap, filterMap, allChecked } = this.state;
    const {
      user: { info },
    } = this.props;
    return (
      <div>
        <div className="top content t-8">
          千行课堂 > 全部课程 > OG20综合刷题 > 课时3 > <span className="t-1">我的笔记</span>
          <div className="f-r">返回课程</div>
        </div>
        <div className="center content">
          <div className="t-1 t-s-20 m-b-2">OG20综合刷题——第3课时:XXXXXXX</div>
          <UserAction
            allCheckbox
            allChecked={allChecked}
            search
            defaultSearch={filterMap.keyword}
            btnList={[
              { title: '删除', key: 'delete' },
              { title: '导出', key: 'export', tag: 'vip', disabled: !info.vip },
            ]}
            sortList={[
              { right: true, label: '课时', key: 'ask_time', fixed: true },
              { right: true, label: '更新时间', key: 'create_time', fixed: true },
            ]}
            sortMap={sortMap}
            onSort={value => this.onSort(value)}
          />
          <div className="list">
            {list.map(item => {
              return <Note data={item} onClick={() => this.setState({ showDetail: true, article: item })} />;
            })}
          </div>
        </div>
        {this.renderModal()}
      </div>
    );
  }

  renderModal() {
    const { article = {} } = this.state;
    return [
      <NoteDetail
        show={this.state.showDetail}
        data={article}
        onClose={() => this.setState({ showDetail: false })}
        onPrev={() => this.prevArticle()}
        onNext={() => this.nextArticle()}
      />,
    ];
  }
}

class NoteDetail extends Component {
  render() {
    const { show, data, onClose, onPrev, onNext } = this.props;
    return (
      <Modal
        className="note-detail-modal"
        body={false}
        show={show}
        width={720}
        maskClosable
        close={false}
        onClose={onClose}
        title={data.title}
        center
      >
        <Icon type="left" className="prev" onClick={() => onPrev && onPrev()} />
        <Icon type="right" className="next" onClick={() => onNext && onNext()} />
        <div className="t-2 t-s-18 detail" dangerouslySetInnerHTML={{ __html: data.content }} />
      </Modal>
    );
  }
}

class Note extends Component {
  render() {
    const { data, onClick } = this.props;
    return (
      <div className="note-item p-t-2 b-b" onClick={() => onClick && onClick()}>
        <div className="t-1 t-s-14 f-w-b m-b-5">
          <CheckboxItem theme="white" />
          <span className="t-2 m-l-5 m-r-5">课时1</span>
          {data.title}
          <div className="f-r t-3 t-s-12 f-w-d">
            <span>{formatDate(data.updateTime, 'YYYY-MM-DD HH:mm:ss')}</span>
          </div>
        </div>
        <div className="t-2 m-b-2 detail" dangerouslySetInnerHTML={{ __html: data.content }} />
      </div>
    );
  }
}