layui.define(['jquery', 'element'], function (exports) {
    "use strict";

    var $ = layui.jquery;
    var element = layui.element;

    var page = function (opt) {
        this.option = opt;
    };

    /**
     * @since Pear Admin 4.0
     *
     * 创建 Page 页面
     */
    page.prototype.render = function (opt) {
        var option = {
            elem: opt.elem,
            url: opt.url,
            width: opt.width || "100%",
            height: opt.height || "100%",
            title: opt.title
        }
        renderContent(option);
        return new page(option);
    }

    /**
     * @since Pear Admin 4.0
     *
     * 切换 Page 页面
     */
    page.prototype.changePage = function (options) {
        const $frame = $(`#${this.option.elem} .pear-page-content`);
        if (options.type === "_iframe") {
            $frame.html(`<iframe src='${options.href}' scrolling='auto' frameborder='0' allowfullscreen='true'></iframe>`);
        } else {
            $.ajax({
                url: options.href,
                type: 'get',
                dataType: 'html',
                success: function (data) {
                    $frame.html(data)
                },
                error: function (xhr) {
                    return layer.msg('Status:' + xhr.status + '，' + xhr.statusText + '，请稍后再试！');
                }
            });
        }
        $frame.attr("type", options.type);
        $frame.attr("href", options.href);
    }

    page.prototype.refresh = function (loading) {
        var $frameLoad = $(`#${this.option.elem} .pear-page-loading`);
        var $frame = $(`#${this.option.elem} .pear-page-content`);
        if (loading) {
            $frameLoad.css({
                display: 'block'
            });
        }
        if ($frame.attr("type") === "_iframe") {
            $frame.html(`<iframe src='${$frame.attr("href")}' scrolling='auto' frameborder='0' allowfullscreen='true'></iframe>`);
            const $contentFrame = $frame.find("iframe");
            $contentFrame.on("load", () => {
                $frameLoad.fadeOut(1000);
            })
        } else {
            $.ajax({
                type: 'get',
                url: $frame.attr("href"),
                dataType: 'html',
                success: function (data) {
                    $frame.html(data)
                    $frameLoad.fadeOut(1000);
                    element.init();
                },
                error: function (xhr) {
                    return layer.msg('Status:' + xhr.status + '，' + xhr.statusText + '，请稍后再试！');
                }
            });
        }
    }

    function renderContent(option) {
        $("#" + option.elem).html(`
			<div class='pear-page'>
				<div class='pear-page-content' type='${option.type}' href='${option.url}'></div>
				<div class="pear-page-loading">
					<div class="ball-loader">
						<span></span>
						<span></span>
						<span></span>
						<span></span>
					</div>
				</div>
			</div>`);

        var $frame = $("#" + option.elem).find(".pear-page-content");

        if (option.type === "_iframe") {
            $frame.html(`<iframe src='${option.url}' scrolling='auto' frameborder='0' allowfullscreen='true'></iframe>`);
        } else {
            $.ajax({
                url: option.url,
                type: 'get',
                dataType: 'html',
                success: function (data) {
                    $frame.html(data);
                },
                error: function (xhr) {
                    return layer.msg('Status:' + xhr.status + '，' + xhr.statusText + '，请稍后再试！');
                }
            });
        }
    }

    exports('page', new page());
});