import _extends from "@babel/runtime/helpers/extends";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import styles from "./index.module.scss";
import * as React from 'react';
import { Component } from 'react';
// import { LuckyWheel } from '@lucky-canvas/react';
import { SlotMachine } from '@lucky-canvas/react';
// import { SizeSetter, GroupParamSetter } from '../../../setter';
// import LuckDrawSucc from '../../common/LuckDrawSucc';
// 转盘
// interface yellowSlotMachineProps {
//   // 透明度
//   bgOpacity?: SizeSetter;
//   // 整个宽高
//   bgSize?: GroupParamSetter;
//   tigerImg?: string;
//   // 老虎机宽高
//   SlotMachineWidth?: 0;
//   chooseImg: {};
//   // 老虎机奖品设置
//   MachinePrizeFontSize?: 14;
//   MachinePrizeFontFamily?: '';
//   MachinePrizeFontTop?: 10;
//   MachinePrizeImgTop?: 40;
//   MachinePrizeImgWidth?: 40;

//   // 速度
//   prizeSpeed?: 10;
// }
// const yellowSlotMachine: React.FC<yellowSlotMachineProps> = function (MySlotMachineProps) {
//   const data = { ...MySlotMachineProps };
//   // eslint-disable-next-line react-hooks/rules-of-hooks
//   const [state, setState] = useState({
//     isOpenPrize: false,
//     countPrized: 2,
//     prizeTextList: {
//       icon: 'prize',
//       msg: '恭喜您中奖啦!',
//       prizeLv: ['特等奖', '冬奥冰墩墩钥匙扣 × 1'],
//     },
//   });
//   const btnState = (prize, message) => {
//     setState({
//       countPrized: state.countPrized,
//       isOpenPrize: !state.isOpenPrize,
//       prizeTextList: {
//         icon: prize.imgs && prize.imgs[1].src,
//         msg: message,
//         prizeLv: [prize.fonts && prize.fonts[0].text, ''],
//       },
//     });
//   };
//   const subtract = () => {
//     if (state.countPrized > 0) {
//       setState({
//         countPrized: --state.countPrized,
//       });
//     }
//   };
//   const { isOpenPrize, prizeTextList, countPrized } = state;
//   return (
//     <div>
//       <MySlotMachineChild
//         data={data}
//         btnState={btnState}
//         countPrized={countPrized}
//         subtract={subtract}
//       >
//         <LuckDrawSucc {...{ btnState, prizeTextList, isOpenPrize }} />
//       </MySlotMachineChild>
//     </div>
//   );
// };
var MySlotMachineChild05 = /*#__PURE__*/function (_Component) {
  _inheritsLoose(MySlotMachineChild05, _Component);
  function MySlotMachineChild05(props) {
    var _this;
    _this = _Component.call(this, props) || this;
    _this.onisClick = function () {
      var isClick = _this.state.isClick;
      _this.setState({
        isClick: !isClick
      });
    };
    _this.onStarts = function () {
      // 点击抽奖按钮会触发star回调
      // console.log(this.myMachin);
      _this.myMachin.current.play();
      setTimeout(function () {
        var index = Math.random() * 6 >> 0;
        _this.myMachin.current.stop(index);
      }, 2500);
      _this.onisClick();
    };
    _this.myMachin = /*#__PURE__*/React.createRef();
    _this.state = {
      // 抽奖次数
      // count: 3,
      isClick: true
    };
    return _this;
  }
  var _proto = MySlotMachineChild05.prototype;
  _proto.componentDidMount = function componentDidMount() {}
  // 修改老虎机点击isClick
  ;
  _proto.render = function render() {
    var _this2 = this;
    var data = this.props.data;
    var container = {
      width: "100%",
      overflow: "auto"
    };
    var imgopacity = {
      opacity: data.bgOpacity / 100
    };
    var SlotMachineStyle = {
      style: {
        display: "flex",
        flexDirection: "column",
        justifyContent: "center" /* 水平居中 */,
        alignItems: "center" /* 垂直居中 */,
        paddingTop: "3.7vh" /* 看着太大，除以2 */,
        paddingBottom: "8.65vh" /* 看着太大，除以2 */
      }
    };

    var blocks = [{
      padding: '10px'
    }];
    var prizes = [{
      // background: '#FEF6DF',
      padding: '10px',
      fonts: [{
        text: '一等奖',
        fontSize: data.MachinePrizeFontSize,
        fontStyle: data.MachinePrizeFontFamily,
        fontColor: '#F58B33',
        top: data.MachinePrizeFontTop + "%"
      }],
      imgs: [{
        width: '100%',
        height: '100%',
        src: '//img.maimairen.com/low-code/components/slot-machine/BlueBox.png'
      }, {
        src: '//img.maimairen.com/low-code/components/slot-machine/firstPrize.png',
        width: data.MachinePrizeImgWidth + "%",
        top: (data.MachinePrizeImgTop ? data.MachinePrizeImgTop : 26) + "%"
      }]
    }, {
      // background: '#FEF6DF',
      fonts: [{
        text: '二等奖',
        fontSize: data.MachinePrizeFontSize,
        fontStyle: data.MachinePrizeFontFamily,
        fontColor: '#F58B33',
        top: data.MachinePrizeFontTop + "%"
      }],
      imgs: [{
        width: '100%',
        height: '100%',
        src: '//img.maimairen.com/low-code/components/slot-machine/BlueBox.png'
      }, {
        src: '//img.maimairen.com/low-code/components/slot-machine/secondPrize.png',
        width: data.MachinePrizeImgWidth + "%",
        top: (data.MachinePrizeImgTop ? data.MachinePrizeImgTop : 26) + "%"
      }]
    }, {
      // background: '#FEF6DF',
      padding: '10px',
      fonts: [{
        text: '100VIP',
        fontSize: data.MachinePrizeFontSize,
        fontStyle: data.MachinePrizeFontFamily,
        fontColor: '#F58B33',
        top: data.MachinePrizeFontTop + "%"
      }],
      imgs: [{
        width: '100%',
        height: '100%',
        src: '//img.maimairen.com/low-code/components/slot-machine/BlueBox.png'
      }, {
        src: '//img.maimairen.com/low-code/components/prize-list001/day15.png',
        width: data.MachinePrizeImgWidth + "%",
        top: (data.MachinePrizeImgTop ? data.MachinePrizeImgTop : 26) + "%"
      }]
    }
    // {
    //   background: '#ffffff',
    //   fonts: [
    //     {
    //       text: '500豆',
    //       fontSize: data.MachinePrizeFontSize,
    //       fontStyle: data.MachinePrizeFontFamily,
    //       fontColor: '#F58B33',
    //       top: `${data.MachinePrizeFontTop}%`,
    //     },
    //   ],
    //   imgs: [
    //     {
    //       src: '//img.maimairen.com/low-code/components/prize-list001/bean5.png',
    //       width: `${data.MachinePrizeImgWidth}%`,
    //       top: `${data.MachinePrizeImgTop}%`,
    //     },
    //   ],
    // },
    // {
    //   background: '#ffffff',
    //   fonts: [
    //     {
    //       text: '100豆',
    //       fontSize: data.MachinePrizeFontSize,
    //       fontStyle: data.MachinePrizeFontFamily,
    //       fontColor: '#F58B33',
    //       top: `${data.MachinePrizeFontTop}%`,
    //     },
    //   ],
    //   imgs: [
    //     {
    //       src: '//img.maimairen.com/low-code/components/prize-list001/bean1.png',
    //       width: `${data.MachinePrizeImgWidth}%`,
    //       top: `${data.MachinePrizeImgTop}%`,
    //     },
    //   ],
    // },
    ];

    var defaultConfig = {
      // 设置每个格子间隔
      // rowSpacing: '6.5em',
      // 行间距
      rowSpacing: '100px',
      // 列间距
      colSpacing: '4em'
    };
    var slots = [{
      order: [0, 1, 2],
      speed: data.prizeSpeed
    }, {
      order: [0, 1, 2],
      speed: data.prizeSpeed
    }, {
      order: [1, 2, 0],
      speed: data.prizeSpeed
    }];
    // const slots = [{
    //     // 奖品排列顺序  默认所有奖品
    //     // order:
    //     speed: 30,
    //     // 1是正方向 -1是反方向
    //     direction: 1
    // }]
    var _allMachineStyle = {
      style: {
        wdith: data.SlotMachineWidth + "vw",
        height: data.SlotMachineWidth * 0.8 + "vw"
      }
    };
    var _onEnd = function onEnd(prize) {
      _this2.props.btnState(prize, '恭喜中奖了');
      _this2.onisClick();
      // alert(`恭喜你抽到 ${prize.fonts[0].text} 号奖品`);
    };

    var thaks = function thaks() {
      var prize = {
        imgs: [{}, {
          src: '//img.maimairen.com/low-code/components/marquee/xiatu01.png'
        }],
        fonts: [{
          text: '谢谢参与'
        }]
      };
      _this2.props.btnState(prize, '');
      _this2.onisClick();
    };
    var clickBtn = function clickBtn(state) {
      var btnActive = state;
      var btn = '//img.maimairen.com/low-code/components/slot-machine/pinkBtn.png';
      var btnGif = '//img.maimairen.com/low-code/components/slot-machine/pinkBtnGif.gif';
      if (btnActive) {
        return /*#__PURE__*/React.createElement("div", {
          className: styles['btn-box']
        }, /*#__PURE__*/React.createElement("img", {
          src: btn
        }));
      } else {
        return /*#__PURE__*/React.createElement("div", {
          className: styles['btn-box']
        }, /*#__PURE__*/React.createElement("img", {
          src: btnGif
        }));
      }
    };
    return /*#__PURE__*/React.createElement("div", {
      className: styles.bigWheel,
      style: _extends({}, container, imgopacity)
    }, this.props.children, /*#__PURE__*/React.createElement("div", {
      className: styles['bigWheel-content']
    }, /*#__PURE__*/React.createElement("div", {
      style: _extends({}, SlotMachineStyle)
    }, /*#__PURE__*/React.createElement("div", {
      className: styles.allMachineStyle,
      style: _extends({}, _allMachineStyle)
    }, /*#__PURE__*/React.createElement("div", {
      className: styles.SlotMachineBG
    }, /*#__PURE__*/React.createElement("img", {
      src: data.chooseImg.src1,
      className: styles.img
    }), /*#__PURE__*/React.createElement("div", {
      className: styles.btn2,
      onClick: this.onStarts
    }, this.state.isClick ? clickBtn(true) : clickBtn(false)), /*#__PURE__*/React.createElement("div", {
      className: styles.LotteryNumber02
    }, "\u4ECA\u65E5\u5269\u4F59\u62BD\u5956\u6B21\u6570\uFF1A3"), /*#__PURE__*/React.createElement("div", {
      className: styles.mask02
    }, /*#__PURE__*/React.createElement(SlotMachine, {
      ref: this.myMachin
      // width={`54.2vw`}
      // height={`30vw`}
      ,
      blocks: blocks,
      prizes: prizes,
      slots: slots,
      defaultConfig: defaultConfig,
      onEnd: function onEnd(prize) {
        prize ? _onEnd(prize) : thaks();
      }
    })))))));
  };
  return MySlotMachineChild05;
}(Component);
MySlotMachineChild05.displayName = 'MySlotMachineChild02';
export { MySlotMachineChild05 };
// export default yellowSlotMachine;
// export type { yellowSlotMachineProps };