"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
require("./index.scss");
var React = _interopRequireWildcard(require("react"));
var _LuckDrawSucc = _interopRequireDefault(require("../../../common/LuckDrawSucc"));
var _react2 = require("@lucky-canvas/react");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
var marquee02 = function marquee02(marquee02Props) {
  var data = (0, _extends2["default"])({}, marquee02Props);
  var gridWidth = marquee02Props.gridWidth;
  // console.log(data);

  var marqueeStyle = {
    style: {
      width: gridWidth + "vw"
      // marginLeft: offsetXY && offsetXY.length > 0 ? `${offsetXY[0]?.value}${offsetXY[0]?.unit}` : 0,
      // marginTop: offsetXY && offsetXY.length > 0 ? `${offsetXY[1]?.value}${offsetXY[1]?.unit}` : 0,
    }
  };
  // eslint-disable-next-line react-hooks/rules-of-hooks
  var _useState = (0, React.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", (0, _extends2["default"])({
    className: "marquee"
  }, marqueeStyle), /*#__PURE__*/React.createElement(MarqueeMayChild, {
    data: data,
    btnState: btnState
  }, /*#__PURE__*/React.createElement(_LuckDrawSucc["default"], {
    btnState: btnState,
    prizeTextList: prizeTextList,
    isOpenPrize: isOpenPrize
  })));
};
var MarqueeMayChild = /*#__PURE__*/function (_Component) {
  (0, _inheritsLoose2["default"])(MarqueeMayChild, _Component);
  function MarqueeMayChild(props) {
    var _this;
    _this = _Component.call(this, props) || this;
    _this.onStart = function () {
      // 点击抽奖按钮会触发star回调
      _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 blocks = [{
      padding: '6vw'
    }];
    var prizes = [{
      x: 0,
      y: 0,
      imgs: [{
        src: '//img.maimairen.com/low-code/components/marquee-may/vip100.png',
        width: '100%',
        top: '10%'
      }]
    }, {
      x: 1,
      y: 0,
      imgs: [{
        src: '//img.maimairen.com/low-code/components/marquee-may/linghongbao01.png',
        width: '100%',
        top: '10%'
      }]
    }, {
      x: 2,
      y: 0,
      imgs: [{
        src: '//img.maimairen.com/low-code/components/marquee-may/quan01.png',
        width: '100%',
        top: '10%'
      }]
    }, {
      x: 2,
      y: 1,
      imgs: [{
        src: '//img.maimairen.com/low-code/components/marquee-may/linghongbao01.png',
        width: '100%',
        top: '10%'
      }]
    }, {
      x: 2,
      y: 2,
      imgs: [{
        src: '//img.maimairen.com/low-code/components/marquee-may/dianying01.png',
        width: '100%',
        top: '10%'
      }]
    }, {
      x: 1,
      y: 2,
      imgs: [{
        src: '//img.maimairen.com/low-code/components/marquee-may/linghongbao01.png',
        width: '100%',
        top: '10%'
      }]
    }, {
      x: 0,
      y: 2,
      imgs: [{
        src: '//img.maimairen.com/low-code/components/marquee-may/dishini01.png',
        width: '100%',
        top: '10%'
      }]
    }, {
      x: 0,
      y: 1,
      imgs: [{
        src: '//img.maimairen.com/low-code/components/marquee-may/linghongbao01.png',
        width: '100%',
        top: '10%'
      }]
    }];
    var buttons = [{
      x: 1,
      y: 1,
      imgs: [{
        src: '//img.maimairen.com/low-code/components/marquee-may/point02.png',
        width: '100%',
        height: '100%'
      }]
    }];
    var defaultConfig = {};
    var defaultStyle = {
      background: '#FAF3FF',
      borderRadius: '8px',
      shadow: '4'
    };
    var activeStyle = {
      background: '#FCF3B3'
    };
    var _onEnd = function onEnd(prize) {
      _this2.props.btnState(prize);
      // alert(`恭喜你抽到 ${prize.fonts[0].text} 号奖品`);
    };

    return /*#__PURE__*/React.createElement("div", {
      className: "marqueeMay-content"
    }, /*#__PURE__*/React.createElement("div", {
      className: "marquee01"
    }, /*#__PURE__*/React.createElement(_react2.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);
      }
    })));
  };
  return MarqueeMayChild;
}(React.Component);
MarqueeMayChild.displayName = 'MarqueeMayChild';
var _default = marquee02;
exports["default"] = _default;