"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _dialog = _interopRequireDefault(require("@alifd/next/lib/dialog"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
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");
var _utils = require("../../../../utils/utils");
var _base = require("../../../../api/base");
var _shippingAddress = _interopRequireDefault(require("../../../common/shippingAddress"));
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 marquee01 = function marquee01(marquee01Props) {
  var data = (0, _extends2["default"])({}, marquee01Props);
  var gridWidth = marquee01Props.gridWidth;
  // console.log(data);

  var marqueeStyle = {
    style: {
      width: gridWidth + "%"
    }
  };
  // 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, '']
      }
    });
  };
  // const titleStyle = {
  //   style:{
  //     textAlign:'center',
  //     fontSize:'2vw',
  //   }
  // }
  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() {
    var _this;
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _Component.call.apply(_Component, [this].concat(args)) || this;
    _this.myLucky = /*#__PURE__*/React.createRef();
    _this.state = {
      wheelList: [],
      openAddress: false
    };
    _this.getWheelNode = /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
      var propsData, activityId, _ref2, code, data, _data$a, wheelList, xa;
      return _regenerator["default"].wrap(function _callee$(_context) {
        while (1) switch (_context.prev = _context.next) {
          case 0:
            propsData = _this.props.data;
            activityId = _utils.$_GET.activityId;
            if (!activityId) {
              _context.next = 8;
              break;
            }
            _context.next = 5;
            return (0, _base.prizeMessage)({
              b: activityId
            });
          case 5:
            _context.t0 = _context.sent;
            _context.next = 9;
            break;
          case 8:
            _context.t0 = {
              code: 200,
              data: []
            };
          case 9:
            _ref2 = _context.t0;
            code = _ref2.code;
            data = _ref2.data;
            if (code === 200) {
              wheelList = [{
                x: 0,
                y: 0
              }, {
                x: 1,
                y: 0
              }, {
                x: 2,
                y: 0
              }, {
                x: 2,
                y: 1
              }, {
                x: 2,
                y: 2
              }, {
                x: 1,
                y: 2
              }, {
                x: 0,
                y: 2
              }, {
                x: 0,
                y: 1
              }];
              xa = (data === null || data === void 0 ? void 0 : (_data$a = data.a) === null || _data$a === void 0 ? void 0 : _data$a.xa) || [];
              xa.splice(wheelList.length - 1, 1);
              wheelList.map(function (res, idx) {
                var _xa$idx, _xa$idx2, _xa$idx2$xc, _xa$idx2$xc$, _xa$idx3;
                return Object.assign(res, {
                  id: (_xa$idx = xa[idx]) === null || _xa$idx === void 0 ? void 0 : _xa$idx.d,
                  background: propsData.bgColor,
                  borderRadius: propsData.borderRadius + "px",
                  imgs: [{
                    src: ((_xa$idx2 = xa[idx]) === null || _xa$idx2 === void 0 ? void 0 : (_xa$idx2$xc = _xa$idx2.xc) === null || _xa$idx2$xc === void 0 ? void 0 : (_xa$idx2$xc$ = _xa$idx2$xc[0]) === null || _xa$idx2$xc$ === void 0 ? void 0 : _xa$idx2$xc$.c) || '//img.maimairen.com/low-code/components/bigWheel2/empty.png',
                    width: propsData.prizeImgWidth + "%",
                    top: propsData.prizeImgTop + "%",
                    height: propsData.prizeImgHeight + "%"
                  }]
                },
                // propsData.showType === 'text' ? {
                {
                  fonts: [{
                    text: (xa === null || xa === void 0 ? void 0 : (_xa$idx3 = xa[idx]) === null || _xa$idx3 === void 0 ? void 0 : _xa$idx3.e) || '谢谢参与',
                    fontSize: propsData.prizeFontSize + "px",
                    fontColor: propsData.prizeTextColor,
                    top: propsData.prizeTextTop + "%",
                    fontStyle: propsData.prizeFontFamily
                  }]
                });
              });
              if (JSON.stringify(wheelList) !== JSON.stringify(_this.state.wheelList).replace(/(,"col":1,"row":1)/g, '')) {
                _this.setState({
                  wheelList: wheelList
                });
              }
            }
          case 13:
          case "end":
            return _context.stop();
        }
      }, _callee);
    }));
    _this.onStart = /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
      var _yield$lottery, code, data, id, wheelList;
      return _regenerator["default"].wrap(function _callee2$(_context2) {
        while (1) switch (_context2.prev = _context2.next) {
          case 0:
            _context2.next = 2;
            return (0, _utils.lottery)();
          case 2:
            _yield$lottery = _context2.sent;
            code = _yield$lottery.code;
            data = _yield$lottery.data;
            // const { f: id, ce: text } = data
            id = data.f;
            wheelList = _this.state.wheelList;
            _this.setState({
              openAddress: false
            });
            _context2.t0 = code;
            _context2.next = _context2.t0 === 200 ? 11 : _context2.t0 === 10401 ? 14 : 14;
            break;
          case 11:
            _this.myLucky.current.play();
            setTimeout(function () {
              var wheelId = wheelList.findIndex(function (res) {
                return res.id === id;
              });
              // console.log(wheelId, wheelList[wheelId]);
              // // this.myLucky.current.stop((Math.random() * 8) >> 0);
              _this.myLucky.current.stop(wheelId !== -1 ? wheelId : wheelList.length - 1);
            }, Math.random() * 3 + 1 >> 0);
            return _context2.abrupt("break", 15);
          case 14:
            data();
          case 15:
          case "end":
            return _context2.stop();
        }
      }, _callee2);
    }));
    return _this;
  }
  var _proto = MarqueeMayChild.prototype;
  _proto.componentDidMount = function componentDidMount() {};
  _proto.componentDidUpdate = function componentDidUpdate() {};
  _proto.render = function render() {
    var _this2 = this;
    var data = this.props.data;
    // const {wheelList} = this.state

    var gridStyle = {
      style: {
        padding: data.padding + "%",
        backgroundImage: "url('" + data.bgImg + "')",
        backgroundSize: '100% 100%'
      }
    };
    var blocks = [{
      padding: '0px'
    }];
    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 getConfig = function getConfig() {
      if (data.showStyle === '0') {
        buttons[0].imgs[0].src = '//img.maimairen.com/low-code/components/marquee/gridPoint01.png';
        gridStyle.style.backgroundImage = "url('//img.maimairen.com/low-code/components/marquee/bg01.gif')";
      } else if (data.showStyle === '1') {
        buttons[0].imgs[0].src = 'https://img.maimairen.com/low-code/components/marquee/point05.png';
        gridStyle.style.backgroundImage = "url('//img.maimairen.com/low-code/components/marquee/bg02.gif')";
      } else if (data.showStyle === '2') {
        buttons[0].imgs[0].src = 'https://img.maimairen.com/low-code/components/marquee/point03.png';
        gridStyle.style.backgroundImage = "url('//img.maimairen.com/low-code/components/marquee/bg03.gif')";
      } else {
        buttons[0].imgs[0].src = 'https://img.maimairen.com/low-code/components/marquee/point04.png';
        gridStyle.style.backgroundImage = "url('//img.maimairen.com/low-code/components/marquee/bg04.png')";
      }
      return buttons;
    };
    var defaultConfig = {};
    var defaultStyle = {};
    var activeStyle = {
      background: '#FEECC4'
    };
    this.getWheelNode();
    var _onEnd = function onEnd(prize) {
      // const {fonts, imgs} = prize
      var fonts = prize.fonts;
      _dialog["default"].confirm({
        v2: true,
        title: '提示',
        content: prize.id ? "\u606D\u559C\u60A8\u4E2D\u5956\u5566-\u5956\u54C1: " + fonts[0].text : '很遗憾: 谢谢您的参与',
        messageProps: {
          type: prize.id ? 'success' : 'warning'
        },
        onOk: function onOk() {
          return prize.id ? _this2.setState({
            openAddress: true
          }) : _this2.setState({
            openAddress: false
          });
        }
        // onCancel: () => console.log("cancel")
      });
    };

    getConfig();
    return /*#__PURE__*/React.createElement("div", {
      className: "marqueeMay-content"
    }, /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
      className: "marquee01"
    }, gridStyle), /*#__PURE__*/React.createElement(_react2.LuckyGrid, {
      ref: this.myLucky,
      rows: "3",
      cols: "3",
      blocks: blocks
      // prizes={data.showType === 'text' ? getWheelNode(wheelData) : getWheelNode(wheelData2)}
      ,
      prizes: this.state.wheelList,
      buttons: buttons,
      defaultConfig: defaultConfig,
      defaultStyle: defaultStyle,
      activeStyle: activeStyle
      // onStart={this.onStart}
      ,
      onEnd: function onEnd(prize) {
        _onEnd(prize);
      }
    }), /*#__PURE__*/React.createElement("div", {
      onClick: this.onStart,
      className: "theMarqueeStartBtn"
    }), /*#__PURE__*/React.createElement(_shippingAddress["default"], {
      touchState: this.state.openAddress
    })));
  };
  return MarqueeMayChild;
}(React.Component);
MarqueeMayChild.displayName = 'MarqueeMayChild';
var _default = marquee01;
exports["default"] = _default;