import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import _extends from "@babel/runtime/helpers/extends";
import "./index.scss";
import * as React from 'react';
import { Component, useState } from 'react';
import LuckDrawSucc from "../common/LuckDrawSucc";
import Winner from "../common/winner";
import Prize from "../common/prize";
import { LuckyGrid } from '@lucky-canvas/react';
var marqueeMay = function marqueeMay(marqueeMayProps) {
  var _offsetXY$, _offsetXY$2, _offsetXY$3, _offsetXY$4;
  var data = _extends({}, marqueeMayProps);
  var bgColor = marqueeMayProps.bgColor,
    width = marqueeMayProps.width,
    offsetXY = marqueeMayProps.offsetXY;
  // console.log(data);

  var marqueeStyle = {
    style: {
      overflow: 'auto',
      background: bgColor,
      width: width + "vw",
      marginLeft: offsetXY && offsetXY.length > 0 ? "" + ((_offsetXY$ = offsetXY[0]) === null || _offsetXY$ === void 0 ? void 0 : _offsetXY$.value) + ((_offsetXY$2 = offsetXY[0]) === null || _offsetXY$2 === void 0 ? void 0 : _offsetXY$2.unit) : 0,
      marginTop: offsetXY && offsetXY.length > 0 ? "" + ((_offsetXY$3 = offsetXY[1]) === null || _offsetXY$3 === void 0 ? void 0 : _offsetXY$3.value) + ((_offsetXY$4 = offsetXY[1]) === null || _offsetXY$4 === void 0 ? void 0 : _offsetXY$4.unit) : 0
    }
  };
  // eslint-disable-next-line react-hooks/rules-of-hooks
  var _useState = useState({
      isOpenPrize: false,
      countPrized: 5,
      prizeTextList: {
        icon: 'prize',
        msg: '恭喜您中奖啦!',
        prizeLv: ['特等奖', '冬奥冰墩墩钥匙扣 × 1']
      }
    }),
    state = _useState[0],
    setState = _useState[1];
  var btnState = function btnState(prize) {
    setState({
      countPrized: state.countPrized,
      isOpenPrize: !state.isOpenPrize,
      prizeTextList: {
        icon: prize.imgs && prize.imgs[0].src,
        msg: '恭喜您中奖啦!',
        prizeLv: [prize.fonts && prize.fonts[0].text, '']
      }
    });
  };
  var isOpenPrize = state.isOpenPrize,
    prizeTextList = state.prizeTextList;
  return /*#__PURE__*/React.createElement("div", _extends({
    className: "marquee"
  }, marqueeStyle), /*#__PURE__*/React.createElement(MarqueeMayChild, {
    data: data,
    btnState: btnState
  }, /*#__PURE__*/React.createElement(LuckDrawSucc, {
    btnState: btnState,
    prizeTextList: prizeTextList,
    isOpenPrize: isOpenPrize
  })));
};
var MarqueeMayChild = /*#__PURE__*/function (_Component) {
  _inheritsLoose(MarqueeMayChild, _Component);
  function MarqueeMayChild(props) {
    var _this;
    _this = _Component.call(this, props) || this;
    _this.onStart = function () {
      // 点击抽奖按钮会触发star回调
      // console.log(this.myLucky);
      _this.myLucky.current.play();
      setTimeout(function () {
        var index = Math.random() * 8 >> 0;
        _this.myLucky.current.stop(index);
      }, 3000);
    };
    _this.myLucky = /*#__PURE__*/React.createRef();
    return _this;
  }
  var _proto = MarqueeMayChild.prototype;
  _proto.componentDidMount = function componentDidMount() {};
  _proto.render = function render() {
    var _this2 = this;
    var data = this.props.data;
    var _split = (data.isAbsolute || 'cc').split(''),
      bgH = _split[0],
      bgV = _split[1];
    var justifyContent = {
      l: 'flex-start',
      c: 'center',
      r: 'flex-end'
    };
    var alignItems = {
      t: 'flex-start',
      c: 'center',
      b: 'flex-end'
    };
    var gridStyle = {
      style: {
        display: 'flex',
        flexDirection: 'row',
        justifyContent: justifyContent[bgH],
        alignItems: alignItems[bgV],
        paddingBottom: '20px'
      }
    };
    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: '100豆',
      img: '//img.maimairen.com/low-code/components/prize-list001/bean1.png'
    }, {
      text: '300豆',
      img: '//img.maimairen.com/low-code/components/prize-list001/bean3.png'
    }, {
      text: '500豆',
      img: '//img.maimairen.com/low-code/components/prize-list001/bean5.png'
    }, {
      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'
    }];
    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 winnerStyle = {
      style: {
        opacity: data.winnerOpacity,
        fontSize: data.winnerSize + "px",
        fontFamily: data.winnerFontFamily,
        position: 'relative',
        color: data.winnerTextColor,
        // paddingTop: `${data.winnerTop}px`,
        lineHeight: data.lineHeight + "px"
      }
    };
    var awardStyle = {
      style: {
        color: data.awardTextColor,
        fontFamily: data.awardFontFamily,
        fontSize: data.awardFontSize + "px"
      }
    };
    var blocks = [{
      padding: data.gridBgPadding + "vw",
      imgs: [{
        src: '//img.maimairen.com/low-code/components/marquee/bg01.gif',
        width: '100%',
        height: '100%'
      }]
    }];
    var prizes = [{
      x: 0,
      y: 0,
      borderRadius: '8px',
      fonts: [{
        text: '180vip',
        fontSize: data.prizeFontSize + "px",
        fontColor: data.prizeTextColor,
        top: data.prizeTextTop + "%",
        fontStyle: data.prizeFontFamily
      }],
      imgs: [{
        src: '//img.maimairen.com/low-code/components/prize-list001/day180.png',
        width: data.prizeImgWidth + "%",
        top: data.prizeImgTop + "%",
        height: data.prizeImgHeight + "%"
      }]
    }, {
      x: 1,
      y: 0,
      borderRadius: '8px',
      fonts: [{
        text: '2000豆',
        fontSize: data.prizeFontSize + "px",
        fontColor: data.prizeTextColor,
        top: data.prizeTextTop + "%",
        fontStyle: data.prizeFontFamily
      }],
      imgs: [{
        src: '//img.maimairen.com/low-code/components/marquee/bean7.png',
        width: data.prizeImgWidth + "%",
        top: data.prizeImgTop + "%",
        height: data.prizeImgHeight + "%"
      }]
    }, {
      x: 2,
      y: 0,
      borderRadius: '8px',
      fonts: [{
        text: '15天vip',
        fontSize: data.prizeFontSize + "px",
        fontColor: data.prizeTextColor,
        top: data.prizeTextTop + "%",
        fontStyle: data.prizeFontFamily
      }],
      imgs: [{
        src: '//img.maimairen.com/low-code/components/prize-list001/day15.png',
        width: data.prizeImgWidth + "%",
        top: data.prizeImgTop + "%",
        height: data.prizeImgHeight + "%"
      }]
    }, {
      x: 2,
      y: 1,
      borderRadius: '8px',
      fonts: [{
        text: '500豆',
        fontSize: data.prizeFontSize + "px",
        fontColor: data.prizeTextColor,
        top: data.prizeTextTop + "%",
        fontStyle: data.prizeFontFamily
      }],
      imgs: [{
        src: '//img.maimairen.com/low-code/components/prize-list001/bean5.png',
        width: data.prizeImgWidth + "%",
        top: data.prizeImgTop + "%",
        height: data.prizeImgHeight + "%"
      }]
    }, {
      x: 2,
      y: 2,
      borderRadius: '8px',
      fonts: [{
        text: '谢谢参与',
        fontSize: data.prizeFontSize + "px",
        fontColor: data.prizeTextColor,
        top: data.prizeTextTop + "%",
        fontStyle: data.prizeFontFamily
      }],
      imgs: [{
        src: '//img.maimairen.com/low-code/components/marquee/xiatu01.png',
        width: data.prizeImgWidth + "%",
        top: data.prizeImgTop + "%",
        height: data.prizeImgHeight + "%"
      }]
    }, {
      x: 1,
      y: 2,
      borderRadius: '8px',
      fonts: [{
        text: '100豆',
        fontSize: data.prizeFontSize + "px",
        fontColor: data.prizeTextColor,
        top: data.prizeTextTop + "%",
        fontStyle: data.prizeFontFamily
      }],
      imgs: [{
        src: '//img.maimairen.com/low-code/components/prize-list001/bean1.png',
        width: data.prizeImgWidth + "%",
        top: data.prizeImgTop + "%",
        height: data.prizeImgHeight + "%"
      }]
    }, {
      x: 0,
      y: 2,
      borderRadius: '8px',
      fonts: [{
        text: '7天vip',
        fontSize: data.prizeFontSize + "px",
        fontColor: data.prizeTextColor,
        top: data.prizeTextTop + "%",
        fontStyle: data.prizeFontFamily
      }],
      imgs: [{
        src: '//img.maimairen.com/low-code/components/prize-list001/day7.png',
        width: data.prizeImgWidth + "%",
        top: data.prizeImgTop + "%",
        height: data.prizeImgHeight + "%"
      }]
    }, {
      x: 0,
      y: 1,
      borderRadius: '8px',
      fonts: [{
        text: '300豆',
        fontSize: data.prizeFontSize + "px",
        fontColor: data.prizeTextColor,
        top: data.prizeTextTop + "%",
        fontStyle: data.prizeFontFamily
      }],
      imgs: [{
        src: '//img.maimairen.com/low-code/components/prize-list001/bean3.png',
        width: data.prizeImgWidth + "%",
        top: data.prizeImgTop + "%",
        height: data.prizeImgHeight + "%"
      }]
    }];
    var buttons = [{
      x: 1,
      y: 1,
      background: 'rgba(0,0,0,0)',
      borderRadius: '8px',
      imgs: [{
        src: '//img.maimairen.com/low-code/components/marquee/gridPoint01.png',
        width: '100%',
        height: '100%'
      }]
    }];
    var defaultConfig = {};
    var defaultStyle = {
      background: '#FFFFFF'
    };
    var activeStyle = {
      background: '#FEECC4'
    };
    var _onEnd = function onEnd(prize) {
      _this2.props.btnState(prize);
      // alert(`恭喜你抽到 ${prize.fonts[0].text} 号奖品`);
    };

    var titleStyle = {
      style: {
        color: '#FDF052',
        textAlign: 'center',
        fontSize: '22px',
        fontWeight: '500'
      }
    };
    return /*#__PURE__*/React.createElement("div", {
      className: "marqueeMay-content"
    }, this.props.children, /*#__PURE__*/React.createElement("div", null, "\u60A8\u4ECA\u5929\u8FD8\u6709 1 \u6B21\u62BD\u5956\u673A\u4F1A"), /*#__PURE__*/React.createElement("div", gridStyle, /*#__PURE__*/React.createElement(LuckyGrid, {
      ref: this.myLucky,
      width: data.gridWidth + "vw",
      height: data.gridWidth + "vw",
      rows: "3",
      cols: "3",
      blocks: blocks,
      prizes: prizes,
      buttons: buttons,
      defaultConfig: defaultConfig,
      defaultStyle: defaultStyle,
      activeStyle: activeStyle,
      onStart: this.onStart,
      onEnd: function onEnd(prize) {
        _onEnd(prize);
      }
    })), /*#__PURE__*/React.createElement("div", {
      className: "marqueeMay-container"
    }, /*#__PURE__*/React.createElement(Winner, {
      className: "marquee-LuckyWheel",
      list: list,
      winnerStyle: winnerStyle
    })), /*#__PURE__*/React.createElement("div", {
      className: "marqueeMay-container"
    }, /*#__PURE__*/React.createElement("div", _extends({
      className: "marqueeMay-title"
    }, titleStyle), "- \u7CBE\u9009\u5956\u54C1-"), /*#__PURE__*/React.createElement(Prize, {
      className: "marquee-LuckyWheel",
      list: prizeList,
      Style: awardStyle
    })), /*#__PURE__*/React.createElement("div", {
      className: "marqueeMay-container"
    }, /*#__PURE__*/React.createElement("div", {
      className: "marqueeMay-rules"
    }, /*#__PURE__*/React.createElement("div", _extends({
      className: "marqueeMay-title"
    }, titleStyle), "- \u6D3B\u52A8\u89C4\u5219 -"), /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", null, "\u6D3B\u52A8\u65F6\u95F4\uFF1A2022\u5E744\u670830\u65E5 \u2014 2022\u5E745\u670830\u65E5"), /*#__PURE__*/React.createElement("li", null, "\u53C2\u4E0E\u65B9\u5F0F\uFF1A\u6BCF\u4F4D\u7528\u6237\u6BCF\u5929\u67093\u6B21\u62BD\u5956\u673A\u4F1A\uFF0C100%\u4E2D\u5956\u3002"))), /*#__PURE__*/React.createElement("div", {
      className: "marqueeMay-rules"
    }, /*#__PURE__*/React.createElement("div", _extends({
      className: "marqueeMay-title"
    }, titleStyle), "- \u5151\u5956\u89C4\u5219 -"), /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", null, "1.\u5B9E\u7269\u9886\u53D6\u65B9\u5F0F\uFF1A2022\u5E746\u67081\u65E5\u20142022\u5E746\u670820\u65E5\uFF08\u5DE5\u4F5C\u65E59:00-17:00\uFF09\uFF0C\u81F3xxxx\u9886\u53D6\uFF08\u5B9E\u7269\u5956\u54C1\u4E0D\u63D0\u4F9B\u90AE\u5BC4\uFF09\uFF0C\u8054\u7CFB\u7535\u8BDD\uFF1A188888xxxx"), /*#__PURE__*/React.createElement("li", null, "2.\u79EF\u5206\u9886\u53D6\u65B9\u5F0F\uFF1A\u79EF\u5206\u5C06\u4F1A\u57281\u20147\u4E2A\u5DE5\u4F5C\u65E5\u5185\u76F4\u63A5\u53D1\u653E\u81F3\u60A8\u7684\u4E2D\u5956\u8D26\u6237\u4E2D\u3002"), /*#__PURE__*/React.createElement("li", null, "3.\u901A\u8FC7\u975E\u6CD5\u9014\u5F84\u83B7\u5F97\u5956\u54C1\u7684\uFF0C\u4E3B\u529E\u65B9\u6709\u6743\u4E0D\u63D0\u4F9B\u5956\u54C1\u3002\u672C\u6D3B\u52A8\u6700\u7EC8\u89E3\u91CA\u6743\u4E3Axxxxx\u6240\u6709\u3002")))));
  };
  return MarqueeMayChild;
}(Component);
MarqueeMayChild.displayName = 'MarqueeMayChild';
export default marqueeMay;