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 { Slider } from '@whalecloud/fdx';

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

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

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

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

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

            if (!this.timer) {
                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 * -(this.props.data && this.props.data.length * 200),
                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;

            return React.createElement(
                'div',
                { className: 'find-good-things-warp' },
                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: '312px', onClick: this.handleHeaderImgClick.bind(this), className: 'find-good-things-img', src: imgUrl })
                ),
                React.createElement(
                    'div',
                    { style: { height: 312, overflow: 'hidden', marginLeft: 20 } },
                    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 * 410, transform: 'translateX(' + this.state.translateX + 'px)' } },
                            [1, 2].map(function () {
                                return data && data.map(function (item, index) {
                                    return React.createElement(
                                        'div',
                                        { key: index, onClick: function onClick(e) {
                                                return _this3.clickItem(e, item);
                                            }, className: 'find-good-things-item ' + (index % 2 === 1 ? 'find-good-things-pb40' : 'find-good-things-pt40') },
                                        index % 2 === 0 ? React.createElement(
                                            React.Fragment,
                                            null,
                                            React.createElement(
                                                'div',
                                                { className: 'find-good-things-name find-good-things-mb12' },
                                                item.productName
                                            ),
                                            React.createElement('img', { width: '150', src: item.productImageUrl })
                                        ) : React.createElement(
                                            React.Fragment,
                                            null,
                                            React.createElement('img', { width: '150', src: item.productImageUrl }),
                                            React.createElement(
                                                'div',
                                                { className: 'find-good-things-name find-good-things-mt12' },
                                                item.productName
                                            )
                                        )
                                    );
                                });
                            })
                        ),
                        React.createElement(Slider, { onChange: function onChange(value) {
                                return _this3.sliderChange(value);
                            }, className: 'find-good-things-slider find-good-things-show', value: this.state.sliderData, tooltipVisible: false })
                    )
                )
            );
        }
    }]);

    return FindGoodThings;
}(React.Component);

FindGoodThings.defaultProps = {
    imgUrl: "https://s1.ax1x.com/2020/11/10/Bqp8JK.jpg",
    showWidth: "600px"
};
export default FindGoodThings;