'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

require('./index.less');

var _index = require('../count-down/index');

var _index2 = _interopRequireDefault(_index);

var _fdx = require('@whalecloud/fdx');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

var FindGoodThings = function (_React$Component) {
    (0, _inherits3['default'])(FindGoodThings, _React$Component);

    function FindGoodThings() {
        (0, _classCallCheck3['default'])(this, FindGoodThings);

        var _this = (0, _possibleConstructorReturn3['default'])(this, (FindGoodThings.__proto__ || Object.getPrototypeOf(FindGoodThings)).apply(this, arguments));

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

    (0, _createClass3['default'])(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,
                imageLocation = _props.imageLocation;

            return _react2['default'].createElement(
                'div',
                { className: 'find-good-things-warp', style: { display: 'flex', flexDirection: imageLocation === 'Left' ? 'row' : 'row-reverse' } },
                _react2['default'].createElement(
                    'div',
                    { className: 'find-good-things-msStyle' },
                    !!startTime && _react2['default'].createElement(
                        'div',
                        { style: { position: 'absolute', top: '245px', width: '100%', textAlign: 'center' } },
                        _react2['default'].createElement(_index2['default'], { startTime: startTime, timeStyle: timeStyle })
                    ),
                    _react2['default'].createElement('img', { width: '232px', height: '312px', onClick: this.handleHeaderImgClick.bind(this), className: 'find-good-things-img', src: imgUrl })
                ),
                _react2['default'].createElement(
                    'div',
                    { style: { height: 312, overflow: 'hidden', marginLeft: 20 } },
                    _react2['default'].createElement(
                        'div',
                        { className: 'find-good-things-cot', style: { width: showWidth }, onMouseMove: function onMouseMove() {
                                return _this3.mouseMoveEvent();
                            }, onMouseLeave: function onMouseLeave() {
                                return _this3.showImg();
                            } },
                        _react2['default'].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 _react2['default'].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 ? _react2['default'].createElement(
                                            _react2['default'].Fragment,
                                            null,
                                            _react2['default'].createElement(
                                                'div',
                                                { className: 'find-good-things-name find-good-things-mb12' },
                                                item.productName
                                            ),
                                            _react2['default'].createElement('img', { width: '150', src: item.productImageUrl })
                                        ) : _react2['default'].createElement(
                                            _react2['default'].Fragment,
                                            null,
                                            _react2['default'].createElement('img', { width: '150', src: item.productImageUrl }),
                                            _react2['default'].createElement(
                                                'div',
                                                { className: 'find-good-things-name find-good-things-mt12' },
                                                item.productName
                                            )
                                        )
                                    );
                                });
                            })
                        ),
                        _react2['default'].createElement(_fdx.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;
}(_react2['default'].Component);

FindGoodThings.defaultProps = {
    imgUrl: "https://s1.ax1x.com/2020/11/10/Bqp8JK.jpg",
    showWidth: "600px",
    imageLocation: 'right'
};
exports['default'] = FindGoodThings;
module.exports = exports['default'];