import React, { Component } from 'react';
import { connect } from 'react-redux';
import 'antd-mobile/dist/antd-mobile.less';
import styles from './index.less';
import wx from 'weixin-js-sdk';
import { Toast } from 'antd-mobile';
import { getPayInfo, checkPayOrder } from '../services/index';

import router from 'umi/router';

const rightImg = require('../assets/pay/right_arrow.png');
const labelIconImg = require('../assets/pay/label_icon.png');
const wechatImg = require('../assets/pay/wechat.png');
const selectImg = require('../assets/pay/select.png');
const payButtonImg = require('../assets/pay/pay_button.png');
const payingImg = require('../assets/pay/paying.png');

@connect(({ pay }) => ({ pay }))
class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      info: {},
    };

    this.timer = null;
    this.num = 0;
  }
  componentDidMount = () => {
    document.title = '确认信息';
    console.log('确认信息 page');

    var objStr = sessionStorage.getItem('payinfo');
    var obj = JSON.parse(objStr);
    this.setState({
      info: obj,
    });
  };

  componentWillUnmount = () => {
    Toast.hide();
    this.num = 0;
    this.timer && clearTimeout(this.timer);
  };

  //支付
  pay = async () => {
    //
    var sessionStorage = window.sessionStorage;
    var objStr = sessionStorage.getItem('payinfo');
    console.log('obj', JSON.parse(objStr));
    var openId = sessionStorage.getItem('openid');
    var obj = JSON.parse(objStr);
    var orderId = obj.orderId ? obj.orderId : '';
    const { rc, msg, data } = await getPayInfo({ orderId, openId });
    //

    //设置loading
    this.num = 0;

    Toast.loading('支付中', 0, null, true);

    console.log('result:', rc, msg, data);
    if (rc === 0) {
      const payLogId = data.payLogId ? data.payLogId : '';
      const _this = this;
      wx.chooseWXPay({
        // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。
        // 但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
        timestamp: data.timestamp,
        // 支付签名随机串，不长于 32 位
        nonceStr: data.nonceStr,
        package: data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
        signType: data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
        paySign: data.sign, // 支付签名
        success: function(res) {
          // 支付成功后的回调函数
          console.log('支付成功');
          //router.push('/dogAppraisals/payresult');
          // _this.checkPay(payLogId);
          _this.timer = setTimeout(() => {
            _this.checkPay(payLogId);
          }, 1000);
        },
        fail: function(res) {
          Toast.hide();
          //Toast.fail('支付失败');
        },
        cancel: function(res) {
          Toast.hide();
          //Toast.fail('支付失败');
        },
        complete: function(res) {
          console.log(res, 'complete');
        },
      });
    } else {
      console.log('error:', rc, msg, data);
    }
  };

  //查询支付结果
  checkPay = async payLogId => {
    console.log('payLogId：', payLogId);
    if (!payLogId) {
      Toast.hide();
      return;
    }

    const { rc, msg, data } = await checkPayOrder({ payLogId });
    console.log('rc:', rc, msg, data);
    Toast.hide();
    if (rc === 0) {
      Toast.success('支付成功');
      router.replace('/dogAppraisals/payresult');
    } else {
      Toast.info(`${msg}`);
    }
  };

  render() {
    const { info } = this.state;
    return (
      <div className={styles.body}>
        <div className={styles.pay_container}>
          <div className={styles.label_container}>
            <div className={styles.title_container}>
              <span>犬主信息</span>
            </div>
            <div className={styles.label_content}>
              <div className={styles.master_info}>
                <div className={styles.info_left}>
                  <div className={styles.info_name_phone}>
                    <span className={styles.info_name}>{info.name ? info.name : ''}</span>
                    <span className={styles.info_phone}>{info.mobile ? info.mobile : ''}</span>
                  </div>
                  <div className={styles.info_address}>{info.address ? info.address : ''}</div>
                </div>
                {/* <div className={styles.info_left}>
                  <div className={styles.info_name_phone}>
                    <span className={styles.info_name}>{'erwtewwterwwwesdfgsdfgsdf'}</span>
                    <span className={styles.info_phone}>{'erwtewwterwwwesdfgsdfgsdf'}</span>
                  </div>
                  <div className={styles.info_address}>
                    {'erwtewwterwwwesdfgsderwtewwterwwwesdfgsdfgsdferwtewwterwwwesdfgsdfgsdffgsdf'}
                  </div>
                </div> */}
                <div className={styles.info_right}></div>
                {/* <img className={styles.info_right} src={rightImg}></img> */}
              </div>
            </div>
          </div>
          <div className={styles.label_container}>
            <div className={styles.title_container}>
              <span>购买信息</span>
            </div>
            <div className={styles.label_content}>
              <div className={styles.buy_info}>
                <img className={styles.info_left} src={labelIconImg}></img>
                <div className={styles.info_right}>
                  <div className={styles.info_name}>【宠爱宝贝】身份鉴定尊享包</div>
                  <div className={styles.info_num}>
                    <span>x1</span>
                  </div>
                  <div className={styles.info_price}>
                    <span>￥399</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div className={styles.label_container}>
            <div className={styles.title_container}>
              <span>支付方式</span>
            </div>
            <div className={styles.label_content}>
              <div className={styles.pay_info}>
                <img className={styles.info_left} src={wechatImg}></img>
                <div className={styles.info_right}>
                  <div className={styles.info_name}>微信支付</div>
                  <img className={styles.info_select} src={selectImg}></img>
                </div>
              </div>
            </div>
          </div>

          <div className={styles.pay_button_content}>
            <img onClick={this.pay} className={styles.pay_button} src={payButtonImg}></img>
          </div>
        </div>
      </div>
    );
  }
}

export default Index;