<template>
	<PerformanceReport
		title="二进制日志"
		:site="name"
		:reportOptions="binaryLogsOptions"
	/>
</template>

<script>
import dayjs from '../../../utils/dayjs';
import { DashboardError } from '../../../utils/error';
import PerformanceReport from './PerformanceReport.vue';
import { toast } from 'vue-sonner';

export default {
	name: 'SiteBinaryLogs',
	props: ['name'],
	components: { PerformanceReport },
	data() {
		return {
			start_time: dayjs().subtract(2, 'hour').format('YYYY-MM-DD HH:mm:ss'),
			end_time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
			pattern: '.*',
			max_lines: 50
		};
	},
	resources: {
		binaryLogs() {
			return {
				url: 'jcloud.api.analytics.binary_logs',
				makeParams: params => {
					if (params) return params;

					return {
						name: this.name,
						start_time: this.start_time,
						end_time: this.end_time,
						pattern: this.pattern,
						max_lines: this.max_lines
					};
				},
				validate() {
					if (this.max_lines < 1 || this.max_lines > 500) {
						toast.error('最大行数应在1到500之间');
						throw new DashboardError('最大行数应在1到500之间');
					}
					// check between start_time and end_time is less than 2 hours
					const start = dayjs(this.start_time);
					const end = dayjs(this.end_time);
					if (end.diff(start, 'hour') > 2) {
						toast.error('时间范围应小于2小时');
						throw new DashboardError('时间范围应小于2小时');
					}
					// start_time should be less than end_time
					if (start.isAfter(end)) {
						toast.error('开始时间应小于结束时间');
						throw new DashboardError('开始时间应小于结束时间');
					}
				},
				onError(error) {
					console.error(error.message);
				},
				auto: false,
				pageLength: 10,
				keepData: true,
				initialData: []
			};
		}
	},
	computed: {
		binaryLogsOptions() {
			return {
				data: () => this.$resources.binaryLogs.data,
				updateFilters: params => {
					if (!params) return;
					for (const [key, value] of Object.entries(params)) {
						if (key === 'start_time') this.start_time = value;
						if (key === 'end_time') this.end_time = value;
						if (key === 'pattern') this.pattern = value;
						if (key === 'max_lines') this.max_lines = value;
					}
				},
				columns: [
					{
						label: '时间戳',
						fieldname: 'timestamp',
						width: '12rem',
						format: value => {
							return this.$format.date(value, 'YYYY-MM-DD HH:mm:ss');
						}
					},
					{ label: '查询', fieldname: 'query', class: 'font-mono' }
				],
				filterControls: () => {
					return [
						{
							type: 'datetime',
							label: '开始时间',
							fieldname: 'start_time',
							default: this.start_time
						},
						{
							type: 'datetime',
							label: '结束时间',
							fieldname: 'end_time',
							default: this.end_time
						},
						{
							label: '模式',
							fieldname: 'pattern',
							default: this.pattern
						},
						{
							label: '最大行数',
							fieldname: 'max_lines',
							default: this.max_lines
						}
					];
				},
				actions: () => [
					{
						label: '查看日志',
						variant: 'solid',
						loading: this.$resources.binaryLogs.loading,
						loadingText: '加载中',
						onClick: () => this.$resources.binaryLogs.reload()
					}
				]
			};
		}
	}
};
</script>