import React, { Component } from "react"
import "./index.scss"
import { getParam, http, browser } from "src/utils"
import { Toast } from "antd-mobile"
import { withRouter } from "react-router-dom"
import { compose } from "redux"
import { connect } from "react-redux"
import {
  differenceInHours,
  differenceInMinutes,
  differenceInSeconds,
} from "date-fns"

class Single extends Component {
  constructor(props) {
    super(props)
    this.state = {
      // status: 1,
      orderId: "",
      nowPrice: "",
      laterPrice: "",
      hour: "",
      min: "",
      sec: "",
      endTime: "",
      groupOrderId: "",
      payType: "0", // 1支付宝 0微信
      // singleBox: false,
      showSingleBox: false,
    }
  }

  componentDidMount() {
    // if (getParam('is_class') === 1 || getParam('weixinpay')) {
    //     console.log(0);
    //     this.payCallback()
    // }
    // if (browser.isWeixin) {
    //     this.isweixinPay()
    // }
  }

  componentWillReceiveProps(nextProps, nextContext) {
    // console.log(nextProps);
    // this.setState({
    //     singleBox: nextProps.singleBox
    // })
  }

  // 选择支付方式
  check = (type) => {
    this.setState({
      payType: type,
    })
  }

  // 确定购买
  toBuy = () => {
    const { courseId } = this.props
    const videoID = this.props.data.video_id || this.props.data.id
    http.get(`${API.home}/sys/createClassOrder/${videoID}`).then((res) => {
      if (res.data.code === 200) {
        this.setState({
          orderId: res.data.data.order_id,
        })
        this.state.payType === "1"
          ? this.alipayPay(res.data.data.order_id, courseId)
          : this.weixinPay(res.data.data.order_id)
      } else {
        Toast.info(res.data.msg, 2)
      }
    })
  }
  // 微信支付
  weixinPay = (orderId) => {
    // 微信内部-支付
    if (browser.isWeixin) {
      window.location.href =
        "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx23dac6775ac82877&redirect_uri=" +
        encodeURIComponent(
          window.location.href + "&aa=bb&oid=" + orderId
        ).toLowerCase() +
        "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect"
    } else {
      // 微信外部-支付
      http
        .get(`${API["base-api"]}/pay/wxpay/wap_charge/oid/${orderId}`)
        .then((res) => {
          if (res.data.errno === 0) {
            window.location.href =
              res.data.data.url +
              "&redirect_url=" +
              encodeURIComponent(
                window.location.href + "&weixinpay=1&oid=" + orderId
              ).toLowerCase()
          } else {
            Toast.info(res.data.msg, 2)
          }
        })
    }
  }
  // 支付宝支付
  alipayPay = (orderId, courseId) => {
    http
      .get(`${API["base-api"]}/pay/alipay/wap_charge_new/oid/${orderId}`)
      .then((res) => {
        if (res.data.errno === 0) {
          window.location = res.data.data.url
          courseId && window.localStorage.setItem("payCourse", courseId)
        } else {
          Toast.info(res.data.msg, 2)
        }
      })
  }

  // 微信内部支付
  isweixinPay = () => {
    let _this = this
    let weixin_code = getParam("code")
    if (weixin_code) {
      if (!getParam("oid")) {
        return
      } else {
        http
          .get(
            `${API["base-api"]}/pay/wxpay/pub_charge/oid/${getParam(
              "oid"
            )}/code/${weixin_code}`
          )
          .then((res) => {
            if (res.data.errno === 0) {
              const data = res.data.data

              function onBridgeReady() {
                WeixinJSBridge.invoke(
                  "getBrandWCPayRequest",
                  {
                    appId: data.appId, //公众号名称，由商户传入
                    timeStamp: data.timeStamp, //时间戳，自1970年以来的秒数
                    nonceStr: data.nonceStr, //随机串
                    package: data.package,
                    signType: data.signType, //微信签名方式：
                    paySign: data.paySign, //微信签名
                  },
                  function (res) {
                    if (res.err_msg === "get_brand_wcpay_request:ok") {
                      Toast.info("支付成功", 2)
                      _this.intervalPayStatus = setInterval(function () {
                        http
                          .get(
                            `${API["base-api"]}/m/orderState/oid/${getParam(
                              "oid"
                            )}`
                          )
                          .then((res) => {
                            if (res.data.errno === 401) {
                              clearInterval(_this.intervalPayStatus)
                              _this.intervalPayStatus = null
                              // 获取课程类型
                              http
                                .get(
                                  `${
                                    API["base-api"]
                                  }/class_order_status/${getParam("oid")}`
                                )
                                .then((res) => {
                                  if (Number(res.data.data.errno) === 200) {
                                    // 正常购买单集成功
                                    this.setState({
                                      status: 6,
                                      showSingleBox: true,
                                    })
                                  } else if (
                                    Number(res.data.data.errno) === 201
                                  ) {
                                    // 0元参团
                                    this.setState({
                                      status: 4,
                                      showSingleBox: true,
                                    })
                                  } else if (
                                    Number(res.data.data.errno) === 202
                                  ) {
                                    // 0元购
                                    this.setState({
                                      status: 3,
                                      showSingleBox: true,
                                    })
                                  } else if (
                                    Number(res.data.data.errno) === 203
                                  ) {
                                    // 三天内特价
                                    this.setState({
                                      nowPrice: res.data.data.data.now_price,
                                      laterPrice:
                                        res.data.data.data
                                          .three_day_later_price,
                                      status: 2,
                                      showSingleBox: true,
                                    })
                                  } else {
                                    Toast.info(res.data.data.msg, 2)
                                  }
                                })
                            }
                          })
                      }, 1000)
                    } else {
                      alert("支付失败")
                    }
                  }
                )
              }

              if (typeof WeixinJSBridge == "undefined") {
                if (document.addEventListener) {
                  document.addEventListener(
                    "WeixinJSBridgeReady",
                    onBridgeReady,
                    false
                  )
                } else if (document.attachEvent) {
                  document.attachEvent("WeixinJSBridgeReady", onBridgeReady)
                  document.attachEvent("onWeixinJSBridgeReady", onBridgeReady)
                }
              } else {
                onBridgeReady()
              }
            } else {
              Toast.info(res.data.msg, 2)
            }
          })
      }
    }
  }

  // 支付完成之后获取状态
  payCallback = () => {
    const _this = this
    if (!getParam("oid")) {
      return
    } else {
      _this.intervalPayStatus = setInterval(function () {
        http
          .get(`${API["base-api"]}/m/orderState/oid/${getParam("oid")}`)
          .then((res) => {
            if (res.data.errno === 401) {
              clearInterval(_this.intervalPayStatus)
              _this.intervalPayStatus = null
              // 获取课程类型
              http
                .get(`${API["base-api"]}/class_order_status/${getParam("oid")}`)
                .then((res) => {
                  if (Number(res.data.data.errno) === 200) {
                    // 正常购买单集成功
                    this.setState({
                      status: 6,
                      showSingleBox: true,
                    })
                  } else if (Number(res.data.data.errno) === 201) {
                    // 0元参团
                    this.setState({
                      status: 4,
                      showSingleBox: true,
                    })
                  } else if (Number(res.data.data.errno) === 202) {
                    // 0元购
                    this.setState({
                      status: 3,
                      showSingleBox: true,
                    })
                  } else if (Number(res.data.data.errno) === 203) {
                    // 三天内特价
                    this.setState({
                      nowPrice: res.data.data.data.now_price,
                      laterPrice: res.data.data.data.three_day_later_price,
                      status: 2,
                      showSingleBox: true,
                    })
                  } else {
                    Toast.info(res.data.data.msg, 2)
                  }
                })
            }
          })
      }, 1000)
    }
  }

  // 特价购买全集
  toBuyAll = () => {}
  // 0元购买全集
  zerobuyReceive = () => {
    Toast.success("购买全集成功", 3)
    this.colse()
  }
  // 0元参团
  zerogroupBuy = () => {
    this.getOrderId()
  }

  // 获取订单号-0元参团
  getOrderId = () => {
    let data = {
      course_id: getParam("id"),
    }
    http.post(`${API["base-api"]}/pdd/sys`, data).then((res) => {
      if (res.data.errno === 0) {
        this.setState({
          groupOrderId: res.data.data.order_id,
        })
        this.getOrderStatus(res.data.data.order_id)
      } else {
        Toast.info(res.data.msg, 2)
      }
    })
  }

  // 获取订单状态-0元参团
  getOrderStatus = (id) => {
    http.get(`${API.home}/m/pdd/order_status/${id}`).then((res) => {
      if (res.data.code === 200) {
        this.getTime(res.data.data.pdd_order_id)
      } else {
        Toast.info(res.data.msg, 2)
      }
    })
  }
  // 获取倒计时-0元参团
  getTime = (id) => {
    http.get(`${API.home}/m/pdd_order_end_time/${id}`).then((res) => {
      if (res.data.code === 200) {
        this.setState({
          endTime: res.data.data.end_time,
          status: 7,
        })
      } else {
        Toast.info(res.data.msg, 2)
      }
    })
  }

  // 邀请好友参团
  toGroup = () => {
    this.props.history.push(`/togroup?id=${this.state.groupOrderId}`)
  }

  // 关闭弹窗
  colse = () => {
    this.props.boxHide(false)
    this.setState({
      status: 1,
    })
  }

  render() {
    if (this.state.endTime) {
      let date = this.state.endTime * 1000
      let now = Date.now()
      setInterval(() => {
        date -= 1000
        let s = differenceInSeconds(new Date(date), now) % 60,
          m = differenceInMinutes(new Date(date), now) % 60,
          h = differenceInHours(new Date(date), now) % 24
        this.setState({
          hour: h,
          min: m,
          sec: s,
        })
      }, 1000)
    }
    const { singleType } = this.props
    return (
      singleType === 1 && (
        <div>
          <div className="popup-box">
            <div className="content singleset-payment">
              <div className="price-box">
                <span>实付款：</span>
                <p>{this.props.data.class_price}元</p>
              </div>
              <div className="course-info">
                <p className="text-overflow-1">
                  <span>课程：</span>
                  {this.props.title}
                </p>
                <p className="text-overflow-1">
                  <span>课时：</span>
                  {this.props.data.name}
                </p>
              </div>
              <div className="payment-type">
                <label>支付方式：</label>
                <p onClick={this.check.bind(this, "0")}>
                  <i className="iconfont iconweixinzhifu buy"></i>
                  <span>微信支付</span>
                  <i
                    className={`iconfont icondanseshixintubiao-5 redio ${
                      this.state.payType === "0" ? "redioed" : ""
                    }`}
                  ></i>
                </p>
                {!browser.isWeixin && (
                  <p onClick={this.check.bind(this, "1")}>
                    <i className="iconfont iconalipay"></i>
                    <span>支付宝</span>
                    <i
                      className={`iconfont icondanseshixintubiao-5 redio ${
                        this.state.payType === "1" ? "redioed" : ""
                      }`}
                    ></i>
                  </p>
                )}
              </div>
              <div className="btn btn-18B4ED" onClick={this.toBuy}>
                确认购买
              </div>
            </div>
            <i
              onClick={this.colse}
              className={"iconfont iconiconfront-2 close"}
            ></i>
          </div>
        </div>
      )
    )
  }
}

export default compose(
  connect((state) => ({ user: state.user }), null),
  withRouter
)(Single)