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 Button from '../../../components/Button';
import { SingleItem } from '../../../components/Item';
import Footer from '../../../components/Footer';
import { Contact } from '../../../components/Other';
import { Main } from '../../../stores/main';
import { Course } from '../../../stores/course';
import { ServiceKey, ServiceParamMap } from '../../../../Constant';

const serviceIconMap = {
  textbook: 'mokao',
  vip: 'VIP_1',
  qx_cat: 'jijing',
};

export default class extends Page {
  constructor(props) {
    props.size = 10;
    super(props);
  }

  init() {
    Main.getBase()
      .then(result => {
        this.setState({ base: result });
      });
  }

  initData() {
    const { id } = this.params;
    Course.getPackage(id)
      .then(result => {
        this.setState({ data: result });
      });
  }

  renderView() {
    const { data = {}, base = {} } = this.state;
    return (
      <div>
        <div className="top content t-8">
          千行课堂 > 全部套餐 > {data.title} > <span className="t-1">套餐详情</span>
        </div>
        <div className="center content">
          <div className="t-1 t-s-20 m-b-2">
            {data.title}
            <div className="action f-r">
              <Button className="m-r-1" radius size="lager" onClick={() => this.buy()}>
                立即购买
              </Button>
              <Button theme="default" radius size="lager" onClick={() => this.add()}>
                <Assets name="add" />
              </Button>
            </div>
          </div>
          <div className="t-7 t-s-18 f-w-b m-b-1">套餐价: ¥ {data.price}</div>
          <div className="t-1 t-s-16 desc">{data.description}</div>
          <div className="main-title">包含课程</div>
          <div className="list">
            {(data.courses || []).map(item => {
              return <SingleItem noAction data={item} />;
            })}
          </div>
          <div className="main-title">配套服务</div>
          <div className="list">
            <div className="other-item d-i-b">
              <Assets name="" />
            </div>
            <div className="other-item d-i-b">
              <Assets name="" />
            </div>
          </div>
          <div className="main-title">赠送服务</div>
          <div className="list">
            {data.gift &&
              ServiceKey.map(row => {
                if (!data.gift[row.value]) return null;
                const list = ServiceParamMap[row.value];
                const map = getMap(list || [], 'value', 'label');
                return <div className="service-item d-i-b">
                  <Assets name={serviceIconMap[row.value]} />
                  <div className="t t-13 t-s-20 f-w-b">{row.label}</div>
                  <div className="t-13">{list ? map[data.gift[row.value]] : data.gift[row.value]}</div>
                </div>;
              })}
          </div>
        </div>
        <Contact data={base.contact} />
        <Footer />
      </div>
    );
  }
}