import _classCallCheck from "babel-runtime/helpers/classCallCheck";
import _createClass from "babel-runtime/helpers/createClass";
import _possibleConstructorReturn from "babel-runtime/helpers/possibleConstructorReturn";
import _inherits from "babel-runtime/helpers/inherits";
import React from "react";
import "./index.less";
import CountDown from "../count-down/index";
import DealDayItem from "../deal-day-item";

var FlashSales = function (_React$Component) {
    _inherits(FlashSales, _React$Component);

    function FlashSales() {
        _classCallCheck(this, FlashSales);

        var _this = _possibleConstructorReturn(this, (FlashSales.__proto__ || Object.getPrototypeOf(FlashSales)).apply(this, arguments));

        _this.state = {
            translateX: 0,
            sliderData: 0
        };
        _this.timer = null;
        return _this;
    }

    _createClass(FlashSales, [{
        key: "showImg",
        value: function showImg() {
            var _this2 = this;

            var slidingMode = this.props.slidingMode;

            clearInterval(this.timer);
            this.timer = null;
            if (slidingMode === "Auto") {
                this.timer = setInterval(function () {
                    _this2.setState({
                        translateX: _this2.state.translateX - 1.5,
                        sliderData: Math.abs(_this2.state.translateX) / (_this2.props.data && _this2.props.data.length * 200) * 100
                    });
                    if (_this2.state.sliderData > 100) {
                        _this2.setState({
                            translateX: 0,
                            sliderData: 0
                        });
                    }
                }, 40);
            }
        }
    }, {
        key: "sliderChange",
        value: function sliderChange(value) {
            this.setState({
                translateX: value / 100 * -23800,
                sliderData: value
            });
        }
    }, {
        key: "mouseMoveEvent",
        value: function mouseMoveEvent() {
            clearInterval(this.timer);
            this.timer = null;
        }
    }, {
        key: "clickItem",
        value: function clickItem(e, item) {
            e.stopPropagation();
            var clickItem = this.props.clickItem;

            clickItem && clickItem(item);
        }
    }, {
        key: "handleHeaderImgClick",
        value: function handleHeaderImgClick() {
            var clickHeaderImg = this.props.clickHeaderImg;

            clickHeaderImg && clickHeaderImg();
        }
    }, {
        key: "componentDidMount",
        value: function componentDidMount() {
            this.showImg();
        }
    }, {
        key: "componentWillUnmount",
        value: function componentWillUnmount() {
            if (this.timer) {
                clearInterval(this.timer);
            }
        }
    }, {
        key: "render",
        value: function render() {
            var _this3 = this;

            var _props = this.props,
                imgUrl = _props.imgUrl,
                data = _props.data,
                showWidth = _props.showWidth,
                startTime = _props.startTime,
                timeStyle = _props.timeStyle,
                imageLocation = _props.imageLocation,
                slidingMode = _props.slidingMode;
            var sliderData = this.state.sliderData;

            return React.createElement(
                "div",
                { className: "find-good-things-warp" },
                imageLocation === "Left" && React.createElement(
                    "div",
                    { className: "find-good-things-msStyle" },
                    !!startTime && React.createElement(
                        "div",
                        { style: {
                                position: "absolute",
                                top: "245px",
                                width: "100%",
                                textAlign: "center"
                            } },
                        React.createElement(CountDown, { startTime: startTime, timeStyle: timeStyle })
                    ),
                    React.createElement("img", { width: "232px", height: "300px", className: "find-good-things-img", src: imgUrl, onClick: this.handleHeaderImgClick.bind(this) })
                ),
                React.createElement(
                    "div",
                    { style: {
                            position: "relative",
                            height: 300,
                            overflow: "hidden",
                            marginLeft: 16
                        } },
                    slidingMode !== "Auto" && sliderData > 0 && React.createElement("div", { style: {
                            position: "absolute",
                            width: "25px",
                            height: "72px",
                            zIndex: 2,
                            left: "0",
                            top: "114px",
                            background: "url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjVweCIgaGVpZ2h0PSI3MnB4IiB2aWV3Qm94PSIwIDAgMjUgNzIiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+YXJyb3ctbGVmdDwvdGl0bGU+CiAgICA8ZyBpZD0i6aaW6aG1IiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0i6aaW6aG1LeS4tOaXtiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTM2OC4wMDAwMDAsIC0xNDU4LjAwMDAwMCkiPgogICAgICAgICAgICA8ZyBpZD0iYXJyb3ctbGVmdCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzY4LjAwMDAwMCwgMTQ1OC4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxyZWN0IGlkPSLnn6nlvaIiIGZpbGw9IiMwMDAwMDAiIG9wYWNpdHk9IjAuMTk5NDA0NzYyIiB4PSIwIiB5PSIwIiB3aWR0aD0iMjUiIGhlaWdodD0iNzIiPjwvcmVjdD4KICAgICAgICAgICAgICAgIDxwb2x5bGluZSBpZD0i6Lev5b6ELTIiIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBwb2ludHM9IjE2LjgzMjQwNDkgMjcgOCAzNS44MzI0MDQ5IDE2LjgzMjQwNDkgNDQuNjY0ODA5OCI+PC9wb2x5bGluZT4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+) no-repeat 0 0"
                        }, onClick: function onClick() {
                            if (sliderData > 0) {
                                _this3.sliderChange(sliderData - 1);
                            }
                        } }),
                    React.createElement(
                        "div",
                        { className: "find-good-things-cot", style: { width: showWidth }, onMouseMove: function onMouseMove() {
                                return _this3.mouseMoveEvent();
                            }, onMouseLeave: function onMouseLeave() {
                                return _this3.showImg();
                            } },
                        React.createElement(
                            "div",
                            { style: {
                                    width: data && data.length * 238,
                                    transform: "translateX(" + this.state.translateX + "px)"
                                } },
                            [1, 2].map(function () {
                                return data && data.map(function (item, index) {
                                    return React.createElement(
                                        "div",
                                        { key: index, className: "find-good-things-item", onClick: function onClick(e) {
                                                return _this3.clickItem(e, item);
                                            } },
                                        React.createElement(DealDayItem, { productItem: item })
                                    );
                                });
                            })
                        ),
                        slidingMode !== "Auto" && sliderData < this.props.data.length - 4 && React.createElement("div", { style: {
                                position: "absolute",
                                width: "25px",
                                height: "72px",
                                zIndex: 2,
                                right: "0",
                                top: "114px",
                                background: "url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjVweCIgaGVpZ2h0PSI3MnB4IiB2aWV3Qm94PSIwIDAgMjUgNzIiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+YXJyb3ctcmlnaHQ8L3RpdGxlPgogICAgPGcgaWQ9IummlumhtSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9IummlumhtS3kuLTml7YiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMjk1LjAwMDAwMCwgLTE0NTguMDAwMDAwKSI+CiAgICAgICAgICAgIDxnIGlkPSJhcnJvdy1yaWdodCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTMwNy41MDAwMDAsIDE0OTQuMDAwMDAwKSBzY2FsZSgtMSwgMSkgdHJhbnNsYXRlKC0xMzA3LjUwMDAwMCwgLTE0OTQuMDAwMDAwKSB0cmFuc2xhdGUoMTI5NS4wMDAwMDAsIDE0NTguMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8cmVjdCBpZD0i55+p5b2iIiBmaWxsPSIjMDAwMDAwIiBvcGFjaXR5PSIwLjE5OTQwNDc2MiIgeD0iMCIgeT0iMCIgd2lkdGg9IjI1IiBoZWlnaHQ9IjcyIj48L3JlY3Q+CiAgICAgICAgICAgICAgICA8cG9seWxpbmUgaWQ9Iui3r+W+hC0yIiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgcG9pbnRzPSIxNi44MzI0MDQ5IDI3IDggMzUuODMyNDA0OSAxNi44MzI0MDQ5IDQ0LjY2NDgwOTgiPjwvcG9seWxpbmU+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==) no-repeat 0 0"
                            }, onClick: function onClick() {
                                if (sliderData < _this3.props.data.length - 4) {
                                    _this3.sliderChange(sliderData + 1);
                                }
                            } })
                    )
                ),
                imageLocation == "Right" && React.createElement(
                    "div",
                    { className: "find-good-things-msStyle" },
                    !!startTime && React.createElement(
                        "div",
                        { style: {
                                position: "absolute",
                                top: "245px",
                                width: "100%",
                                textAlign: "center"
                            } },
                        React.createElement(CountDown, { startTime: startTime, timeStyle: timeStyle })
                    ),
                    React.createElement("img", { width: "232px", height: "300px", className: "find-good-things-img", src: imgUrl, onClick: this.handleHeaderImgClick.bind(this) })
                )
            );
        }
    }]);

    return FlashSales;
}(React.Component);

FlashSales.defaultProps = {
    imgUrl: "https://s1.ax1x.com/2020/11/10/Bqp8JK.jpg",
    showWidth: "952px",
    slidingMode: "Auto",
    imageLocation: "Left"
};
export default FlashSales;