import React, { Component } from 'react';
import './index.less';
import { Icon } from 'antd-mobile';
import Assets from '@src/components/Assets';
import Tag from '../Tag';
import Money from '../Money';
import Button from '../Button';

export class Block extends Component {
  render() {
    const { className = '', children } = this.props;
    return <div className={`g-block ${className}`}>{children}</div>;
  }
}
export class TopBlock extends Component {
  render() {
    const { className = '', theme = 'default', children } = this.props;
    return <div className={`g-top-block ${className} ${theme}`}>{children}</div>;
  }
}

export class TagBlock extends Component {
  render() {
    const { className = '', theme = 'default', tag, children } = this.props;
    return (
      <div className={`g-tag-block ${className} ${theme}`}>
        <div className="g-tag-block-tag">{tag}</div>
        {children}
      </div>
    );
  }
}

export class LinkBlock extends Component {
  render() {
    const { className = '', theme = 'default', title, sub } = this.props;
    return (
      <div className={`g-link-block ${className} ${theme}`}>
        <div className="g-link-block-title">{title}</div>
        <div className="g-link-block-sub">{sub}</div>
        <div className="g-link-block-icon">
          <Icon type="right" size="xxs" color="#fff" />
        </div>
      </div>
    );
  }
}

export class CourseBlock extends Component {
  render() {
    return (
      <Block className="course-block">
        <div className="title">OG20整合刷题-语法SC</div>
        <div className="block-body">
          <Assets name="c_b" />
          <div className="info">
            <div className="teacher">
              授课老师<span>李小小</span>
            </div>
            <div className="desc">
              老师特别特别特别好，上课特别认真…老师特别特别特别好，上课特别认真…老师特别特别特别好，上课特别认真…老师特别特别特别好，上课特别认真…
            </div>
            <div className="division" />
            <div className="data">
              <Tag size="small">适合新手</Tag>
              <div className="result">
                优质回答<span>89</span>
              </div>
            </div>
          </div>
        </div>
      </Block>
    );
  }
}

export class CourseCoBlock extends Component {
  render() {
    const { theme } = this.props;
    return (
      <TagBlock className="course-co-block" theme={theme} tag="语文Verbal">
        <div className="title">OG20基础刷题套餐</div>
        <div className="info">
          <div className="teacher">
            授课老师<span>李小小</span>
          </div>
          <Tag size="small">适合新手</Tag>
        </div>
        <div className="desc">
          老师特别特别特别好，上课特别认真…老师特别特别特别好，上课特别认真…老师特别特别特别好，上课特别认真…老师特别特别特别好，上课特别认真…
        </div>
      </TagBlock>
    );
  }
}

export class DataBlock extends Component {
  render() {
    return (
      <Block className="data-block">
        <Assets name="d_b" />
        <div className="info">
          <div className="title">OG16/17/18/19语法千行</div>
          <div className="desc">资料非常好，帮助复习。</div>
          <div className="division" />
          <div className="data">
            <div className="people">888人已购</div>
            <Money value="200" />
          </div>
        </div>
      </Block>
    );
  }
}

export class BuyBlock extends Component {
  render() {
    const { theme } = this.props;
    return (
      <TopBlock className="buy-block" theme={theme}>
        <div className="block-left">
          <div className="title">
            <Tag theme="border" radius size="small">
              已到期
            </Tag>
            VIP会员
          </div>
          <div className="date">有效期:2019-11-20</div>
          <div className="desc">请访问千行 GMAT 官网开通使用</div>
        </div>
        <div className="block-right">
          <div className="btn">
            <Button radius>开通</Button>
          </div>
          <div className="tip">¥888/ 3个月</div>
        </div>
      </TopBlock>
    );
  }
}