/*
 * @Description: 这是输入mobile和code页面，可用于登录、绑定
 * @Author: zhoupeng
 * @Date: 2020-04-22 15:29:53
 * @LastEditTime: 2020-07-31 14:48:16
 */
import { goIndex } from '../common/route';

import React, { Component } from 'react';
import { connect } from 'react-redux';

import router from 'umi/router';
import styles from './index.less';

import { Toast } from 'antd-mobile';
import { getQueryVariableBy } from '../../../utils/helper';

const result = {
  success: {
    img: require('../assets/pay/success.png'),
    text: '支付成功！',
    payText: '完成',
  },
  fail: {
    img: require('../assets/pay/fail.png'),
    text: '支付失败！',
    payText: '继续支付',
  },
};

const NUM = 5;
@connect(({}) => ({}))
class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      resultType: 'success', //success、 fail
      num: NUM,
      isNewUser: false,
      payData: {},
    };
    this.timer = null;
  }

  componentDidMount = () => {
    this.initPayData();
    const saveUrl = window.location.href;
    console.info('-------------------/ckuh5/index', saveUrl);
    var result = getQueryVariableBy(saveUrl, 'payResult');
    console.info('-------------------/ckuh5/index', result);
    //是否为注册
    const isNewUser = window.sessionStorage.getItem('newUser');

    this.setState({
      resultType: result ? result : 'success',
      isNewUser: isNewUser && isNewUser === 'true' ? true : false,
    });

    this.startTime();
  };

  componentWillUnmount = () => {
    Toast.hide();
    window.sessionStorage.setItem('newUser', false);
    //存储用户信息
    this.timer && clearInterval(this.timer);
  };

  //初始化支付信息
  initPayData = () => {
    var payData = window.sessionStorage.getItem('payInfo');

    if (payData) {
      const obj = JSON.parse(payData);
      this.setState({
        payData: obj,
      });
    }
  };

  //开始计时
  startTime = () => {
    this.setState({
      canTouch: false,
    });

    this.timer = setInterval(() => {
      const { num } = this.state;

      if (num <= 1) {
        //跳转
        const { resultType, isNewUser } = this.state;
        if (resultType === 'success') {
          if (isNewUser) {
            //goIndex();
            router.replace('/ckuh5/index');
          } else {
            goIndex();
          }
        }

        this.timer && clearInterval(this.timer);
        this.timer = null;
      }
      this.setState({
        num: num - 1,
      });
    }, 1000);
  };

  //跳转页面
  goPage = () => {
    const { resultType, isNewUser } = this.state;
    if (resultType === 'fail') {
      router.replace('pay');
    } else {
      if (isNewUser) {
        //goIndex();
        router.replace('/ckuh5/index');
      } else {
        router.replace('/ckuh5/index');
        //goIndex();
      }
    }
  };

  render() {
    const { resultType, num, isNewUser, payData } = this.state;
    const obj = result[resultType];
    return (
      <div className={styles.pay_result}>
        <div className={styles.img_box}>
          {obj && obj.img ? <img className={styles.pay_result} src={obj.img} /> : null}
        </div>

        <div className={styles.business_text}>
          {payData && payData.title ? payData.title : ''}-
          {payData && payData.detail ? payData.detail : ''}
        </div>
        <div className={styles.business_label}>{obj && obj.text ? obj.text : ''}</div>
        <div className={styles.business_little_label}>
          {resultType === 'fail' ? '' : `${num}秒后进入${isNewUser ? '首页' : '首页'}`}
        </div>
        <div
          className={styles.button_box}
          onClick={() => {
            this.goPage();
          }}
        >
          <div>{obj && obj.payText ? obj.payText : ''}</div>
        </div>
      </div>
    );
  }
}

export default Index;