import React, { Component } from 'react';
import './index.less';
import Assets from '@src/components/Assets';
import Modal from '../Modal';
import Tabs from '../Tabs';
import { SpecialRadioGroup } from '../Radio';
import Invite from '../Invite';
import Button from '../Button';

export default class extends Component {
  constructor(props) {
    super(props);
    this.state = { tab: '2', pay: 'alipay', select: '1', auth: true };
  }

  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 } = this.state;
    return (
      <div className="tab-1-layout">
        <div className="select-layout">
          <SpecialRadioGroup
            list={[
              { label: '1个月: ¥ 9999', value: '1' },
              { label: '3个月: ¥ 9999', value: '2' },
              { label: '3个月: ¥ 9999', value: '3' },
            ]}
            value={select}
            width={150}
            space={10}
            onChange={key => this.setState({ select: key })}
          />
        </div>
        <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">支付金额: ¥ 8888.88</div>
        </div>
      </div>
    );
  }

  renderTab2() {
    const { auth } = this.state;
    return (
      <div className="tab-2-layout">
        <div className="list">
          <div className="item">
            {auth && <span className="over">已完成</span>}
            <Assets className="icon" name="realname2" />
            <div className="t">
              <Assets name="gift" />
              6个月
            </div>
            <Button size="small" radius disabled={auth}>
              实名认证
            </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">
            <Assets className="icon" name="information2" />
            <div className="t">
              <Assets name="gift" />
              1个月
            </div>
            <Button size="small" radius>
              完善信息
            </Button>
          </div>
        </div>
        {auth && <Invite />}
      </div>
    );
  }
}