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({ productType: 'service', service: 'vip', param: key }).then(result => {
      this.setState({ order: result });
      this.changePay('alipay');
    });
    this.setState({ select: key });
  }

  changePay(key) {
    const { order } = this.state;
    if (!order) return;
    this.setState({ info: {}, pay: key });
    let handler = null;
    switch (key) {
      case 'wechatpay':
        handler = Order.wechatQr(order.id)
          .then((result) => {
            this.setState({ info: result });
          });
        break;
      case 'alipay':
      default:
        handler = Order.alipayQr(order.id)
          .then((result) => {
            this.setState({ info: result });
          });
    }
    handler.then(() => {
      this.queryPay();
    });
  }

  queryPay() {
    const { order, show } = this.state;
    if (this.time) {
      clearTimeout(this.time);
    }
    this.time = setTimeout(() => {
      Order.query(order.id)
        .then(result => {
          if (result) {
            // 支付成功
            this.setState();
          } else if (show) {
            this.queryPay();
          } else {
            this.setState({ select: null, pay: null, order: null, info: null });
          }
        });
    }, 1000);
  }

  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>
        <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.changePay(key)}
          />
          <div className="qrcode">
            <Assets name="qrcode" />
          </div>
          <div className="t">请使用手机微信或支付宝扫码付款</div>
          {order && <div className="t">支付金额: ¥ {order.money}</div>}
        </div>
      </div>
    );
  }

  renderTab2() {
    const { data, onReal, onPrepare } = this.props;
    const { showInvite } = this.state;
    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" />
              {data.inviteNumber > 0 ? `7天 X ${data.inviteNumber}位好友` : '7天/每位好友'}
            </div>
            <Button size="small" radius onClick={() => {
              this.setState({ showInvite: true });
            }}>
              邀请好友
            </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>
        {showInvite && <Invite data={data} />}
      </div>
    );
  }
}