import React from 'react';
import './index.less';
import Page from '@src/containers/Page';
import Input, { SelectInput, VerificationInput } from '../../../components/Input';
import Button from '../../../components/Button';
import { SpecialRadioGroup, RadioGroup } from '../../../components/Radio';
import Tag from '../../../components/Tag';
import Checkbox from '../../../components/CheckBox';
import Money from '../../../components/Money';
import { Block, TopBlock, TagBlock, LinkBlock } from '../../../components/Block';

export default class extends Page {
  init() {}

  renderView() {
    return (
      <div>
        <Input placeholder="请输入手机号" error="该手机号已绑定其他账号，请更换手机号码。" onChange={() => {}} />
        <SelectInput placeholder="请输入手机号" selectValue="+86" onSelect={() => {}} />
        <VerificationInput placeholder="请输入验证码" onSend={() => {}} />
        <Button margin={25} radius block>
          绑定
        </Button>
        <SpecialRadioGroup list={[{ key: '1', label: 1 }, { key: '2', label: 2 }]} value="1" onChange={() => {}} />
        <RadioGroup list={[{ key: '1', label: 1 }, { key: '2', label: 2 }]} value="1" onChange={() => {}} />
        <Tag size="small">适合新手</Tag>
        <Tag theme="border">OG20阅读刷题（7课时）</Tag>
        <Tag size="small" theme="border" radius>
          OG20阅读刷题（7课时）
        </Tag>
        <Checkbox checked />
        <Checkbox />
        <Money value="100" />
        <Money value="100" size="lager" />
        <Money value="100" size="lager" theme="sell" />
        <Block />
        <TopBlock />
        <TagBlock tag="Yuwen" />
        <LinkBlock title="新手辅导" sub="GMAT 全面了解，定制学习计划" />
        <LinkBlock title="诊断辅导" sub="复习效果不理想，制定突破计划" theme="not" />
      </div>
    );
  }
}