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 { PcUrl } from '../../../../Constant';

export default class extends Page {
  initState() {
    return { tab: 'teacherContent' };
  }

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

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

  renderText() {
    const { tab, data } = this.state;
    let content;
    switch (tab) {
      case 'teacherContent':
      case 'baseContent':
      case 'pointContent':
        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 } = 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: 'teacherContent' },
              { title: '基本参数', key: 'baseContent' },
              { title: '授课重点', key: 'pointContent' },
              { title: 'FAQs', key: 'faq' },
              { title: '用户评价', key: 'comment' },
            ]}
            onChange={(value) => {
              this.setState({ tab: value.key });
            }}
          />
          {this.renderText()}
        </div>
        <div className="fixed">
          <div className="fee">
            总额: <Money value={data.price} size="lager" />
          </div>
          <Button width={110} className="f-r" radius onClick={() => {
            this.buy();
          }}>
            立即购买
          </Button>
        </div>
      </div>
    );
  }
}