import React, { Component } from 'react';
import './index.less';
import { Drawer, Picker } from 'antd-mobile';
import Page from '@src/containers/Page';
import Assets from '@src/components/Assets';
import { List } from 'antd';
import Switch from '../../../components/Switch';
import Icon from '../../../components/Icon';
import { SpecialRadioGroup } from '../../../components/Radio';
import Button from '../../../components/Button';
import { TextbookQuality } from '../../../../Constant';
import { Textbook } from '../../../stores/textbook';

class Detail extends Component {
  constructor(props) {
    super(props);
    this.state = { show: false };
  }

  render() {
    const { show, data = {} } = this.state;
    return (
      <div className="detail">
        <div className="detail-title">{data.no || 0}.{data.keyword}</div>
        <div className="detail-desc" dangerouslySetInnerHTML={{ __html: data.detail }} />
        <div className="detail-switch">
          显示答案
          <Switch size="small" checked={show} onClick={() => this.setState({ show: !show })} />
        </div>
        <div hidden={!show} className="detail-result" dangerouslySetInnerHTML={{ __html: data.content }} />
      </div>
    );
  }
}

export default class extends Page {
  initState() {
    return { pageData: [{ label: 1, value: 1 }] };
  }

  init() {
    const { search } = this.state;
    search.isOld = false;
    search.qualitys = [];
    search.order = '';
    this.setState({ search });
  }

  initData() {
    this.setState({ filter: false });
    Textbook.listTopic(Object.assign({ latest: true }, this.state.search))
      .then(result => {
        this.setTableData(result.list, result.total);
        const pageData = [];
        let i = 0;
        let page = 1;
        while (i < result.total) {
          pageData.push({ label: page, value: page });
          i += this.state.search.size;
          page += 1;
        }
        this.setState({ pageData });
      });
  }

  prev() {
    const { search } = this.state;
    if (search.page > 1) {
      search.page -= 1;
    } else {
      return;
    }
    this.setState({ search });
    this.refresh();
  }

  next() {
    const { search, page } = this.state;

    if (search.page < Math.ceil(page.total / page.pageSize)) {
      search.page += 1;
    } else {
      return;
    }
    this.setState({ search });
    this.refresh();
  }

  changeQuality(value) {
    const { search = {} } = this.state;
    const { qualitys = [] } = search;
    const index = qualitys.indexOf(value);

    if (index >= 0) {
      qualitys.splice(index, 1);
    } else {
      qualitys.push(value);
    }
    search.qualitys = qualitys;
    this.setState({ search });
  }

  changeOld() {
    const { search = {} } = this.state;
    search.isOld = !search.isOld;

    this.setState({ search });
  }

  changeDirection(direction) {
    const { search = {} } = this.state;
    search.direction = direction;

    this.setState({ search });
  }

  changePage(page) {
    const { search = {} } = this.state;
    if (search.page === page) return;
    search.page = page;

    this.refresh();
  }

  renderView() {
    const { filter, search, pageData } = this.state;
    return (
      <Drawer
        style={{ minHeight: document.documentElement.clientHeight }}
        position="right"
        open={filter}
        sidebar={this.renderFilter()}
        onOpenChange={isOpen => this.setState({ filter: isOpen })}
      >
        <div className="title">【逻辑】0515 起逻辑机经整理</div>
        <div className="detail-list">
          <Detail />
          <Detail />
        </div>
        <div className="fixed">
          <div className="prev" onClick={() => {
            this.prev();
          }}>
            <Icon type="left" />
            Previous
          </div>
          <div className="next" onClick={() => {
            this.next();
          }}>
            Next
            <Icon type="right" />
          </div>
          <div className="page">

            <Picker title="选择页数"
              cols={1}
              value={[this.state.search.page]}
              data={pageData}
              onChange={(i) => {
                this.changePage(i[0]);
              }}><List.Item><span>跳转至</span>第{search.page}页<Assets name="down_down3" /></List.Item>
            </Picker>
          </div>
        </div>
        <div hidden={filter} className="filter-switch">
          <Assets name="setting" onClick={() => this.setState({ filter: true })} />
        </div>
      </Drawer>
    );
  }

  renderFilter() {
    const { search } = this.state;
    return (
      <div className="filter">
        <div className="body">
          <div className="item">
            <div className="label">机经质量</div>
            <div className="value">
              <SpecialRadioGroup
                list={TextbookQuality}
                values={search.qualitys}
                onChange={(value) => {
                  this.changeQuality(value);
                }}
              />
            </div>
          </div>
          <div className="item">
            <div className="label left">更新时间</div>
            <div className="value right">
              <Picker title="更新时间"
                cols={1}
                value={[this.state.search.direction]}
                data={[{ label: '由远到近', value: 'asc' }, { label: '由近到远', value: 'desc' }]}
                onChange={(i) => {
                  this.changeDirection(i[0]);
                }}><List.Item extra={false}>{search.direction === 'asc' ? '由远到近' : '由近到远'} <Assets className="arrow" name="down_down3" /></List.Item>
              </Picker>

            </div>
          </div>
          <div className="item">
            <div className="label left">看考古</div>
            <div className="value right">
              <Switch checked={search.isOld} onClick={() => {
                this.changeOld();
              }} />
            </div>
          </div>
        </div>
        <div className="footer">
          <Button radius width={90} onClick={() => {
            this.refresh();
          }}>
            确定
          </Button>
        </div>
      </div>
    );
  }
}