{extend name="common/base" /}
{block name="style"}
<style>
.gen-tip{background:#fff8e6;border:1px solid #ffe1a8;color:#8a6d3b;border-radius:4px;padding:12px 14px;line-height:1.9;margin-bottom:18px;}
.gen-tip .layui-icon{margin-right:6px;color:#ffb800;}
</style>
{/block}
<!-- 主体 -->
{block name="body"}
<div class="p-3">
	{if condition="$statOpen eq false"}
	<div class="gen-tip">
		<i class="layui-icon layui-icon-tips"></i>
		网站统计开关未打开，如需查看统计数据，统计开关在 基础-&gt;网站配置-&gt;核心配置-&gt;统计开关。Tips：开启后会略微加重数据库负担，请酌情开启。
	</div>
	{/if}
	<div style="display:flex;align-items:flex-end;justify-content:space-between;border-bottom:1px solid #eee;">
		<div class="layui-tab layui-tab-brief" lay-filter="daysTab" style="margin:0;flex:1 1 auto;">
			<ul class="layui-tab-title" style="border-bottom:none;">
				<li class="layui-this" data-days="1">今天</li>
				<li data-days="7">近 7 天</li>
				<li data-days="30">近 30 天</li>
				<li data-days="0">全部</li>
			</ul>
		</div>
		<div class="layui-word-aux" style="color:#999;font-size:12px;padding-bottom:10px;">访客从这些页面进入网站（一次会话的第一个页面算入口）</div>
	</div>
	<table class="layui-hide" id="startpage" lay-filter="startpage"></table>
</div>
{/block}
<!-- /主体 -->

<!-- 脚本 -->
{block name="script"}
<script>
function tr(text) {
	return window.MiuAdminI18n ? window.MiuAdminI18n.translate(text) : text;
}

function durationPart(value, unit) {
	var english = window.MiuAdminI18n && window.MiuAdminI18n.getLocale() === 'en';
	return value + (english ? ' ' : '') + tr(unit);
}

function fmtStay(sec) {
	sec = parseInt(sec, 10) || 0;
	if (sec <= 0) return '—';
	if (sec < 60) return durationPart(sec, '秒');
	var m = Math.floor(sec / 60), r = sec % 60;
	if (m < 60) return durationPart(m, '分') + (r ? durationPart(r, '秒') : '');
	return durationPart(Math.floor(m / 60), '小时') + durationPart(m % 60, '分');
}

//页面网址渲染成可点的新窗口链接
function pageUrlLink(u) {
	u = layui.util.escape(u || '');
	if (!u) return '—';
	return '<a href="' + u + '" target="_blank" title="' + u + '" style="color:#1e9fff;">' + u + '</a>';
}

layui.use(['tool', 'tablePlus', 'element'], function () {
	var table = layui.tablePlus, element = layui.element, $ = layui.jquery;
	var currentDays = 1;

	function renderTable() {
		var options = {
			title: tr('入口页面'),
			where: {days: currentDays},
			page: {curr: 1},
			text: {none: tr('暂无入口数据')},
			cols: [[
				{field: 'title', title: tr('页面标题'), minWidth: 160},
				{field: 'url', title: tr('页面网址'), minWidth: 240, templet: function (d) {
					return pageUrlLink(d.url);
				}},
				{field: 'entry_cnt', title: tr('入口次数'), width: 100, align: 'center'},
				{field: 'uv', title: tr('访客数'), width: 90, align: 'center'},
				{field: 'ip', title: tr('IP 数'), width: 90, align: 'center'},
				{field: 'avg_stay', title: tr('平均停留'), width: 110, align: 'center', templet: function (d) {
					return fmtStay(d.avg_stay);
				}}
			]]
		};
		if (layui.pageTable) {
			layui.pageTable.reload(options);
			return;
		}
		layui.pageTable = table.render($.extend(options, {
			elem: '#startpage',
			url: "{:url('admin/analysis/startpage')}",
			page: true,
			limit: 20,
			height: 'full-70'
		}));
	}

	renderTable();
	window.addEventListener('miu-admin-locale-change', renderTable);

	//切换时间范围：点哪个 tab 就按哪个天数重新拉数据
	element.on('tab(daysTab)', function () {
		currentDays = parseInt($(this).data('days'), 10) || 0;
		renderTable();
	});
});
</script>
{/block}
<!-- /脚本 -->