import _extends from "@babel/runtime/helpers/extends";
import _Message from "@alifd/next/es/message";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import styles from "./index.module.scss";
import * as React from 'react';
import { Component } from 'react';
import { SlotMachine } from '@lucky-canvas/react';
// import { SizeSetter, GroupParamSetter } from '../../../setter';

import AddressComponent from "../../common/shippingAddress/index";
// 转盘
// interface koiSlotMachinProps {
//   // 透明度
//   bgOpacity?: SizeSetter;
//   // 整个宽高
//   bgSize?: GroupParamSetter;
//   // 老虎机
//   chooseImg: {};
//   tigerImg?: string;
//   windowsImg?: string;
//   ticket?: string;
//   // 名单的
//   winnerOpacity?: 100;
//   winnerSize?: 14;
//   winnerFontFamily?: '';
//   winnerTextColor?: '';
//   winnerTop?: 0;

//   // 奖品列表
//   prizeFontSize?: 18;
//   prizeFontFamily?: '';
//   prizeFontColor?: '';

//   // 老虎机宽高
//   SlotMachineWidth?: 0;

//   // 老虎机奖品设置
//   MachinePrizeFontSize?: 14;
//   MachinePrizeFontFamily?: '';
//   MachinePrizeFontTop?: 10;
//   MachinePrizeImgTop?: 40;
//   MachinePrizeImgWidth?: 40;

//   // 速度
//   prizeSpeed?: 10;
//   // 规则
//   rulesText?: '';
// }
// const koiSlotMachine: React.FC<koiSlotMachinProps> = function (koiSlotMachinProps) {
//   const data = { ...koiSlotMachinProps }
//   return (
//     <div>
//       <MySlotMachineChild data={data} />
//     </div>
//   );
// };
// <koiSlotMachinProps>  换成any
var MySlotMachineChild = /*#__PURE__*/function (_Component) {
  _inheritsLoose(MySlotMachineChild, _Component);
  function MySlotMachineChild(props) {
    var _this;
    _this = _Component.call(this, props) || this;
    _this.onGetPrize = function () {
      _this.setState(function (prev) {
        return {
          writeMessage: !prev.writeMessage,
          isTicket: true,
          title: '',
          icon: '',
          message: ''
        };
      });
    };
    _this.onisClick = function () {
      var isClick = _this.state.isClick;
      _this.setState({
        isClick: !isClick
      });
    };
    _this.onisTicket = function (prize) {
      var isTicket = _this.state.isTicket;
      _this.setState({
        isTicket: !isTicket,
        title: prize.title,
        icon: prize.icon,
        message: prize.message
      });
    };
    _this.onStarts = function () {
      // 开始先全部清空
      if (_this.state.count > 0) {
        // const count = this.state.count
        _this.setState(function (prev) {
          return {
            isTicket: true,
            title: '',
            icon: '',
            message: '',
            count: prev.count - 1,
            writeMessage: false
          };
        });
        _this.onisClick();
        _this.myMachin.current.play();
        setTimeout(function () {
          var index = Math.random() * 6 >> 0;
          _this.myMachin.current.stop(index);
        }, 2500);
      } else {
        return _Message.error('你剩余的抽奖次数已用完。');
      }
    };
    _this.myMachin = /*#__PURE__*/React.createRef();
    _this.state = {
      // 抽奖次数
      count: 3,
      isClick: true,
      isTicket: true,
      title: '',
      icon: '',
      message: '',
      writeMessage: false
    };
    return _this;
  }
  var _proto = MySlotMachineChild.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 = [
      // {
      //     imgs: [
      //         {
      //             src: 'https://img.maimairen.com/low-code/components/SlotMachine/tiger.png',
      //             // 图片位置
      //             width: '100%',
      //             height: '100%',
      //         }
      //     ]
      // },
      // // 这里的padding 规则是上下左右，别改动，好不容易调好的
      // { padding: '5.8vw 18.3vw 5.8vw 5.8vw' }
    ];
    var prizes = [{
      // background: '#ffffff',
      // background: '#007acc',
      // background: 'linear-gradient(to bottom, #333, #333 5%, #eee 50%, #333 102%);',
      // fonts: [
      //     {
      //         text: '王冠',
      //         fontSize: data.MachinePrizeFontSize,
      //         fontStyle: data.MachinePrizeFontFamily,
      //         fontColor: '#F58B33',
      //         top: `${data.MachinePrizeFontTop}%`,
      //     },
      // ],
      message: '抽中了一等奖   iphone 13一台',
      imgs: [{
        src: '//img.maimairen.com/low-code/components/slot001/level.png',
        width: data.MachinePrizeImgWidth + "%",
        top: (data.MachinePrizeImgTop ? data.MachinePrizeImgTop : 27) + "%"
      }]
    }, {
      message: '抽中了二等奖   100积分',
      imgs: [{
        src: '//img.maimairen.com/low-code/components/slot001/housand.png',
        width: data.MachinePrizeImgWidth + "%",
        top: (data.MachinePrizeImgTop ? data.MachinePrizeImgTop : 27) + "%"
      }]
    }, {
      message: '抽中了二等奖   100金豆',
      imgs: [{
        src: '//img.maimairen.com/low-code/components/prize-list001/bean5.png',
        width: data.MachinePrizeImgWidth + "%",
        top: (data.MachinePrizeImgTop ? data.MachinePrizeImgTop : 27) + "%"
      }]
    }];
    var defaultConfig = {
      // 设置每个格子间隔
      // rowSpacing: '6.5em',
      rowSpacing: '-1px',
      colSpacing: '1em'
    };
    var slots = [{
      order: [0, 1, 2],
      speed: data.prizeSpeed
    }, {
      order: [0, 1, 2],
      speed: data.prizeSpeed
    }, {
      order: [0, 2, 1],
      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) {
      var TD = {
        title: '恭喜你',
        message: prize.message,
        icon: prize.imgs[0].src
      };
      _this2.onisTicket(TD);
      _this2.onisClick();
      // this.props.btnState(prize, "恭喜中奖了");
      // alert(`恭喜你抽到 ${prize.fonts[0].text} 号奖品`);
    };

    var thaks = function thaks() {
      var TD = {
        title: '很遗憾',
        message: '此次没有中奖',
        icon: '//img.maimairen.com/low-code/components/marquee/xiatu01.png'
      };
      _this2.onisTicket(TD);
      _this2.onisClick();
      // const prize = { imgs: [{ src: "//img.maimairen.com/low-code/components/marquee/xiatu01.png" }], fonts: [{ text: "谢谢参与" }] };
      // this.props.btnState(prize, "");
    };

    var clickBtn = function clickBtn(state) {
      var btnActive = state;
      var btn = '//img.maimairen.com/low-code/components/slot001/btn.png';
      var btnGif = '//img.maimairen.com/low-code/components/slot001/btn.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['block-container']
    }, /*#__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.title
    }, /*#__PURE__*/React.createElement("div", {
      className: styles.count
    }, this.state.count), /*#__PURE__*/React.createElement("div", {
      className: styles['count-message']
    }, "\u4ECA\u65E5\u5269\u4F59\u62BD\u5956\u6B21\u6570")), /*#__PURE__*/React.createElement("div", {
      className: styles.btn,
      onClick: this.onStarts
    }, this.state.isClick ? clickBtn(true) : clickBtn(false)), /*#__PURE__*/React.createElement("div", {
      className: styles.mask
    }, /*#__PURE__*/React.createElement(SlotMachine, {
      ref: this.myMachin
      // width={`55.8vw`}
      // height={`28vw`}
      ,
      blocks: blocks,
      prizes: prizes,
      slots: slots,
      defaultConfig: defaultConfig,
      onEnd: function onEnd(prize) {
        prize ? _onEnd(prize) : thaks();
      }
    })), /*#__PURE__*/React.createElement("div", {
      className: styles.windows
    }, /*#__PURE__*/React.createElement("img", {
      src: data.chooseImg.src2,
      className: styles['windows-img']
    })), /*#__PURE__*/React.createElement("div", {
      className: styles[this.state.isTicket ? 'noTicket' : 'ticket']
    }, /*#__PURE__*/React.createElement("div", {
      className: styles.textDescription
    }, /*#__PURE__*/React.createElement("div", {
      className: styles.title
    }, this.state.title), /*#__PURE__*/React.createElement("div", {
      className: styles[this.state.icon ? 'icon' : 'noIcon']
    }, /*#__PURE__*/React.createElement("img", {
      src: this.state.icon
    })), /*#__PURE__*/React.createElement("div", {
      className: styles.message
    }, this.state.message), /*#__PURE__*/React.createElement("div", {
      className: styles[this.state.icon ? 'getBtn' : 'noIcon']
    }, /*#__PURE__*/React.createElement("div", {
      className: styles.outer
    }, this.state.title === '很遗憾' ? /*#__PURE__*/React.createElement("div", {
      className: styles.inner,
      onClick: this.onStarts
    }, "\u518D\u73A9\u4E00\u6B21") : /*#__PURE__*/React.createElement("div", {
      className: styles.inner,
      onClick: this.onGetPrize
    }, "\u9886\u53D6\u5956\u54C1")))))))), this.state.writeMessage ? /*#__PURE__*/React.createElement(AddressComponent, {
      data: {
        touchState: true,
        mustName: false,
        mustPhone: true,
        mustEmail: true
      }
    }) : null)));
  };
  return MySlotMachineChild;
}(Component);
MySlotMachineChild.displayName = 'MySlotMachineChild';
export { MySlotMachineChild };