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 { Main } from '../../../stores/main';
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;
    Main.getPromote().then(result => {
      this.promote = result.vs_list || [];
      Course.get(id).then(data => {
        this.setState({ data });
        this.changeNumber(data.minNumber || 1);
      });
    });
  }

  changeNumber(number) {
    const { data } = this.state;
    let price = data.price * number;
    let max = 0;
    let maxIndex = -1;
    this.promote.forEach((row, i) => {
      if (row.number <= number) {
        if (row.number > max) {
          max = number;
          maxIndex = i;
        }
      }
    });
    if (maxIndex >= 0) {
      price *= this.promote[maxIndex].percent / 100;
    }
    this.setState({ number, price });
  }

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

  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>
    );
  }
}