import React from 'react';
import './index.less';
import Page from '@src/containers/Page';
import Assets from '@src/components/Assets';
import { getMap, formatDate } from '@src/services/Tools';
import Checkbox from '../../../components/CheckBox';
import Button from '../../../components/Button';
import { My } from '../../../stores/my';
import { ServiceKey } from '../../../../Constant';

const ServiceKeyMap = getMap(ServiceKey, 'value', 'label');

export default class extends Page {
  initData() {
    const { id } = this.params;
    My.getRecord(id)
      .then(result => {
        this.setState(result);
      });
  }

  submit() {
    My.useRecord(this.params.id)
      .then();
  }

  renderView() {
    const { productType } = this.state;
    if (productType === 'service') {
      return this.renderService();
    }
    return this.renderCourse();
  }

  renderCourse() {
    const { course = {}, endTime } = this.state;
    if (!endTime) return null;
    return (
      <div>
        <div className="icon">
          <Assets name="img3" />
        </div>
        <div className="title">您正在开通“{course.data}”</div>
        <div className="tip">有效期至：{formatDate(endTime, 'YYYY-MM-DD')}</div>
        <Button block radius onClick={() => {
          this.submit();
        }}>
          立即开通
        </Button>
        <div className="no" onClick={() => {
          goBack();
        }}>暂不开通</div>
      </div>
    );
  }

  renderService() {
    const { service, endTime } = this.state;
    if (!endTime) return null;
    return (
      <div>
        <div className="icon">
          <Assets name="img3" />
        </div>
        <div className="title">您正在开通“{ServiceKeyMap[service]}”服务</div>
        <div className="tip">有效期至：{formatDate(endTime, 'YYYY-MM-DD')}</div>
        {service === 'textbook' && <div className="check">
          <Checkbox checked={!!this.state.checked} onClick={() => {
            this.setState({ checked: !this.state.checked });
          }} />
          <span>邮箱订阅机经</span>
        </div>}

        <Button block radius onClick={() => {
          this.submit();
        }}>
          立即开通
        </Button>
        <div className="no" onClick={() => {
          goBack();
        }}>暂不开通</div>
      </div>
    );
  }
}