import React from 'react';
import './index.less';
import Page from '@src/containers/Page';
import { getMap } from '@src/services/Tools';
import Money from '../../../components/Money';
import Button from '../../../components/Button';
import Tag from '../../../components/Tag';
// import Avatar from '../../../components/Avatar';
import { Course } from '../../../stores/course';
import { Order } from '../../../stores/order';
import { ServiceKey, ServiceParamMap } from '../../../../Constant';

export default class extends Page {
  init() { }

  initData() {
    const { id } = this.params;
    Course.getPackage(id).then(result => {
      result.originPrice = result.courses.reduce((x, y) => x + y, 0);
      this.setState({ data: result });
    });
  }

  buy() {
    Order.speedPay({ productType: 'course_package', productId: this.params.id })
      .then((result) => {
        linkTo(`/pay/${result.id}`);
      });
  }

  renderView() {
    const { data = {} } = this.state;
    return (
      <div>
        <div className="title">{data.title}</div>
        <div className="tags">{data.isNovice > 0 && <Tag size="small">适合新手</Tag>}</div>
        <div className="detail-title">授课老师</div>
        <div className="name">
          {/* <Avatar name="scan1" /> */}
          {(data.courses || []).map(row => {
            return <span>{row.teacher}</span>;
          })}
        </div>
        <div className="detail-title">课程介绍</div>
        <div className="desc">{data.description}</div>
        <div className="detail-title">包含课程</div>
        <div className="detail-tags">
          {(data.courses || []).map(row => {
            return (
              <Tag theme="border">
                {row.title}（{row.noNumber}课时）
              </Tag>
            );
          })}
        </div>
        <div className="detail-title">配套服务</div>
        <div className="detail-tags">
          <Tag theme="border">预习作业</Tag>
          <Tag theme="border">课后答疑</Tag>
        </div>
        <div className="detail-title">赠送服务</div>
        <div className="detail-tags">
          {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 (
                  <Tag theme="border">
                    {row.label}×{map[data.gift[row.value]]}
                  </Tag>
                );
              }
              return (
                <Tag theme="border">
                  {row.label}×{data.gift[row.value]}
                </Tag>
              );
            })}
        </div>
        <div className="fixed">
          <div className="fee">
            <div className="o-m">
              原价: <Money value={data.originPrice} disabled />
            </div>
            <div className="t-m">
              套餐价: <Money value={data.price} size="lager" />
            </div>
          </div>
          <Button
            width={110}
            className="f-r"
            radius
            onClick={() => {
              this.buy();
            }}
          >
            立即购买
          </Button>
        </div>
      </div>
    );
  }
}