import React from 'react';
import './index.less';
import { Tabs } from 'antd-mobile';
import Page from '@src/containers/Page';
import Assets from '@src/components/Assets';
import Money from '../../../components/Money';
import { LinkBlock, CourseBlock, DataBlock } from '../../../components/Block';

export default class extends Page {
  init() { }

  renderView() {
    return (
      <div>
        <Tabs
          tabs={[
            { title: '服务', key: 'service' },
            { title: '1V1私教', key: 'vs' },
            { title: '在线课程', key: 'video' },
            { title: '资料', key: 'data' },
          ]}
        />
        <div className="title">服务</div>
        <div className="service">
          <div className="service-item">
            <div className="service-item-t">123342</div>
            <Money size="small" value="100" />
            <Assets name="VIP" />
          </div>
          <div className="service-item">
            <div className="service-item-t">123342</div>
            <Money size="small" value="100" />
            <Assets name="CAT" />
          </div>
          <div className="service-item">
            <div className="service-item-t">123342</div>
            <Money size="small" value="100" />
            <Assets name="JiJing" />
          </div>
        </div>
        <div className="title">1V1私教</div>
        <Assets name="banner" className="banner" />
        <LinkBlock title="新手辅导" sub="GMAT 全面了解，定制学习计划" />
        <LinkBlock title="诊断辅导" sub="复习效果不理想，制定突破计划" theme="not" />
        <LinkBlock title="系统授课" sub="全面知识体系讲解，提升实战能力" />
        <LinkBlock title="答疑课" sub="一对一解答疑问，破解所有疑团" theme="not" />
        <div className="title">在线课程</div>
        <Assets name="banner" className="banner" />
        <CourseBlock />
        <div className="more t-r m-b-2">全部课程 ></div>
        <div className="title">资料</div>
        <Assets name="banner" className="banner" />
        <DataBlock />
        <div className="more t-r m-b-2">全部资料 ></div>
      </div>
    );
  }
}