import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import _extends from "@babel/runtime/helpers/extends";
import * as React from 'react';
import { Component, useState } from 'react';
import "./index.scss";
import ActivityBox from "../common/ActivityBox";
import Winner from "../common/winner";
import Prize from "../common/prize";
import { LuckyGrid } from '@lucky-canvas/react';
import LuckDrawSucc from "../common/LuckDrawSucc";
var marquee = function marquee(marqueeProps) {
  var _offsetXY$, _offsetXY$2, _offsetXY$3, _offsetXY$4;
  var data = _extends({}, marqueeProps);
  var bgColor = marqueeProps.bgColor,
    width = marqueeProps.width,
    offsetXY = marqueeProps.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(MarqueeChild, {
    data: data,
    btnState: btnState
  }, /*#__PURE__*/React.createElement(LuckDrawSucc, {
    btnState: btnState,
    prizeTextList: prizeTextList,
    isOpenPrize: isOpenPrize
  })));
};
var MarqueeChild = /*#__PURE__*/function (_Component) {
  _inheritsLoose(MarqueeChild, _Component);
  function MarqueeChild(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 = MarqueeChild.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,
        padding: 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} 号奖品`);
    };

    return /*#__PURE__*/React.createElement("div", {
      className: "marquee-content"
    }, this.props.children, /*#__PURE__*/React.createElement(ActivityBox, {
      title: /*#__PURE__*/React.createElement("span", null, "\u5269\u4F59\u62BD\u5956\u6B21\u6570\uFF1A", /*#__PURE__*/React.createElement("span", {
        className: "acitivity-nums"
      }, "1"))
    }, /*#__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(ActivityBox, {
      title: "\u4E2D\u5956\u540D\u5355"
    }, /*#__PURE__*/React.createElement(Winner, {
      className: "marquee-LuckyWheel",
      list: list,
      winnerStyle: winnerStyle
    })), /*#__PURE__*/React.createElement(ActivityBox, {
      title: "\u7CBE\u9009\u5956\u54C1"
    }, /*#__PURE__*/React.createElement(Prize, {
      className: "marquee-LuckyWheel",
      list: prizeList,
      Style: awardStyle
    })));
  };
  return MarqueeChild;
}(Component);
MarqueeChild.displayName = 'MarqueeChild';
export default marquee;