<template>
	<div class="m-5">
		<div class="flex items-center space-x-4">
			<Button @click="goBack" icon="arrow-left" label="返回" />
			<h2 class="font-semibold">{{ title }}</h2>
		</div>
		<div v-if="$site.pg?.current_plan?.monitor_access" class="mt-5">
			<ObjectList :options="reportOptions" />
		</div>
		<div class="flex justify-center" v-else>
			<span class="mt-16 p-2 text-base text-gray-800">
				您的计划不支持此功能。请
				<span class="cursor-pointer underline" @click="showPlanChangeDialog"
					>升级您的计划</span
				>
				。
			</span>
		</div>
	</div>
</template>

<script>
import { getCachedDocumentResource } from 'jingrow-ui';
import { defineAsyncComponent, h } from 'vue';
import { renderDialog } from '../../../utils/components';
import ObjectList from '../../ObjectList.vue';

export default {
	name: 'PerformanceReport',
	props: {
		title: {
			type: String,
			required: true
		},
		site: {
			type: String,
			required: true
		},
		reportOptions: {
			type: Object,
			required: true
		}
	},
	components: {
		ObjectList
	},
	computed: {
		$site() {
			return getCachedDocumentResource('Site', this.site);
		}
	},
	methods: {
		showPlanChangeDialog() {
			const SitePlansDialog = defineAsyncComponent(() =>
				import('../../ManageSitePlansDialog.vue')
			);
			renderDialog(h(SitePlansDialog, { site: this.site }));
		},
		goBack() {
			this.$router.go(-1);
		}
	}
};
</script>