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,
    }
  }

  componentDidMount() {}

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

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

  // 确定购买
  toBuy = () => {
    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)
          : 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) => {
    const courseId = getParam("id")
    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)
        }
      })
  }

  // 特价购买全集
  toBuyAll = (vcourseId) => {
    if (Number(this.props.isPdd) === 1) {
      this.props.history.push(`/order?id=${this.props.courseId}`, { group: 1 })
    } else {
      let cidArr = JSON.stringify([Number(vcourseId)])
      http
        .get(`${API["base-api"]}/m/cart/addtopreorder/${cidArr}`)
        .then((res) => {
          if (res.data.errno === 0) {
            this.props.history.push("/order?id=" + res.data.data[0], {
              simple: 1,
            })
          } else {
            Toast.info(res.data.msg, 2)
          }
        })
    }
  }
  // 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}`)
  }

  toLearn = (vcourseId, videoID) => {
    this.props.boxHide(false)
    this.props.history.push(`/play/video?id=${vcourseId}&video_id=${videoID}`)
  }

  // 关闭弹窗
  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
    // console.log(this.props);
    const videoID = this.props.data.video_id || this.props.data.id
    return (
      <div className="popup-box">
        {singleType === 2 && (
          <div className="content payment-success">
            <div className="header">
              <i className="iconfont icondanseshixintubiao-5"></i>
              <span>购买成功</span>
            </div>
            <div className="dec">
              · 3天内购买全集，可直接抵扣该集费用，{this.props.nowPrice}元购买。
            </div>
            <div className="dec">
              · 超过3天，按照未购集数/全部集数等比例计费，
              {this.props.laterPrice}元购买全集。
            </div>
            <span
              onClick={() => this.toLearn(this.props.vcourseId, videoID)}
              className="btn btn-18B4ED"
            >
              开始学习
            </span>
            <div
              className="btn btn-FF4000"
              onClick={() => {
                this.toBuyAll(this.props.courseId)
              }}
            >
              ￥{this.props.nowPrice}购买全集
            </div>
          </div>
        )}
        {singleType === 3 && (
          <div className="content zero">
            <div className="header">
              <i className="iconfont icondanseshixintubiao-5"></i>
              <span>购买成功</span>
            </div>
            <div className="dec">· 恭喜您获得0元拼团购买剩余课时的机会。</div>
            <div className="btn btn-FF4000" onClick={this.zerogroupBuy}>
              0元参团
            </div>
          </div>
        )}
        {singleType === 4 && (
          <div className="content zero">
            <div className="header">
              <i className="iconfont icondanseshixintubiao-5"></i>
              <span>购买成功</span>
            </div>
            <div className="dec">· 恭喜您获得0元购买剩余课时的机会。</div>
            <div className="btn btn-FF4000" onClick={this.zerobuyReceive}>
              0元购
            </div>
          </div>
        )}
        {singleType === 6 && (
          <div className="content zero">
            <div className="header">
              <i className="iconfont icondanseshixintubiao-5"></i>
              <span>购买成功</span>
            </div>
            {/*<Link to={`/play/video?id=${this.props.vcourseId}&video_id=${videoID}`} className='btn btn-18B4ED'>去学习</Link>*/}
            <span
              onClick={() => this.toLearn(this.props.vcourseId, videoID)}
              className="btn btn-18B4ED"
            >
              去学习
            </span>
          </div>
        )}
        {singleType === 7 && (
          <div className="content group">
            <div className="header">
              <i className="iconfont icondanseshixintubiao-5"></i>
              <span>参团成功</span>
            </div>
            <div className="group-img">
              <img src={this.props.user.data.avatar} alt="" />
              <img
                src="https://cdn.julyedu.com/images/weekend/train7/ellipsis.png"
                alt=""
              />
              <img
                src="https://cdn.julyedu.com/images/weekend/train7/ellipsis.png"
                alt=""
              />
            </div>
            <div className="btn-l btn-FF4000" onClick={this.toGroup}>
              剩余{String(this.state.hour).padStart(2, 0)}：
              {String(this.state.min).padStart(2, 0)}：
              {String(this.state.sec).padStart(2, 0)}
              邀请好友参团
            </div>
          </div>
        )}
        <i
          onClick={this.colse}
          className={"iconfont iconiconfront-2 close"}
        ></i>
      </div>
    )
  }
}

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