import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import _extends from "@babel/runtime/helpers/extends";
import "./index.scss";
import * as React from 'react';
import { Component, useState } from 'react';
import { LuckyWheel } from '@lucky-canvas/react';
import Winner from "../common/winner/index";
import ActivityBox from "../common/ActivityBox";
import Prize from "../common/prize";
import LuckDrawSucc from "../common/LuckDrawSucc";
// 转盘

var bigWheel = function bigWheel(bigWheelProps) {
  var _widthHeight$, _widthHeight$2, _widthHeight$3, _widthHeight$4, _XYmoves$, _XYmoves$2, _XYmoves$3, _XYmoves$4;
  var bgColor = bigWheelProps.bgColor,
    XYmoves = bigWheelProps.XYmoves,
    widthHeight = bigWheelProps.widthHeight;
  var bigwheelsryle = {
    style: {
      width: widthHeight ? "" + ((_widthHeight$ = widthHeight[0]) === null || _widthHeight$ === void 0 ? void 0 : _widthHeight$.value) + ((_widthHeight$2 = widthHeight[0]) === null || _widthHeight$2 === void 0 ? void 0 : _widthHeight$2.unit) : '',
      height: widthHeight ? "" + ((_widthHeight$3 = widthHeight[1]) === null || _widthHeight$3 === void 0 ? void 0 : _widthHeight$3.value) + ((_widthHeight$4 = widthHeight[1]) === null || _widthHeight$4 === void 0 ? void 0 : _widthHeight$4.unit) : '',
      background: bgColor,
      position: 'relative',
      marginTop: XYmoves && XYmoves.length > 0 ? "" + ((_XYmoves$ = XYmoves[1]) === null || _XYmoves$ === void 0 ? void 0 : _XYmoves$.value) + ((_XYmoves$2 = XYmoves[1]) === null || _XYmoves$2 === void 0 ? void 0 : _XYmoves$2.unit) : 0,
      marginLeft: XYmoves && XYmoves.length > 0 ? "" + ((_XYmoves$3 = XYmoves[0]) === null || _XYmoves$3 === void 0 ? void 0 : _XYmoves$3.value) + ((_XYmoves$4 = XYmoves[0]) === null || _XYmoves$4 === void 0 ? void 0 : _XYmoves$4.unit) : 0,
      overflowX: 'auto',
      overflowY: 'auto'
    }
  };

  // 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) {
    // console.log(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: "bigWheel"
  }, bigwheelsryle), /*#__PURE__*/React.createElement(LuckDrawSucc, {
    btnState: btnState,
    prizeTextList: prizeTextList,
    isOpenPrize: isOpenPrize
  }), /*#__PURE__*/React.createElement(BigWheelChild, {
    bigWheelProps: bigWheelProps,
    btnState: btnState
  }));
};
var BigWheelChild = /*#__PURE__*/function (_Component) {
  _inheritsLoose(BigWheelChild, _Component);
  function BigWheelChild(props) {
    var _this;
    _this = _Component.call(this, props) || this;
    _this.onStart = function () {
      _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 = BigWheelChild.prototype;
  _proto.render = function render() {
    var _this2 = this;
    var _this$props$bigWheelP = this.props.bigWheelProps,
      isAbsolute = _this$props$bigWheelP.isAbsolute,
      winnerTop = _this$props$bigWheelP.winnerTop,
      winnerTextColor = _this$props$bigWheelP.winnerTextColor,
      winnerFontFamily = _this$props$bigWheelP.winnerFontFamily,
      wheelHeight = _this$props$bigWheelP.wheelHeight,
      winnerSize = _this$props$bigWheelP.winnerSize,
      prizeFontSize = _this$props$bigWheelP.prizeFontSize,
      prizeFontFamily = _this$props$bigWheelP.prizeFontFamily,
      prizeFontTop = _this$props$bigWheelP.prizeFontTop,
      prizeImgTop = _this$props$bigWheelP.prizeImgTop,
      prizeImgWidth = _this$props$bigWheelP.prizeImgWidth,
      prizeSpeed = _this$props$bigWheelP.prizeSpeed,
      winnerOpacity = _this$props$bigWheelP.winnerOpacity,
      wheelBgImg = _this$props$bigWheelP.wheelBgImg,
      pointBgImg = _this$props$bigWheelP.pointBgImg,
      wheelBgPadding = _this$props$bigWheelP.wheelBgPadding,
      lineHeight = _this$props$bigWheelP.lineHeight,
      awardTextColor = _this$props$bigWheelP.awardTextColor,
      awardFontFamily = _this$props$bigWheelP.awardFontFamily,
      awardFontSize = _this$props$bigWheelP.awardFontSize;
    var _split = (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 wheelstyle = {
      style: {
        display: 'flex',
        flexDirection: 'row',
        justifyContent: justifyContent[bgH],
        alignItems: alignItems[bgV],
        paddingBottom: '20px'
      }
    };
    var winnerStyle = {
      style: {
        opacity: winnerOpacity,
        fontSize: winnerSize + "px",
        fontFamily: winnerFontFamily,
        position: 'relative',
        color: winnerTextColor,
        padding: winnerTop + "px",
        lineHeight: lineHeight + "px"
      }
    };
    // 转盘配置详情 https://100px.net/docs/wheel.html 或 https://blog.csdn.net/crazy_jialin/article/details/115613060
    // 背景
    var blocks = [{
      padding: wheelBgPadding + "vw",
      imgs: [{
        src: wheelBgImg,
        width: '100%',
        height: '100%',
        top: '0',
        rotate: true
      }]
    }];
    var prizes = [{
      background: '#fccd96',
      fonts: [{
        text: '15天vip',
        fontSize: prizeFontSize,
        fontStyle: prizeFontFamily,
        fontColor: '#FFFFFF',
        top: prizeFontTop + "%"
      }],
      imgs: [{
        src: 'https://img.maimairen.com/low-code/components/prize-list001/day15.png',
        width: prizeImgWidth + "%",
        top: prizeImgTop + "%"
      }]
    }, {
      background: '#FFFCEF',
      fonts: [{
        text: '1天vip',
        fontSize: prizeFontSize,
        fontStyle: prizeFontFamily,
        fontColor: '#F58B33',
        top: prizeFontTop + "%"
      }],
      imgs: [{
        src: 'https://img.maimairen.com/low-code/components/prize-list001/day1.png',
        width: prizeImgWidth + "%",
        top: prizeImgTop + "%"
      }]
    }, {
      background: '#fccd96',
      fonts: [{
        text: '1000金豆',
        fontSize: prizeFontSize,
        fontStyle: prizeFontFamily,
        fontColor: '#FFFFFF',
        top: prizeFontTop + "%"
      }],
      imgs: [{
        src: 'https://img.maimairen.com/low-code/components/prize-list001/bean1.png',
        width: prizeImgWidth + "%",
        top: prizeImgTop + "%"
      }]
    }, {
      background: '#FFFCEF',
      fonts: [{
        text: '300金豆',
        fontSize: prizeFontSize,
        fontStyle: prizeFontFamily,
        fontColor: '#F58B33',
        top: prizeFontTop + "%"
      }],
      imgs: [{
        src: 'https://img.maimairen.com/low-code/components/prize-list001/bean3.png',
        width: prizeImgWidth + "%",
        top: prizeImgTop + "%"
      }]
    }, {
      background: '#fccd96',
      fonts: [{
        text: '500金豆',
        fontSize: prizeFontSize,
        fontStyle: prizeFontFamily,
        fontColor: '#FFFFFF',
        top: prizeFontTop + "%"
      }],
      imgs: [{
        src: 'https://img.maimairen.com/low-code/components/prize-list001/bean5.png',
        width: prizeImgWidth + "%",
        top: prizeImgTop + "%"
      }]
    }, {
      background: '#FFFCEF',
      fonts: [{
        text: '7天vip',
        fontSize: prizeFontSize,
        fontStyle: prizeFontFamily,
        fontColor: '#F58B33',
        top: prizeFontTop + "%"
      }],
      imgs: [{
        src: 'https://img.maimairen.com/low-code/components/prize-list001/day15.png',
        width: prizeImgWidth + "%",
        top: prizeImgTop + "%"
      }]
    }];
    var buttons = [{
      radius: '50%',
      imgs: [{
        src: pointBgImg,
        height: '100%',
        top: '-100%'
      }]
    }];
    var defaultConfig = {
      speed: prizeSpeed
    };
    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 awardStyle = {
      style: {
        color: awardTextColor,
        fontFamily: awardFontFamily,
        fontSize: awardFontSize + "px"
      }
    };
    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: '1豆',
      img: '//img.maimairen.com/low-code/components/prize-list001/bean1.png'
    }, {
      text: '3豆',
      img: '//img.maimairen.com/low-code/components/prize-list001/bean3.png'
    }, {
      text: '5豆',
      img: '//img.maimairen.com/low-code/components/prize-list001/bean5.png'
    }];
    return /*#__PURE__*/React.createElement("div", {
      className: "bigWheel-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", wheelstyle, /*#__PURE__*/React.createElement(LuckyWheel, {
      ref: this.myLucky,
      width: wheelHeight + "vw",
      height: wheelHeight + "vw",
      blocks: blocks,
      prizes: prizes,
      buttons: buttons,
      "default-config": defaultConfig,
      onStart: this.onStart,
      onEnd: function onEnd(prize) {
        _this2.myLucky.current.$lucky.step = 0;
        _this2.props.btnState(prize);
      }
    }))), /*#__PURE__*/React.createElement(ActivityBox, {
      title: "\u4E2D\u5956\u540D\u5355"
    }, /*#__PURE__*/React.createElement(Winner, {
      className: "bigWheel-LuckyWheel",
      list: list,
      winnerStyle: winnerStyle
    })), /*#__PURE__*/React.createElement(ActivityBox, {
      title: "\u7CBE\u9009\u5956\u54C1"
    }, /*#__PURE__*/React.createElement(Prize, {
      className: "bigWheel-LuckyWheel",
      list: prizeList,
      Style: awardStyle
    })));
  };
  return BigWheelChild;
}(Component);
BigWheelChild.displayName = 'BigWheelChild';
export default bigWheel;