{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="viewpage" lay-filter="viewpage"></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 fmtTime(ts) {
	ts = parseInt(ts, 10) || 0;
	if (!ts) return '—';
	var d = new Date(ts * 1000), p = function (n) { return (n < 10 ? '0' : '') + n; };
	return (d.getMonth() + 1) + '-' + p(d.getDate()) + ' ' + p(d.getHours()) + ':' + p(d.getMinutes());
}

//完整时间（悬停显示用），formatTime 是 base.html 里带的
function fullTime(ts) {
	ts = parseInt(ts, 10) || 0;
	return ts ? formatTime(ts) : '';
}

//秒数说成人话
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, '分');
}

//HTTP 状态码上色：2xx 绿、3xx 蓝、4xx 橙、5xx 红，0 表示没采到
function statusBadge(code) {
	code = parseInt(code, 10) || 0;
	if (!code) return '<span style="color:#999;">—</span>';
	var cls = 'layui-bg-green';
	if (code >= 500) cls = 'layui-bg-red';
	else if (code >= 400) cls = 'layui-bg-orange';
	else if (code >= 300) cls = 'layui-bg-blue';
	return '<span class="layui-badge ' + cls + '">' + code + '</span>';
}

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

function displayAgentLabel(value) {
	value = value || '';
	return value === '未知浏览器' || value === '未知系统' ? tr(value) : value;
}

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

	//页面行 / 访问记录行共用同一套列，靠 row_type 区分渲染
	treeTable.render({
		elem: '#viewpage',
		id: 'viewpage',
			url: "{:url('admin/analysis/viewpage')}",
		page: true,
		limit: 20,
		height: 'full-70',
		where: {days: 1},
		text: {none: '暂无受访数据'},
		tree: {
			customName: {id: 'id', pid: 'parentId', children: 'children', isParent: 'isParent', name: 'name'},
			data: {isSimpleData: true},
			view: {showIcon: false, expandAllDefault: false}
		},
		cols: [
			[
				{field: 'name', title: '页面 / 访问记录', minWidth: 260, templet: function (d) {
					if (d.row_type === 'page') {
						var u = layui.util.escape(d.page_url);
						return '<a href="' + u + '" target="_blank" title="' + u + '" style="color:#333;font-weight:600;">'
							+ layui.util.escape(d.title) + '</a>'
							+ '<span style="color:#999;font-size:12px;margin-left:8px;">' + u + '</span>';
					}
					var html = '<span style="font-weight:600;">' + layui.util.escape(d.ip) + '</span>'
						+ '<span style="color:#999;margin-left:8px;font-size:12px;">'
						+ layui.util.escape(displayAgentLabel(d.browser)) + ' · ' + layui.util.escape(displayAgentLabel(d.os)) + '</span>';
					if (d.is_entry == 1) {
						html += ' <span class="layui-badge layui-bg-blue">' + tr('入口') + '</span>';
					}
					return html;
				}},
				{field: 'time', title: '访问时间', width: 200, templet: function (d) {
					if (d.row_type === 'page') {
						return '<span title="' + fullTime(d.first_time) + '">' + fmtTime(d.first_time) + '</span>'
							+ ' <span style="color:#ccc;">~</span> '
							+ '<span title="' + fullTime(d.last_time) + '">' + fmtTime(d.last_time) + '</span>';
					}
					return '<span title="' + fullTime(d.create_time) + '">' + fmtTime(d.create_time) + '</span>';
				}},
				{field: 'pv', title: '浏览量', width: 90, align: 'center', templet: function (d) {
					return d.row_type === 'page' ? d.pv : '—';
				}},
				{field: 'uv', title: '访客数', width: 90, align: 'center', templet: function (d) {
					return d.row_type === 'page' ? d.uv : '—';
				}},
				{field: 'ip', title: 'IP 数', width: 80, align: 'center', templet: function (d) {
					return d.row_type === 'page' ? d.ip : '—';
				}},
				{field: 'status_code', title: '请求状态', width: 100, align: 'center', templet: function (d) {
					return statusBadge(d.status_code);
				}},
				{field: 'avg_stay', title: '停留时长', width: 110, align: 'center', templet: function (d) {
					return d.row_type === 'page' ? fmtStay(d.avg_stay) : fmtStay(d.stay_time);
				}}
			]
		]
	});

	//切换时间范围：点哪个 tab 就按哪个天数重新拉数据
	element.on('tab(daysTab)', function () {
		currentDays = parseInt($(this).data('days'), 10) || 0;
		treeTable.reload('viewpage', {
			where: {days: currentDays},
			page: {curr: 1},
			text: {none: tr('暂无受访数据')}
		});
	});

	window.addEventListener('miu-admin-locale-change', function () {
		treeTable.reload('viewpage', {
			where: {days: currentDays},
			page: {curr: 1},
			text: {none: tr('暂无受访数据')}
		});
	});
});
</script>
{/block}
<!-- /脚本 -->