import React from 'react';
import './index.less';
import { Tabs } from 'antd-mobile';
import Page from '@src/containers/Page';
import Money from '../../../components/Money';
import Button from '../../../components/Button';
import { FAQItem, CommentItem } from '../../../components/Item';
import { Course } from '../../../stores/course';
import { Order } from '../../../stores/order';
import Icon from '../../../components/Icon';

export default class extends Page {
  initState() {
    return { tab: 'serviceContent', number: 1 };
  }

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

  changeNumber(number) {
    const { data } = this.state;
    const price = data.price * number;
    this.setState({ number, price });
  }

  buy() {
    const { number } = this.state;
    Order.speedPay({ productType: 'course', productId: this.params.id, number });
  }

  renderText() {
    const { tab, data } = this.state;
    let content;
    switch (tab) {
      case 'serviceContent':
      case 'crowdContent':
      case 'processContent':
        content = <div dangerouslySetInnerHTML={{ __html: data[tab] }} />;
        break;
      case 'faq':
        content = <div>{(data.faqs || []).map(row => <FAQItem data={row} />)}</div>;
        break;
      case 'comment':
        content = <div>{(data.comments || []).map(row => <CommentItem data={row} />)}</div>;
        break;
      default:
        break;
    }
    return content;
  }

  renderView() {
    const { data = {}, tab, number, price } = this.state;
    return (
      <div>
        <div className="b-g" style={{ backgroundImage: `url(${data.cover})` }}>
          <div className="title">{data.title}</div>
        </div>
        {/* <div className="tip">访问{PcUrl}/course/detail/{data.id}，试听该课程</div> */}
        <div className="detail">
          <Tabs
            page={tab}
            tabs={[
              { title: '服务介绍', key: 'serviceContent' },
              { title: '适合人群', key: 'crowdContent' },
              { title: '授课流程', key: 'processContent' },
              { title: 'FAQs', key: 'faq' },
              { title: '用户评价', key: 'comment' },
            ]}
            onChange={(value) => {
              this.setState({ tab: value.key });
            }}
          />
          {this.renderText()}
        </div>
        <div className="fixed">
          <div className="action">
            <div className="minus" onClick={() => this.changeNumber(number === 1 ? number : number - 1)}>
              <Icon type="minus" />
            </div>
            <div className="num">{number}</div>
            <div className="add" onClick={() => this.changeNumber(number + 1)}>
              <Icon type="plus" />
            </div>
          </div>
          <div className="fee">
            总额: <Money value={price} size="lager" />
          </div>
          <Button width={110} className="f-r" radius onClick={() => {
            this.buy();
          }}>
            立即购买
          </Button>
        </div>
      </div>
    );
  }
}