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';
import { UserUrl } 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() {

  }

  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: 'teacherContent' },
              { title: '基本参数', key: 'baseContent' },
              { title: '授课重点', key: 'pointContent' },
              { 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>
    );
  }
}