define(["i18n"],function (i18n) {
    var tmpl = " \
<div id='${uid}'> \
    <div class='wev-loading ${clsName.trim()}'><span>${text.trim()}</span></div> \
    {@if btn}<div class='wev-more-btn'><span>${btn}</span></div>{@/if} \
    {@if label}<div class='wev-loading-tip'>${label}</div>{@/if} \
</div>";
    var Loading = function (cfg) {
        var props = {
            text: i18n.LOADING_DATA,
            clsName: "wev-refresh-loading",
            animation: false, // 1 wev-hide wev-show
            delay: 0,  // ms 可与animation属性配合使用
            btn: "",
            label: "", // 与btn配合使用
            onclick: function () { }
        };

        $.extend(true, props, cfg);

        if (props.btn === true || props.btn === 1) {
            props.clsName = "wev-more-loading";
            props.btn = i18n.LOAD_MORE;
            props.label = i18n.NO_DATA;
        }

        this.tmpl = tmpl;
        this.props = props;

        this.setRefs = function (el, clsName) {
            props.refs = {
                el: el,
                clsName: clsName
            };
        };

        this.mounted = function () {
            initBtn.call(this);

            if (!props.animation) return;

            var $loading = this.$el.find(".wev-loading");

            $loading.on("webkitAnimationEnd animationend", function () {
                if (props.animation === 1 && $(this).hasClass("wev-hide")) {
                    $(this).hide();
                }
            });
        };

        function initBtn() {
            if (!props.btn) return;

            var that = this, $el = this.$el;

            $el.find(".wev-more-btn").on("click", function () {
                $(this).hide();
                $el.find(".wev-loading-tip").hide();
                that.show();
                props.onclick(function (isshowBtn, isshowLabel) {
                    that.hide(isshowBtn, isshowLabel);
                });
            });
        }
    };

    Loading.prototype = {
        toggle: function(isshow) {
            if (isshow) return this.show();

            var args = [].slice.call(arguments).slice(1);

            return this.hide.apply(this, args);
        },
        show: function () {
            var props = this.props,
                refs = props.refs;
            var $loading = this.$el.find(".wev-loading");

            $loading.show();

            if(props.btn) {
                this.$el.find(".wev-more-btn").hide();
            }

            if (props.delay) {
                $loading.data("timestamp", new Date().valueOf());
            }

            if (props.animation === 1) {
                $loading.removeClass("wev-hide").addClass("wev-show");
            }

            if (refs && refs.el) {
                $(refs.el).addClass(refs.clsName);
            }
        },
        hide: function (isshowBtn, isshowLabel) {
            var props = this.props;
            var $el = this.$el;
            var $loading = $el.find(".wev-loading");

            if (props.btn) {
                $el.find(".wev-more-btn").toggle(isshowBtn);
            }

            if (props.label) {
                $el.find(".wev-loading-tip").toggle(isshowLabel);
            }

            if (!props.delay || !props.animation) return $loading.hide();

            var vm = this;
            var refs = props.refs;
            var timestamp = new Date().valueOf() - $loading.data("timestamp");

            if (timestamp < props.delay) {
                return setTimeout(function () {
                    vm.hide();
                }, 100);
            }

            if (props.animation === 1) {
                $loading.addClass("wev-hide").removeClass("wev-show");
            }

            if (refs && refs.el) {
                $(refs.el).removeClass(refs.clsName);
            }
            // loading的隐藏在 animationend中做
        }
    };

    return Loading;
});