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 { Course } from '../../../stores/course';

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

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

  buy() {

  }

  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">访问{UserUrl}/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 });
            }}
          />
          <div dangerouslySetInnerHTML={{ __html: data[tab] }} />
        </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>
    );
  }
}