import React from 'react';
import './index.less';
import { Icon } from 'antd';
import Page from '@src/containers/Page';
import Assets from '@src/components/Assets';
import Footer from '../../../components/Footer';
import { Contact } from '../../../components/Other';
import Tabs from '../../../components/Tabs';
import Button from '../../../components/Button';

export default class extends Page {
  initState() {
    return {
      tab: '1',
      key: '1',
    };
  }

  onChangeTab(tab) {
    this.setState({ tab });
  }

  onChangeItem(key) {
    this.setState({ key });
  }

  renderView() {
    return (
      <div>
        <div className="top content">
          <Tabs type="text" active={'2'} tabs={[{ title: '在线课程', key: '1' }, { title: '1v1私教', key: '2' }]} />
          <div className="f-r">
            <span className="t-2 m-r-1">优惠活动：2门9折，3门88折，4门及以上85折。</span>
            <Assets name="cart" />
            <span className="t-2">（ 1 ）</span>
          </div>
        </div>
        {this.renderDetail()}
        <Contact />
        <Footer />
      </div>
    );
  }

  renderDetail() {
    const { tab, key } = this.state;
    return [
      <div className="center">
        <div className="content">
          <Assets className="m-b-2" width={1140} name="s" />
          <div className="item-list">
            <div className={`item ${key === '1' ? 'active' : ''}`} onClick={() => this.onChangeItem('1')}>
              <Assets name="xinshoufudao" />
              <div className="t-1 t-s-20 f-w-b">新手辅导</div>
              <div className="t-2">GMAT 全面了解，定制学习计划</div>
            </div>
            <div className={`item ${key === '2' ? 'active' : ''}`} onClick={() => this.onChangeItem('2')}>
              <Assets name="zhenduanfudao" />
              <div className="t-1 t-s-20 f-w-b">诊断辅导</div>
              <div className="t-2">复习效果不理想，制定突破计划</div>
            </div>
            <div className={`item ${key === '3' ? 'active' : ''}`} onClick={() => this.onChangeItem('3')}>
              <Assets name="xitongshouke" />
              <div className="t-1 t-s-20 f-w-b">系统授课</div>
              <div className="t-2">全面知识体系讲解，提升实战能力</div>
            </div>
            <div className={`item ${key === '4' ? 'active' : ''}`} onClick={() => this.onChangeItem('4')}>
              <Assets name="dayi" />
              <div className="t-1 t-s-20 f-w-b">答疑课</div>
              <div className="t-2">GMAT 全面了解，定制学习计划</div>
            </div>
          </div>
          <div className="item-detail">
            <div className="left">
              <Assets name="" />
            </div>
            <div className="right">
              <div className="t-1 t-s-16 m-b-2">
                针对 0G20 的集中训练针对 0G20 的集中训练针对 0G20 的集中训练针对 0G20 的集中训练。针对 0G20
                的集中训练针对 0G20 的集中训练针对 0G20 的集，中训练针对 0G20 的集中训练针 对 0G20 的集中训练针对。 0G20
                的集中训练针对 0，G20 的集中训练针对 0G20 的集中训练针对 0G20 的集中训。练针对 0G20 的集中训练针对 0G20
                的集中训练针对 0G20 的集中训练。针对 0G20 的集中训练针对 0G20 的集中训练针对 0G20 的集中训练针对 0G20
                的集中训练。
              </div>
              <div className="m-b-5">
                <div style={{ width: 120 }} className="d-i-b t-2">
                  适合人群
                </div>
                <div className="d-i-b t-1">刚接触GMAT考试的考 ⽣生或需要科学备考计划 的考⽣生</div>
              </div>
              <div className="m-b-5">
                <div style={{ width: 120 }} className="d-i-b t-2">
                  课时数
                </div>
                <div className="d-i-b t-1">1课时，时⻓长1-1.5⼩小时</div>
              </div>
              <div className="m-b-5">
                <div style={{ width: 120 }} className="d-i-b t-2">
                  授课流程
                </div>
                <div className="d-i-b t-1">购买课时 → 收集信息 → 预约时间 → 正式辅导</div>
              </div>
              <div className="m-b-5">
                <div style={{ width: 120 }} className="d-i-b t-2">
                  课程有效期
                </div>
                <div className="d-i-b t-1">30天</div>
              </div>
              <div className="m-b-5 input">
                <div style={{ width: 120 }} className="d-i-b t-2">
                  购买课时
                </div>
                <div className="d-i-b t-1">
                  <input style={{ width: 32 }} className="m-l-5 t-c" />
                  <Icon className="up" type="caret-up" />
                  <Icon className="down" type="caret-down" />
                </div>
              </div>
              <div className="m-b-5">
                <div style={{ width: 120 }} className="d-i-b t-2">
                  课程总价
                </div>
                <div className="d-i-b t-7 t-s-20 f-w-b"> ¥ 15000</div>
              </div>
              <div className="action">
                <Button className="m-r-1" radius size="lager">
                  立即购买
                </Button>
                <Button theme="default" radius size="lager">
                  <Assets name="add" />
                </Button>
              </div>
            </div>
          </div>
        </div>
      </div>,
      <div className="bottom">
        <div className="content">
          <Tabs
            type="full"
            border
            active={tab}
            tabs={[
              { title: '老师资料', key: '1' },
              { title: '咨询方式', key: '2' },
              { title: 'FAQs', key: '3' },
              { title: '学员评价', key: '4' },
            ]}
          />
          {this[`renderTab${tab}`]()}
        </div>
      </div>,
    ];
  }

  renderTab1() {
    return <div />;
  }

  renderTab2() {
    return <div />;
  }

  renderTab3() {
    return <div />;
  }

  renderTab4() {
    return <div />;
  }
}