import React from 'react';
import './index.less';
import Assets from '@src/components/Assets';
import Page from '@src/containers/Page';
import { getMap } from '@src/services/Tools';
import Footer from '../../../components/Footer';
import { FaqModal, FinishModal } from '../../../components/OtherModal';
import { CommentFalls, AnswerCarousel, Consultation, Contact } from '../../../components/Other';
import Button from '../../../components/Button';
import { User } from '../../../stores/user';
import { Main } from '../../../stores/main';
import { Course } from '../../../stores/course';
import { ServiceKey, ServiceParamMap } from '../../../../Constant';
import { Order } from '../../../stores/order';
import Video from '../../../components/Video';

export default class extends Page {
  initState() {
    return {};
  }

  initData() {
    Main.getCourseIndex()
      .then(result => {
        this.setState({ courseIndex: result });
      });
    Main.getBase()
      .then(result => {
        this.setState({ base: result });
      });
    Course.listPackage({ isSpecial: true, page: 1, size: 3 })
      .then(result => {
        this.setState({ packages: result.list || [] });
      });
    Main.listFaq({ page: 1, size: 100, channel: 'course-index' }).then(result => {
      this.setState({ faqs: result.list });
    });
    Main.listComment({ page: 1, size: 100, channel: 'course-index' }).then(result => {
      this.setState({ comments: result.list });
    });
  }

  renderView() {
    const { courseIndex = {}, base = {}, packages = [], faqs = [], comments = [], showFaq, faq = {}, showFinish } = this.state;
    return (
      <div>
        <div className="block-1">
          <div className="body">
            <Assets name="course_main_banner" />
            <div className="btn-list">
              <Button width={100} size="lager" onClick={() => linkTo('/course/online?tab=package')}>
                查看套餐
              </Button>
              <Button className="t-4" width={100} theme="default" size="lager" onClick={() => linkTo('/course/online?tab=single')}>
                试听课程
              </Button>
            </div>
          </div>
        </div>
        <div className="block-2">
          <div className="main-title">找到你的Style</div>
          <div className="video-list">
            <div className="video-div">
              <Video src={courseIndex.onlineVideo || '/1.mp4'} width={580} height={360} hideAction hideProgress />
              <div className="name" onClick={() => linkTo('/course/online')}>在线课程 ></div>
            </div>
            <div className="video-div">
              <Video src={courseIndex.vsVideo || '/1.mp4'} width={580} height={360} hideAction hideProgress />
              <div className="name" onClick={() => linkTo('/course/vs')}>1v1私教 ></div>
            </div>
          </div>
          <div className="class-list">
            {packages.map(data => {
              const originMoney = data.courses.reduce((a, y) => a + y.price, 0);
              const novice = data.courses.filter(row => row.crowd !== 'novice').length === 0;
              return <div className="class-item">
                {novice && <Assets width={55} height={52} className="new" name="noviciate" />}
                <div className="t-s-22 t-4 m-b-5 f-w-b"><a href={`/course/package/detail/${data.id}`}>{data.title}</a></div>
                <div className="t-8 m-b-1">{data.description}</div>
                <div className="t-1 t-s-12">包含课程</div>
                <div className="m-b-5">
                  {data.courses.map((course => {
                    return <div className="m-b-1 m-r-5 t-9 t-s-12 d-i-b b-c-2 p-5">{course.title}（{course.noNumber}课时）</div>;
                  }))}
                </div>
                <div className="t-1 t-s-12">配套服务</div>
                <div className="m-b-5">
                  <div className="m-b-1 m-r-5 t-9 t-s-12 d-i-b b-c-2 p-5">预习作业</div>
                  <div className="m-b-1 m-r-5 t-9 t-s-12 d-i-b b-c-2 p-5">课后答题</div>
                </div>
                <div className="t-1 t-s-12">赠送服务</div>
                <div className="m-b-2">
                  {data.gift &&
                    ServiceKey.map(row => {
                      if (!data.gift[row.value]) return null;
                      const list = ServiceParamMap[row.value];
                      if (list) {
                        const map = getMap(list, 'value', 'label');
                        return <div className="m-b-1 m-r-5 t-9 t-s-12 d-i-b b-c-2 p-5">{row.label}×{map[data.gift[row.value]]}</div>;
                      }
                      return <div className="m-b-1 m-r-5 t-9 t-s-12 d-i-b b-c-2 p-5">{row.label}×{data.gift[row.value]}</div>;
                    })}
                </div>
                <div className="t-8">
                  总价值: <span className="t-d-l-t">¥{originMoney}</span>
                </div>
                <div className="t-1 t-s-18 f-w-b m-b-1">套餐价: ¥{data.price}</div>
                <div className="m-b-5">
                  <Button size="lager" onClick={() => User.needLogin().then(() => Order.addCheckout({ productType: 'course_package', productId: data.id }).then(() => linkTo('/cart')))}>立即购买</Button>
                </div>
              </div>;
            })}
          </div>
        </div>
        <Consultation data={base.contact} />
        <div className="block-4">
          <div className="main-title">You will always find the answers</div>
          <Assets name="" />
          <div className="list">
            <div className="item">
              <div className="t-1 t-s-20 m-b-2">
                <Assets className="m-r-5" name="self_paced" /> Self-Paced
              </div>
              <div className="t-8">随时随地学习；不限听课次数；支持停课申请。</div>
            </div>
            <div className="item">
              <div className="t-1 t-s-20 m-b-2">
                <Assets className="m-r-5" name="teacher" /> 实力导师
              </div>
              <div className="t-8">从业8年，考取700+成绩10次。</div>
              <div className="t-4 ">
                <a className="link d-i-b" href="/course/experience" target="_blank">查看成绩单 ></a>
              </div>
            </div>
            <div className="item">
              <div className="t-1 t-s-20 m-b-2">
                <Assets className="m-r-5" name="excitation" /> 激励机制
              </div>
              <div className="t-8">保持听课频率，赠送课程时效。</div>
            </div>
          </div>
        </div>
        <CommentFalls list={comments} />
        <AnswerCarousel list={faqs} onFaq={() => User.needLogin().then(() => this.setState({ showFaq: true, faq: { channel: 'course-index' } }))} />
        <Contact data={base.contact} />
        <Footer />
        <FaqModal show={showFaq} defaultData={faq} onCancel={() => this.setState({ showFaq: false, faq: {} })} onConfirm={() => this.setState({ showFaq: false, faq: {}, showFinish: true })} />
        <FinishModal
          show={showFinish}
          onConfirm={() => this.setState({ showFinish: false })}
        />
      </div >
    );
  }
}