import React from 'react';
import './index.less';
import { Anchor } from 'antd';
import { Tabs } from 'antd-mobile';
import Page from '@src/containers/Page';
import Assets from '@src/components/Assets';
import { getMap } from '@src/services/Tools';
import Money from '../../../components/Money';
import { LinkBlock, CourseBlock, DataBlock } from '../../../components/Block';
import { Main } from '../../../stores/main';
import { Course } from '../../../stores/course';
import { ServiceKey, CourseVsType } from '../../../../Constant';

export default class extends Page {
  init() {
    this.courseVsMap = {};
  }

  initData() {
    Promise.all(ServiceKey.map(service => {
      return Main.getService(service).then(result => {
        this.setState({ [service]: result });
      });
    }));
    Course.allVs().then(list => {
      this.courseVsMap = getMap(list, 'vsType');
      this.setState({ vsList: list });
    });
    Course.listVideo({ page: 1, size: 3 })
      .then(result => {
        this.setState({ courseTop: result.list });
      });
    Course.listData({ page: 1, size: 3 })
      .then((result) => {
        this.setState({ dataTop: result.list });
      });
  }

  renderView() {
    const { courseTop = [], dataTop = [] } = this.state;
    return [<Anchor>
      <Tabs
        tabs={[
          { title: '服务', key: 'service' },
          { title: '1V1私教', key: 'vs' },
          { title: '在线课程', key: 'video' },
          { title: '资料', key: 'data' },
        ]}
        renderTab={(tab) => {
          return <Anchor.Link href={`#${tab.key}`} title={tab.title} />;
        }}
      />
    </Anchor>, <div className="list">
      <div className="body">
        <a name="service" />
        <div className="title">服务</div>
        <div className="service">
          {ServiceKey.map(service => {
            const s = this.state[service.value] || {};
            const money = s.package ? s.package[0].price : 0;
            return <div className="service-item" onClick={() => {
              linkTo(`/product/service/${service.value}`);
            }}>
              <div className="service-item-t">{service.label}</div>
              <Money size="small" value={money} />
              <Assets name={service.value} />
            </div>;
          })}
        </div>
        <a name="vs" />
        <div className="title">1V1私教</div>
        <Assets name="banner" className="banner" />
        {CourseVsType.map((t, index) => {
          const course = this.courseVsMap[t.value] || {};
          return <LinkBlock title={course.title} sub={course.comment} theme={index % 2 > 0 ? 'not' : ''} onClick={() => {
            linkTo(`/product/course/vs/${course.id}`);
          }} />;
        })}
        {/* <LinkBlock title="新手辅导" sub="GMAT 全面了解，定制学习计划" />
        <LinkBlock title="诊断辅导" sub="复习效果不理想，制定突破计划" theme="not" />
        <LinkBlock title="系统授课" sub="全面知识体系讲解，提升实战能力" />
        <LinkBlock title="答疑课" sub="一对一解答疑问，破解所有疑团" theme="not" /> */}
        <a name="video" />
        <div className="title">在线课程</div>
        <Assets name="banner" className="banner" />
        {courseTop.map(row => {
          return <CourseBlock data={row} />;
        })}
        <div className="more t-r m-b-2" onClick={() => {
          linkTo('/product/course/video');
        }} >全部课程 ></div>
        <a name="data" />
        <div className="title">资料</div>
        <Assets name="banner" className="banner" />
        {dataTop.map(row => {
          return <DataBlock data={row} />;
        })}
        <div className="more t-r m-b-2" onClick={() => {
          linkTo('/product/data');
        }}>全部资料 ></div>
      </div>
    </div>,
    ];
  }
}