import React, { Component } from 'react';
import './index.less';
import Assets from '@src/components/Assets';
import { formatMoney } from '@src/services/Tools';
import Modal from '../Modal';
import Tabs from '../Tabs';
import { SpecialRadioGroup } from '../Radio';
import Invite from '../Invite';
import Button from '../Button';
import { Main } from '../../stores/main';
import { Order } from '../../stores/order';
import { ServiceParamMap } from '../../../Constant';

export default class extends Component {
  constructor(props) {
    super(props);
    this.state = { tab: '2', pay: '', select: null, auth: true };
    Main.getService('vip')
      .then(result => {
        result.package = result.package.map((row, index) => {
          row.label = `${row.title}: ¥${formatMoney(row.price)}`;
          row.value = ServiceParamMap.vip[index].value;
          return row;
        });
        this.setState({ service: result });
      });
  }

  select(key) {
    Order.speedPay().then(result => {
      this.setState({ order: result });
    });
    this.setState({ select: key });
  }

  render() {
    const { show, onClose } = this.props;
    const { tab } = this.state;
    return (
      <Modal className="vip-renew-modal" show={show} width={630} title="VIP续期" onClose={onClose}>
        <div className="vip-renew-wrapper">
          <Tabs
            border
            size="small"
            active={tab}
            width={80}
            tabs={[{ key: '1', title: '购买' }, { key: '2', title: '免费领取' }]}
            onChange={key => this.setState({ tab: key })}
          />
          {this[`renderTab${tab}`]()}
        </div>
      </Modal>
    );
  }

  renderTab1() {
    const { pay, select, service = {}, order } = this.state;
    return (
      <div className="tab-1-layout">
        <div className="select-layout">
          <SpecialRadioGroup
            list={service.package || []}
            value={select}
            width={150}
            space={10}
            onChange={key => this.select(key)}
          />
        </div>
        {order && <div className="pay-layout">
          <Tabs
            border
            size="small"
            active={pay}
            width={80}
            tabs={[{ key: 'alipay', title: '支付宝' }, { key: 'wechatpay', title: '微信' }]}
            render={item => <Assets name={item.key} />}
            onChange={key => this.setState({ pay: key })}
          />
          <div className="qrcode">
            <Assets name="qrcode" />
          </div>
          <div className="t">请使用手机微信或支付宝扫码付款</div>
          <div className="t">支付金额: ¥ {order.money}</div>
        </div>}
      </div>
    );
  }

  renderTab2() {
    const { data, onReal, onPrepare } = this.props;
    return (
      <div className="tab-2-layout">
        <div className="list">
          <div className="item">
            {data.bindReal && <span className="over">已完成</span>}
            <Assets className="icon" name="realname2" />
            <div className="t">
              <Assets name="gift" />
              6个月
            </div>
            <Button size="small" radius disabled={data.bindReal} onClick={() => {
              onReal();
            }}>
              实名认证
            </Button>
          </div>
          <div className="item">
            <Assets className="icon" name="invite" />
            <div className="t">
              <Assets name="gift" />
              7天/每位好友
            </div>
            <Button size="small" radius>
              邀请好友
            </Button>
          </div>
          <div className="item">
            {data.bindPrepare && <span className="over">已完成</span>}
            <Assets className="icon" name="information2" />
            <div className="t">
              <Assets name="gift" />
              1个月
            </div>
            <Button size="small" radius disabled={data.bindPrepare} onClick={() => {
              onPrepare();
            }}>
              完善信息
            </Button>
          </div>
        </div>
        <Invite data={data} />
      </div>
    );
  }
}