import React from 'react';
import './index.less';
import { Drawer } from 'antd-mobile';
import Page from '@src/containers/Page';
import Assets from '@src/components/Assets';
import { formatTreeData } from '@src/services/Tools';
import { DataBlock } from '../../../components/Block';
import { SpecialRadioGroup } from '../../../components/Radio';
import Switch from '../../../components/Switch';
import Button from '../../../components/Button';
import Checkbox from '../../../components/CheckBox';
import { Course } from '../../../stores/course';
import { Main } from '../../../stores/main';
import { DataType } from '../../../../Constant';

export default class extends Page {
  init() {
    Main.dataStruct().then((list) => {
      const structTree = formatTreeData(list.map(row => {
        row.title = `${row.titleZh} ${row.titleEn}`;
        row.label = row.title;
        row.key = row.id;
        return row;
      }), 'id', 'title', 'parentId');
      this.setState({ structTree });
    });

    const { search } = this.state;
    if (!search.order) search.order = 'saleNumber';
    this.setState({ search });
  }

  initData() {
    Course.listData(this.state.search).then(result => {
      this.setTableData(result.list, result.total);
    });
  }

  changeOrder(order, direction) {
    const { search = {} } = this.state;
    search.order = order;
    search.direction = direction;

    this.setState({ search });
    this.refresh();
  }

  changeNovice() {
    const { search = {} } = this.state;
    search.isNovice = !search.isNovice;

    this.setState({ search });
  }

  changeOriginal() {
    const { search = {} } = this.state;
    search.isOriginal = !search.isOriginal;

    this.setState({ search });
  }

  changeDataType(value) {
    const { search = {} } = this.state;
    search.dataType = value;

    this.setState({ search });
  }

  changeStruct(value) {
    const { search = {} } = this.state;
    search.structId = value;
    this.setState({ search });
  }

  renderView() {
    const { filter, list = [], search = {} } = this.state;
    return (<Drawer
      style={{ minHeight: document.documentElement.clientHeight }}
      position="right"
      open={filter}
      sidebar={this.renderFilter()}
      onOpenChange={isOpen => this.setState({ filter: isOpen })}
    >
      <div className="top">
        <div className={search.order === 'saleNumber' ? 'tab active' : 'tab'} onClick={() => {
          if (search.order !== 'saleNumber') this.changeOrder('saleNumber', 'desc');
        }}>销量</div>
        <div className={search.order === 'updateTime' ? 'tab active' : 'tab'} onClick={() => {
          if (search.order !== 'updateTime') this.changeOrder('updateTime', 'desc');
        }}>更新时间</div>
        <div className="right" onClick={() => this.setState({ filter: true })}>
          筛选
            <Assets name="screen" />
        </div>
      </div>
      <div className="list">
        {list.map(row => <DataBlock data={row} />)}
      </div>
    </Drawer>
    );
  }

  renderFilter() {
    const { search, structTree = [] } = this.state;
    return (
      <div className="filter">
        <div className="body">
          <div className="item">
            <div className="label left">适合新手</div>
            <div className="value right">
              <Switch checked={search.isNovice} onClick={() => {
                this.changeNovice();
              }} />
            </div>
          </div>
          <div className="item">
            <div className="label left">原创资料</div>
            <div className="value right">
              <Switch checked={search.isOriginal} onClick={() => {
                this.changeOriginal();
              }} />
            </div>
          </div>
          <div className="item">
            <div className="label left">资料形式</div>
            <div className="value right">
              <SpecialRadioGroup
                list={DataType}
                value={search.dataType}
                onChange={(value) => {
                  this.changeDataType(value);
                }}
              />
            </div>
          </div>
          <div className="sub">
            <div className="title">筛选学科</div>
            {structTree.map((row) => {
              return <div className="item">
                <div className={row.children.length > 0 ? 'label' : 'label left'}>{row.title}</div>
                {row.children.length > 0 && <div className="value">
                  <SpecialRadioGroup
                    list={row.children}
                    value={search.structId}
                    onChange={(value) => {
                      this.changeStruct(value);
                    }}
                  />
                </div>}
                {row.children.length === 0 && <div className="value right">
                  <Checkbox checked={search.structId === row.id} onClick={() => {
                    this.changeStruct(row.id);
                  }} />
                </div>}

              </div>;
            })}
          </div>
        </div>
        <div className="footer">
          <Button radius width={90} onClick={() => {
            this.refresh();
          }}>
            确定
          </Button>
        </div>
      </div>
    );
  }
}