import React, { Component } from "react"
import "./index.scss"
import ListHeader from "./../blessingPreheat/listHeader/index"
import { http, getParam } from "src/utils"
import { Toast } from "antd-mobile"
import AddressPopup from "./../blessingPreheat/addressPopup/index"
import { Popup } from "src/common"
import { connect } from "react-redux"

@connect(({ user }) => ({
  uid: user.data.uid || "",
}))
class BlessingGetPrize extends Component {
  popupInstance = null
  constructor(props) {
    super(props)
    this.state = {
      date: "",
      next_date: "",
      name: "",
      is_winning: "", //是否中奖
      is_virtual: 1, // 实物奖品 虚拟奖品
      prize_data: [],
      address: false,
    }
  }

  componentDidMount() {
    const _this = this
    setTimeout(function () {
      const { history, uid } = _this.props
      if (!uid) {
        history.push("/passport")
      } else {
        http
          .get(`${API.home}/sys/lottery_result?id=${getParam("id")}`)
          .then((res) => {
            const { code, msg, data } = res.data
            if (code === 200) {
              _this.setState({
                ...data.info,
                prize_data: data.prize_data.slice(0, 6),
              })
            } else {
              Toast.info(msg)
            }
          })
      }
    }, 300)
  }

  showAddress = (bool) => {
    const { history, uid } = this.props
    const { name } = this.state
    if (bool && !uid) {
      history.push("/passport")
    } else {
      if (bool && !this.popupInstance) {
        this.popupInstance = Popup({
          title: "恭喜您",
          content: (
            <AddressPopup
              tip="填写您的联系方式"
              prize={name}
              handleToHide={() => this.showAddress(false)}
            />
          ),
        })
      } else {
        this.popupInstance.close()
        this.popupInstance = null
      }
    }
  }

  render() {
    const {
      date,
      next_date,
      name,
      is_winning,
      is_virtual,
      prize_data,
    } = this.state
    return (
      <div className="blessing_get_prize">
        <div className="is__get_prize">
          <div className="get_piriz__info">
            <div className="result">{date}中奖结果</div>
            {is_winning === 0 && (
              <div className="no_prize">很遗憾，你未中奖～</div>
            )}
            {is_winning === 1 && is_virtual === 0 && (
              <div className="real__prize">
                <div>恭喜你，已抽中{name}奖品</div>
                <span
                  onClick={() => this.showAddress(true)}
                  className="address"
                >
                  填写收货地址
                </span>
              </div>
            )}
            {is_winning === 1 && is_virtual === 1 && (
              <div className="virtual ">
                <div>恭喜你抽中{name}，</div>
                <div>奖品已存放到你的账户</div>
              </div>
            )}
          </div>
        </div>

        {prize_data && prize_data.length > 0 && (
          <>
            <div className="current_stage">{next_date}</div>
            <ListHeader text="抽奖已开启" styles={{ margin: "16px 0 18px" }} />

            <div className="prize_list_container">
              {prize_data.length > 0 &&
                prize_data.map((item, index) => {
                  return (
                    <div className="prize__item" key={index}>
                      <img
                        className="prize__image"
                        src={item.img}
                        alt={item.name}
                      ></img>
                      <div className="name__num">
                        <span>{item.name}</span>
                        <span>（{`*${item.num}`}）</span>
                      </div>
                    </div>
                  )
                })}
            </div>

            <a href="/blessingPreheat" className="join__button">
              立即参与抽奖
            </a>

            <div className="prize__tip">
              <div className="line"></div>
              <span>中奖小tips</span>
              <div className="line"></div>
            </div>
            <div className="blessing__des">
              积攒的福气值越高，中奖概率越大哦
            </div>
            <a className="to__preheat" href="/invite">
              积攒更多福气值
            </a>
          </>
        )}
        {(!prize_data || prize_data.length === 0) && (
          <div className="active_over_container">
            <p>AI充电节返场已开启</p>
            <p>狂欢不能停~</p>
            <a href="/blessingPreheat" className="to_active">
              立即查看
            </a>
          </div>
        )}
      </div>
    )
  }
}
export default BlessingGetPrize
