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());
});