import React from 'react';
import { Link } from 'react-router-dom';
import './index.less';
import Assets from '@src/components/Assets';
import Page from '@src/containers/Page';
import { getMap, formatMoney } 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 { User } from '../../../stores/user';
import { Order } from '../../../stores/order';
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 });
      });
  }

  buy() {
    const { data } = this.state;
    User.needLogin().then(() => {
      Order.speedPay({ productType: 'course_package', productId: data.id }).then(result => {
        User.needPay(result).then(() => {
          linkTo('/my/course');
        });
      });
    });
  }

  add() {
    const { data } = this.state;
    User.needLogin().then(() => {
      Order.addCheckout({ productType: 'course_package', productId: data.id }).then(() => {
        this.setState({ add: true });
      });
    });
  }

  renderView() {
    const { data = {}, base = {}, add } = this.state;
    const hasGift = data.gift && Object.keys(data.gift).length > 0;
    return (
      <div>
        <div className="top content t-8">
          <Link to="/course">千行课堂</Link> > <Link to="/course/online?tab=package">全部套餐</Link> >  <Link to={`/course/package/detail/${data.id}`}>{data.title}</Link> > <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
                className="f-r"
                theme="default"
                radius
                size="lager"
                disabled={data.add || add}
                onClick={() => this.add()}
              >
                <Assets name={data.add || add ? 'add_disabled' : 'add'} />
              </Button>
            </div>
          </div>
          <div className="t-7 t-s-18 f-w-b m-b-1">套餐价: ¥ {formatMoney(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>
          {hasGift && <div className="main-title">赠送服务</div>}
          {hasGift && <div className="list">
            {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 >
    );
  }
}