import React from 'react';
import './index.less';
import { Drawer, Tabs } from 'antd-mobile';
import Page from '@src/containers/Page';
import Assets from '@src/components/Assets';
import { CourseCoBlock } from '../../../components/Block';
import { SpecialRadioGroup } from '../../../components/Radio';
import Button from '../../../components/Button';
import Checkbox from '../../../components/CheckBox';

export default class extends Page {
  init() {}

  renderView() {
    const { filter } = 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">
          <Tabs tabs={[{ title: '单次', key: 'd' }, { title: '套餐', key: 'a' }]} />
          <div className="right" onClick={() => this.setState({ filter: true })}>
            筛选
            <Assets name="screen" />
          </div>
        </div>
        <div className="list">
          <CourseCoBlock theme="not" />
          <CourseCoBlock />
          <CourseCoBlock theme="end" />
          <CourseCoBlock />
          <CourseCoBlock />
          <CourseCoBlock />
          <CourseCoBlock />
        </div>
      </Drawer>
    );
  }

  renderFilter() {
    return (
      <div className="filter">
        <div className="body">
          <div className="sub">
            <div className="title">筛选学科</div>
            <div className="item">
              <div className="label left">长难句</div>
              <div className="value right">
                <Checkbox />
              </div>
            </div>
            <div className="item">
              <div className="label">语文 Verbal</div>
              <div className="value">
                <SpecialRadioGroup
                  list={[
                    { key: '1', label: '语法 SC' },
                    { key: '2', label: '阅读 RC' },
                    { key: '3', label: '逻辑 CR' },
                  ]}
                />
              </div>
            </div>
            <div className="item">
              <div className="label">数学 Quant</div>
            </div>
          </div>
        </div>
        <div className="footer">
          <Button radius width={90}>
            确定
          </Button>
        </div>
      </div>
    );
  }
}