import _extends from "@babel/runtime/helpers/extends";
import _Message from "@alifd/next/es/message";
import * as React from 'react';
import "./index.scss";
import ActivityBox from "../common/ActivityBox/index";
import Gift from "./components/Gift";
import Winner from "../common/winner";
import LuckDrawSucc from "../common/LuckDrawSucc";
import Prize from "../common/prize";
var BlindBox = function BlindBox(_ref) {
  var isBgColor = _ref.isBgColor,
    bgColor = _ref.bgColor,
    opacity = _ref.opacity,
    btnText = _ref.btnText,
    winnerTextColor = _ref.winnerTextColor,
    winnerFontFamily = _ref.winnerFontFamily,
    winnerTop = _ref.winnerTop,
    winnerSize = _ref.winnerSize,
    winnerOpacity = _ref.winnerOpacity;
  var _wrapStyle = {
    style: {
      // width: size[0].value === undefined ? 'auto' : `${size[0].value}${size[0].unit}`,
      // height: size[1].value === undefined ? 'auto' : `${size[1].value}${size[1].unit}`,
      backgroundColor: isBgColor === false ? 'transparent' : bgColor
    }
  };
  var _pkgStyle = {
    style: {
      opacity: opacity / 100
    }
  };
  var winnerStyle = {
    style: {
      opacity: winnerOpacity / 100,
      fontSize: winnerSize + "px",
      fontFamily: winnerFontFamily,
      position: 'relative',
      color: winnerTextColor,
      padding: winnerTop + "px",
      lineHeight: '1.8em'
    }
  };
  var prizeStyle = {
    style: {
      // // opacity: winnerOpacity / 100,
      // fontSize: `${prizeFontSize}px`,
      // fontFamily: prizeFontFamily,
      // // position: 'relative',
      // color: prizeFontColor
    }
  };
  var list = [{
    phone: '17879830000',
    prize: '领取10元现金券'
  }, {
    phone: '15737780000',
    prize: '领取10元现金券'
  }, {
    phone: '15737780000',
    prize: '领取50元现金券'
  }, {
    phone: '15737780000',
    prize: '领取10元现金券'
  }, {
    phone: '15737780000',
    prize: '领取20元现金券'
  }, {
    phone: '15737780000',
    prize: '领取10元现金券'
  }, {
    phone: '15737780000',
    prize: '领取40元现金券'
  }];
  var prizeList = [{
    text: '15天vip',
    img: '//img.maimairen.com/low-code/components/prize-list001/day15.png'
  }, {
    text: '7天vip',
    img: '//img.maimairen.com/low-code/components/prize-list001/day7.png'
  }, {
    text: '1天vip',
    img: '//img.maimairen.com/low-code/components/prize-list001/day1.png'
  }, {
    text: '1豆',
    img: '//img.maimairen.com/low-code/components/prize-list001/bean1.png'
  }, {
    text: '3豆',
    img: '//img.maimairen.com/low-code/components/prize-list001/bean3.png'
  }, {
    text: '5豆',
    img: '//img.maimairen.com/low-code/components/prize-list001/bean5.png'
  }];
  // const isOpenPrizeStyle = {
  //     style: {
  //         display: 'block'
  //     }
  // }

  var prizeTextList = {
    // icon: '//img.maimairen.com/low-code/components/blind-box/prize.png',
    // icon: 'no-prize',
    icon: 'prize',
    msg: '恭喜您中奖啦!',
    // msg: '很遗憾空无一物',
    prizeLv: ['特等奖', '冬奥冰墩墩钥匙扣 × 1']
    // prizeLv: ['谢谢参于', '']
  };

  var _React$useState = React.useState({
      isOpenPrize: false,
      countPrized: 5
    }),
    state = _React$useState[0],
    setState = _React$useState[1];
  var btnState = function btnState() {
    setState({
      countPrized: state.countPrized,
      isOpenPrize: !state.isOpenPrize
    });
  };
  var btnOnclick = function btnOnclick() {
    if (state.countPrized < 1) {
      _Message.error('你剩余的抽奖次数已用完。');
      return;
    }
    setState({
      countPrized: --state.countPrized,
      isOpenPrize: !state.isOpenPrize
    });
  };
  var isOpenPrize = state.isOpenPrize;
  return /*#__PURE__*/React.createElement("div", _extends({
    className: "blind-box"
  }, _wrapStyle), /*#__PURE__*/React.createElement(LuckDrawSucc, {
    btnState: btnState,
    prizeTextList: prizeTextList,
    isOpenPrize: isOpenPrize
  }), /*#__PURE__*/React.createElement(ActivityBox, {
    title: /*#__PURE__*/React.createElement("span", null, "\u5269\u4F59\u62BD\u5956\u6B21\u6570\uFF1A", /*#__PURE__*/React.createElement("span", {
      className: "acitivity-nums"
    }, state.countPrized))
  }, /*#__PURE__*/React.createElement(Gift, {
    style: _pkgStyle,
    btnFn: btnOnclick,
    btnText: btnText
  })), /*#__PURE__*/React.createElement(ActivityBox, {
    title: "\u4E2D\u5956\u540D\u5355"
  }, /*#__PURE__*/React.createElement(Winner, {
    list: list,
    winnerStyle: winnerStyle
  })), /*#__PURE__*/React.createElement(ActivityBox, {
    title: "\u7CBE\u9009\u5956\u54C1"
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      fontSize: '48px'
    }
  }, /*#__PURE__*/React.createElement(Prize, {
    className: "bigWheel-LuckyWheel",
    list: prizeList,
    Style: prizeStyle
  }))));
};
export default BlindBox;