import React from 'react';
import './index.less';
import Page from '@src/containers/Page';
import Money from '../../../components/Money';
import Button from '../../../components/Button';
import { SpecialRadioGroup } from '../../../components/Radio';
import { Main } from '../../../stores/main';

export default class extends Page {
  initState() {
    return {
      index: 0,
    };
  }

  initData() {
    const { service } = this.params;
    Main.getService(service)
      .then(result => {
        result.package = (result.package || []).map((row, index) => {
          row.label = row.title;
          row.value = index;
          return row;
        });
        this.setState({ data: result });
      });
  }

  buy() {
    const { data, index } = this.state;
    const item = data.package[index] || {};
    console.log(item);
  }

  //   expire_info: '',
  renderView() {
    const { data = {}, index } = this.state;
    const item = data.package[index] || {};
    return (
      <div>
        <div className="b-g" style={{ backgroundImage: `url(${data.image})` }}>
          <div className="title">{item.title}</div>
        </div>
        <div className="detail">
          {data.package.length > 1 && <div className="title">可选套餐</div>}

          {data.package.length > 1 && <SpecialRadioGroup list={data.package} value={index} onChange={(value) => this.setState({ index: value })} />}
          {data.package.length > 1 && <div className="division" />}
          <div className="title">服务介绍</div>
          <h2>服务</h2>
          <p>{item.description} {item.expire_info}</p>
          <h2>退款政策</h2>
          <p>{item.refund_policy}</p>
          <h2>版权说明</h2>
          <p>{item.copyright_nnotes}</p>
        </div>
        <div className="fixed">
          <div className="fee">
            总额: <Money value={item.price} size="lager" />
          </div>
          <Button width={110} className="f-r" radius onClick={() => {
            this.buy();
          }}>
            立即购买
          </Button>
        </div>
      </div>
    );
  }
}