import _extends from 'babel-runtime/helpers/extends';
import _objectDestructuringEmpty from 'babel-runtime/helpers/objectDestructuringEmpty';
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 Draggable from 'react-draggable';
import cn from 'classnames';
import { message, Row, Tooltip } from 'antd';
import LocaleReceiver from 'antd/es/locale-provider/LocaleReceiver';
import { ConfigConsumer } from '../config-provider';
import defaultLocale from '../locale/default';
import Icon from '../icon';
import "@whalecloud/fdx-theme-fdx/Imageviewer.less";
// 加法
var accAdd = function accAdd(arg1, arg2) {
    var r1 = void 0;
    var r2 = void 0;
    var newArg1 = void 0;
    var newArg2 = void 0;
    try {
        r1 = arg1.toString().split(".")[1].length;
    } catch (e) {
        r1 = 0;
    }
    try {
        r2 = arg2.toString().split(".")[1].length;
    } catch (e) {
        r2 = 0;
    }
    var c = Math.abs(r1 - r2);
    var m = Math.pow(10, Math.max(r1, r2));
    if (c > 0) {
        var cm = Math.pow(10, c);
        if (r1 > r2) {
            newArg1 = Number(arg1.toString().replace(".", ""));
            newArg2 = Number(arg2.toString().replace(".", "")) * cm;
        } else {
            newArg1 = Number(arg1.toString().replace(".", "")) * cm;
            newArg2 = Number(arg2.toString().replace(".", ""));
        }
    } else {
        newArg1 = Number(arg1.toString().replace(".", ""));
        newArg2 = Number(arg2.toString().replace(".", ""));
    }
    return (newArg1 + newArg2) / m;
};
// 减法
var accSub = function accSub(arg1, arg2) {
    var r1 = void 0;
    var r2 = void 0;
    try {
        r1 = arg1.toString().split(".")[1].length;
    } catch (e) {
        r1 = 0;
    }
    try {
        r2 = arg2.toString().split(".")[1].length;
    } catch (e) {
        r2 = 0;
    }
    var m = Math.pow(10, Math.max(r1, r2));
    // 动态控制精度长度
    var n = r1 >= r2 ? r1 : r2;
    return ((arg1 * m - arg2 * m) / m).toFixed(n);
};

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

    function Imageviewer(props) {
        _classCallCheck(this, Imageviewer);

        var _this = _possibleConstructorReturn(this, (Imageviewer.__proto__ || Object.getPrototypeOf(Imageviewer)).call(this, props));

        _this.prev = function () {
            var _this$props$data = _this.props.data,
                data = _this$props$data === undefined ? [] : _this$props$data;
            var index = _this.state.index;

            if (index === 0 && data.length > 0) {
                return false;
            }
            if (index > 0 && data.length > 0) {
                _this.setState({
                    index: index - 1
                });
            }
            _this.backPosition();
        };
        _this.next = function () {
            var _this$props$data2 = _this.props.data,
                data = _this$props$data2 === undefined ? [] : _this$props$data2;
            var index = _this.state.index;

            if (index === data.length - 1 && data.length > 0) {
                return false;
            }
            if (index < data.length - 1 && data.length > 0) {
                _this.setState({
                    index: index + 1
                });
            }
            _this.backPosition();
        };
        _this.backPosition = function () {
            setTimeout(function () {
                _this.setState({ scale: 1 });
                _this.setState({ defaultPosition: { x: 0, y: 0 } });
            }, 500);
        };
        // 缩小
        _this.onToOut = function () {
            var scale = _this.state.scale;

            if (scale > 0.2) {
                _this.setState({ scale: accSub(scale, 0.2) });
            } else {
                message.warning("已缩小到最小级别");
            }
        };
        // 放大
        _this.onToIn = function () {
            var scale = _this.state.scale;

            if (scale < 3) {
                _this.setState({ scale: accAdd(scale, 0.2) });
            } else {
                message.warning("已放大到最大级别");
            }
        };
        _this.handleStart = function () {
            _this.setState({ defaultPosition: null });
        };
        _this.handleClose = function () {
            var _this$props$onClose = _this.props.onClose,
                onClose = _this$props$onClose === undefined ? function () {} : _this$props$onClose;

            _this.setState({
                scale: 1
            });
            onClose();
        };
        _this.state = {
            scale: 1,
            defaultPosition: null,
            index: 0
        };
        return _this;
    }

    _createClass(Imageviewer, [{
        key: 'componentWillReceiveProps',
        value: function componentWillReceiveProps(nextProps) {
            this.setState({
                index: nextProps.index
            });
        }
    }, {
        key: 'render',
        value: function render() {
            var _this2 = this;

            var _props = this.props,
                _props$data = _props.data,
                data = _props$data === undefined ? [] : _props$data,
                shadeStyle = _props.shadeStyle,
                imageStyle = _props.imageStyle,
                visible = _props.visible;
            var _state = this.state,
                scale = _state.scale,
                defaultPosition = _state.defaultPosition,
                index = _state.index;

            return React.createElement(
                ConfigConsumer,
                null,
                function (_ref) {
                    _objectDestructuringEmpty(_ref);

                    return React.createElement(
                        LocaleReceiver,
                        { componentName: 'ImageViewer', defaultLocale: defaultLocale.ImageViewer },
                        function (locale) {
                            return React.createElement(
                                'div',
                                { className: 'imageviewer', style: { display: '' + (visible ? "block" : "none") } },
                                React.createElement(
                                    'div',
                                    { className: 'shadeWrapper', style: _extends({}, shadeStyle) },
                                    React.createElement(
                                        'div',
                                        { className: 'inner' },
                                        React.createElement(
                                            Draggable,
                                            { defaultPosition: { x: 0, y: 0 }, position: defaultPosition, scale: 1, onStart: _this2.handleStart },
                                            React.createElement(
                                                'span',
                                                null,
                                                React.createElement(
                                                    'div',
                                                    { className: cn({ "imageWrapper": true, "hide": false }), style: { transform: 'scale(' + scale + ')' } },
                                                    React.createElement('img', { className: "image", id: 'TargetImage', src: data[index], alt: data[index], style: _extends({ width: "100%" }, imageStyle) })
                                                )
                                            )
                                        )
                                    ),
                                    React.createElement(
                                        Row,
                                        { type: 'flex', className: 'operateTool' },
                                        React.createElement(
                                            Tooltip,
                                            { title: locale.previousOne },
                                            React.createElement(
                                                'div',
                                                { onClick: _this2.prev },
                                                React.createElement(Icon, { type: 'arrow-left' })
                                            )
                                        ),
                                        React.createElement(
                                            Tooltip,
                                            { title: locale.nextOne },
                                            React.createElement(
                                                'div',
                                                { onClick: _this2.next },
                                                React.createElement(Icon, { type: 'arrow-right' })
                                            )
                                        ),
                                        React.createElement(
                                            Tooltip,
                                            { title: locale.zoomIn },
                                            React.createElement(
                                                'div',
                                                { onClick: _this2.onToIn },
                                                React.createElement(Icon, { type: 'plus' })
                                            )
                                        ),
                                        React.createElement(
                                            Tooltip,
                                            { title: locale.zoomOut },
                                            React.createElement(
                                                'div',
                                                { onClick: _this2.onToOut },
                                                React.createElement(Icon, { type: 'minus' })
                                            )
                                        )
                                    ),
                                    React.createElement(
                                        'div',
                                        { className: 'closeBtnWrapper', onClick: _this2.handleClose },
                                        React.createElement(Icon, { type: 'close', style: { fontSize: "24px" } })
                                    )
                                )
                            );
                        }
                    );
                }
            );
        }
    }]);

    return Imageviewer;
}(React.Component);

Imageviewer.defaultProps = {
    data: [],
    onClose: function onClose() {},
    shadeStyle: {},
    imageStyle: {},
    wrapperStyle: {},
    innerStyle: {},
    scale: 1,
    visible: false
};
;
export default Imageviewer;