<template>
	<PerformanceReport
		title="请求日志报告"
		:site="name"
		:reportOptions="requestLogsOptions"
	/>
</template>

<script>
import dayjs from '../../../utils/dayjs';
import PerformanceReport from './PerformanceReport.vue';

export default {
	name: 'SiteRequestLogs',
	props: ['name'],
	components: {
		PerformanceReport
	},
	data() {
		return {
			date: null,
			start: 0
		};
	},
	computed: {
		requestLogsOptions() {
			return {
				resource: () => {
					return {
						url: 'jcloud.api.analytics.request_logs',
						makeParams: params => {
							// for filterControls to work
							if (params) return params;

							return {
								name: this.name,
								timezone: dayjs.tz.guess(),
								sort: 'CPU Time (Descending)',
								date: this.today,
								start: this.start
							};
						},
						auto: true,
						initialData: [],
						transform: data => {
							return data.map(log => {
								log.time = dayjs(log.timestamp).format('HH:mm:ss z');
								log.method = log.request.method;
								log.path = log.request.path;
								log.status = log.request.status_code;
								log.cpu_time = log.duration / 1000000;
								return log;
							});
						}
					};
				},
				columns: [
					{ label: '时间', fieldname: 'time', width: 1 },
					{ label: '方法', fieldname: 'method', width: 0.5 },
					{ label: '路径', fieldname: 'path', width: 2, class: 'font-mono' },
					{
						label: '状态码',
						fieldname: 'status',
						width: 0.5,
						align: 'right'
					},
					{
						label: 'CPU 时间 (秒)',
						fieldname: 'cpu_time',
						width: 1,
						class: 'text-gray-600',
						align: 'right',
						format: value => value.toFixed(2)
					}
				],
				filterControls: () => [
					{
						type: 'select',
						label: '排序',
						fieldname: 'sort',
						class: !this.$isMobile ? 'w-48' : '',
						options: [
							'时间 (升序)',
							'时间 (降序)',
							'CPU 时间 (降序)'
						],
						default: 'CPU Time (Descending)'
					},
					{
						type: 'date',
						label: '日期',
						fieldname: 'date',
						class: !this.$isMobile ? 'w-48' : '',
						default: this.today
					}
				]
			};
		},
		today() {
			return dayjs().format('YYYY-MM-DD');
		}
	}
};
</script>