import React from 'react';
import { Carousel } from 'antd';
import './index.less';
import Page from '@src/containers/Page';
import Assets from '@src/components/Assets';
import { formatDate } from '@src/services/Tools';
import Button from '../../../components/Button';
import Footer from '../../../components/Footer';
import { Main } from '../../../stores/main';

const courseIconList = ['grammar', 'read', 'logic', 'math'];

export default class extends Page {
  constructor(props) {
    super(props);
    this.state = { courseIndex: 0 };
  }

  initData() {
    Main.getIndex().then(result => {
      this.setState(result);
    });
    setTimeout(() => {
      this.createLayout();
    }, 1);
  }

  createLayout() {
    const msnry = new Masonry('.grid', {
      itemSelector: '.grid-item',
    });
    msnry.layout();
  }

  location(url) {
    window.location.href = url;
  }

  renderView() {
    const { prepare = {}, user = {}, course = [], activity = [], evaluation = [], contact = {} } = this.state;
    return (
      <div>
        <div className="block block-1">
          <div className="body">
            <div className="title">PREPARE THE GMAT LIKE A PRO.</div>
            <div className="desc">我们相信每位考生独一无二，但科学的备考方法本质相通；</div>
            <div className="desc">我们知道考取高分并非易事，但千行的专业指导让难度下降25%;</div>
            <div className="desc">我们清楚GMAT只是留学生涯的起点，但千行努力让您收获更多。</div>
          </div>
        </div>
        <div className="block block-2">
          <div className="body">
            <div className="title">完善备考信息，赢VIP权限</div>
            <div className="desc">知己知彼，百战不殆！</div>
            <Button theme="white" className="btn">
              立即填写
            </Button>
          </div>
        </div>
        <div className="block block-3">
          <div className="bg">
            <div className="bg-1" />
            <div className="bg-2" />
            <div className="bg-3" />
            <div className="bg-4" />
          </div>
          <div className="fixed">
            <div className="body">
              <div className="step step-1">
                <div className="m-title">备考攻略</div>
                <div className="list">
                  <div className="item m-r-2">
                    <div className="title">
                      自学指南<span className="sub">Self-guided</span>
                    </div>
                    <div className="btn">
                      <Button className="btn-shadow" size="lager" onClick={() => {
                        this.location(prepare.first);
                      }}>
                        从零开始
                      </Button>
                      <Button className="btn-shadow" theme="white" size="lager" onClick={() => {
                        this.location(prepare.continue);
                      }}>
                        继续学习
                      </Button>
                    </div>
                  </div>
                  <div className="item m-l-2">
                    <div className="title">
                      参与课程<span className="sub">With DUKB24</span>
                    </div>
                    <div className="btn">
                      <Button theme="error" size="lager" radius onClick={() => {
                        this.location(prepare.classJunior);
                      }}>
                        从零开始
                      </Button>
                      <Button theme="warn" size="lager" radius onClick={() => {
                        this.location(prepare.classMiddle);
                      }}>
                        继续学习
                      </Button>
                    </div>
                  </div>
                </div>
              </div>
              <div className="step step-2">
                <div className="m-title">WHY 千行</div>
                <div className="list">
                  <div className="item m-r-1-5">
                    <div className="title">
                      <Assets name="planet" />
                      内容全⾯<span className="sub">360° Support</span>
                    </div>
                    <div className="desc">
                      网站涵盖考试介绍、方法引导、技巧点拨、练习、课程、机经、模考、心经分享等，从入门到出分，一应俱全，满足各阶段考生的备考需求。
                    </div>
                  </div>
                  <div className="item m-r-1-5 m-l-1-5">
                    <div className="title">
                      <Assets name="expert" />
                      指导专业<span className="sub">We are Pro.</span>
                    </div>
                    <div className="desc">专注GMAT备考8年 出分周期高于行业平均水平26% 学员均分高于行业18%</div>
                  </div>
                  <div className="item m-l-1-5">
                    <div className="title">
                      <Assets name="userfriendly" />
                      ⼈⼈会⽤<span className="sub">User-frriendly</span>
                    </div>
                    <div className="desc">
                      除提供有用的数据信息外，网站多处设置信息导，提供必要的解释和原理说明，从源头规避误区，协助考生做出更加明智的决策，提高备考效率。
                    </div>
                  </div>
                </div>
              </div>
              <div className="step step-3">
                <div className="list">
                  <div className="item m-r-1-5">
                    <div className="title" style={{ color: '#4292F0' }}>
                      {user.numberOffline}
                    </div>
                    <div className="desc">注册用户</div>
                    <Assets className="foot-1" name="foot1" />
                  </div>
                  <div className="item m-r-1-5 m-l-1-5">
                    <div className="title" style={{ color: '#FFB676' }}>
                      {user.number700}
                    </div>
                    <div className="desc">700+分学员</div>
                    <Assets className="foot-2" name="foot2" />
                  </div>
                  <div className="item m-l-1-5">
                    <div className="title" style={{ color: '#F36565' }}>
                      {user.numberScore}
                    </div>
                    <div className="desc">学员均分</div>
                    <Assets className="foot-3" name="foot1" />
                  </div>
                </div>
              </div>
              <div className="step step-4">
                <div className="m-title">
                  千⾏课程<span className="sub">Waste Less, Learn More</span>
                </div>
                <div className="box">
                  <div className="detail">
                    {course[this.state.courseIndex] && <a href={course[this.state.courseIndex].link} target='_blank'><Assets src={course[this.state.courseIndex].image} /></a>}
                  </div>
                  <div className="list">
                    {course.map((row, index) => {
                      if (index >= 4) return null;
                      return <div
                        className={`tab ${this.state.courseIndex === index ? 'active' : ''}`}
                        onMouseEnter={() => this.setState({ courseIndex: index })}
                      >
                        <Assets name={courseIconList[index]} />
                        {row.title}
                        <div className={`place place-${index + 1}`}>
                          <span className="right-arrow" />
                        </div>
                        <i className="left-arrow" />
                      </div>;
                    })}
                  </div>
                </div>
              </div>
              <div className="step step-5">
                <div className="m-title">独家服务</div>
                <div className="list">
                  <div className="item m-r-1-5" style={{ height: 210 }}>
                    <Assets className="sun" name="sun_blue" />
                    <div className="title" style={{ color: '#4292F0' }}>
                      千⾏CAT模考<span className="sub">></span>
                    </div>
                    <div className="desc">采⽤CAT出题机制、排名制算分⽅法</div>
                    <div className="desc">独家题源，排除重题⼲扰</div>
                    <div className="desc">模考报告提供具体考点分析，明确提升 ⽅向</div>
                  </div>
                  <div className="item m-r-1-5 m-l-1-5" style={{ height: 250 }}>
                    <Assets className="sun" name="sun_red" />
                    <div className="title" style={{ color: '#FFB676' }}>
                      机经服务<span className="sub">></span>
                    </div>
                    <div className="desc">⾼效整理：梳理逻辑结构，⽆“反吞 噬”⻛险</div>
                    <div className="desc">轻松获取：⾃动更新⾄邮箱代替⼿动 领取</div>
                    <div className="desc">随时查阅：⼿机查看、在线浏览、在 线做题</div>
                  </div>
                  <div className="item m-l-1-5" style={{ height: 185 }}>
                    <Assets className="sun" name="sun_yello" />
                    <div className="title" style={{ color: '#F36565' }}>
                      VIP服务<span className="sub">></span>
                    </div>
                    <div className="desc">⾃由组卷，练你想练</div>
                    <div className="desc">独家解析，专业报告</div>
                    <div className="desc">提问特权，1VS1答疑</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <Carousel autoplay>
          {activity.map((row) => {
            return <div className="block block-4" style={{ backgroundImage: row.image }} onClick={() => {
              this.location(row.link);
            }} />;
          })}
        </Carousel>
        <div className="block block-5">
          <div className="grid">
            {evaluation.map((row) => {
              return <div className="grid-item">
                <div className="item">
                  <div className="item-header">
                    <Assets src={row.avatar} />
                    <div className="name">{row.nickname}</div>
                    <div className="date">{formatDate(row.date, 'yyyy年mm月dd日')}</div>
                  </div>
                  <div className="item-body">
                    {row.content}
                  </div>
                </div>
              </div>;
            })}
          </div>
        </div>
        <div className="block block-6">
          <div className="body">
            <div className="m-title">发展历程</div>
            <div className="step-list">
              <div className="step">
                <div className="title">
                  <Assets name="dot1" />
                  2012
                </div>
                <div className="desc">“OG12语法千行”首次与大家见面，下载量过万，成为当年最热门的备考资料。</div>
              </div>
              <div className="step">
                <div className="title">
                  <Assets name="dot2" />
                  2015
                </div>
                <div className="desc">
                  正式成立“广州多少教育咨询有限公司”，致力于帮助GMAT考生花更少的时间，取得更高的成绩，"Waste Less, Learn
                  More." 同时发行“PREP0708语法千行”、“GMAT数学千行”。
                </div>
              </div>
              <div className="step">
                <div className="title">
                  <Assets name="dot3" />
                  2019
                </div>
                <div className="desc">
                  发行“千行GMAT长难句”； 每4位GMAT考生中有3位使用“千行资料”； “千行”网站上线，我们希望为您做得更多。
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="block block-7">
          <div className="body">
            <div className="step-list">
              <div className="step">
                <div className="title">工作机会</div>
                <Assets name="logo2" />
              </div>
              <div className="step" style={{ paddingLeft: 80 }}>
                <div className="title">联系我们</div>
                <div className="desc">{contact.phone}</div>
                <div className="desc">{contact.email}</div>
                <div className="desc">{contact.wechat}</div>
              </div>
              <div className="step" style={{ paddingLeft: 140 }}>
                <div className="title">关注我们</div>
                <div className="qrcode">
                  <Assets src={contact.wechatImage} />
                </div>
              </div>
            </div>
          </div>
        </div>
        <Footer />
      </div>
    );
  }
}