import _extends from "@babel/runtime/helpers/extends";
import * as React from 'react';
import "./index.scss";
var _double = function _double(doubleProps) {
  var width = doubleProps.width,
    isBgColor = doubleProps.isBgColor,
    bgColor = doubleProps.bgColor,
    prizeColor = doubleProps.prizeColor,
    prizeFontFamily = doubleProps.prizeFontFamily,
    prizeFontSize = doubleProps.prizeFontSize,
    prizeLineHeight = doubleProps.prizeLineHeight,
    titleBold = doubleProps.titleBold,
    titleFontSize = doubleProps.titleFontSize,
    titleFontFamily = doubleProps.titleFontFamily,
    titleColor = doubleProps.titleColor,
    titleLineHeight = doubleProps.titleLineHeight,
    backgroundImg = doubleProps.backgroundImg;
  var mainStyle = {
    style: {
      width: width + "%",
      backgroundColor: isBgColor ? bgColor : ''
    }
  };
  var prizeStyle = {
    style: {
      color: prizeColor,
      fontFamily: prizeFontFamily,
      fontSize: prizeFontSize + "vw",
      lineHeight: "" + prizeLineHeight,
      width: '100%',
      wordBreak: 'break-all'
    }
  };
  var titleStyle = {
    style: {
      fontWeight: titleBold ? 'bolder' : 'normal',
      textAlign: 'center',
      fontSize: titleFontSize + "vw",
      fontFamily: titleFontFamily,
      color: titleColor,
      lineHeight: "" + titleLineHeight
    }
  };
  var list = [{
    img: '',
    name: 'iphone13 pro 256G一台'
  }, {
    img: '',
    name: 'iphone13pro256G一台'
  }, {
    img: '',
    name: 'iphone13pro256G一台'
  }, {
    img: '',
    name: 'iphone13pro256G一台'
  }, {
    img: '',
    name: 'iphone13pro256G一台'
  }, {
    img: '',
    name: 'iphone 13 pro 256G 一台'
  }];
  // eslint-disable-next-line react-hooks/rules-of-hooks
  var _React$useState = React.useState({
      activeIndex: null,
      // count:4,
      active: 'paused',
      bgImg: 'is'
    }),
    state = _React$useState[0],
    setState = _React$useState[1];
  var doubleClick = function doubleClick(index) {
    if (index === state.activeIndex) {
      return;
    }
    setState({
      activeIndex: index,
      active: 'running',
      bgImg: 'is'
    });
    setTimeout(function () {
      setState({
        activeIndex: index,
        active: 'paused',
        bgImg: 'the'
      });
    }, 3000);
  };
  var activeIndex = state.activeIndex,
    active = state.active,
    bgImg = state.bgImg;
  return /*#__PURE__*/React.createElement("div", mainStyle, /*#__PURE__*/React.createElement("div", _extends({
    className: "title"
  }, titleStyle), "\u6D3B\u52A8\u65F6\u95F4\uFF1A2022.9.23-2022.9.30"), /*#__PURE__*/React.createElement("div", {
    className: "double-content"
  }, list.map(function (item, index) {
    return /*#__PURE__*/React.createElement("div", {
      className: "double-item container  " + (activeIndex === index && bgImg === 'is' ? 'action' : '') + " " + (bgImg === 'the' && activeIndex === index ? 'the' : 'is'),
      style: {
        animationsPaused: active,
        background: bgImg === 'the' && activeIndex === index ? "url('//img.maimairen.com/low-code/components/draw/the01.png') center/85% no-repeat" : "url('" + backgroundImg + "') center/85% no-repeat"
      },
      key: index,
      onClick: function onClick() {
        doubleClick(index);
      }
    }, bgImg === 'the' && activeIndex === index ? /*#__PURE__*/React.createElement("div", {
      className: "info"
    }, /*#__PURE__*/React.createElement("div", {
      className: "info-img"
    }, /*#__PURE__*/React.createElement("img", {
      src: "//img.maimairen.com/low-code/components/marquee-may/dishini01.png",
      alt: ""
    })), /*#__PURE__*/React.createElement("div", {
      className: "result"
    }, /*#__PURE__*/React.createElement("div", null, "\u606D\u559C\u4F60"), /*#__PURE__*/React.createElement("div", null, "\u62BD\u4E2D")), /*#__PURE__*/React.createElement("div", prizeStyle, item.name)) : '');
  })));
};
export default _double;