<template>
	<div class="not-container">
		<img alt="500" class="not-img" src="@/assets/images/tip/500.png" />
		<div class="not-detail">
			<h2>500</h2>
			<h4 v-if="isReTry">抱歉，您的网络不见了~🤦‍♂️🤦‍♀️</h4>
			<h4 v-else class="mt-0 mb-2">您的网络不见了~ 正在重试 {{ retryCount }}/{{ retry }}</h4>
			<button @click="router.push(HOME_URL)">返回首页</button>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { HOME_URL } from '@/enums/constant/route.ts';
import { useRouter } from 'vue-router';
import { onMounted, ref } from 'vue';
import mittBus from '@/utils/mittBus.ts';

const router = useRouter();
const retry = ref(import.meta.env.VITE_BASE_API_RETRY);
const retryCount = ref(0);
const isReTry = ref(false);

/**
 * * 监听失败消息
 */
const onListenSystemRequestError = () => {
	mittBus.on('system-request-error', (value: any) => {
		if (value.isSuccess) {
			router.push('/');
			// router.go(-1);
		}

		retry.value = value.retry;
		retryCount.value = value.retryCount;

		if (parseInt(retry.value) === retryCount.value) {
			isReTry.value = true;
		}
	});
};

onMounted(() => {
	onListenSystemRequestError();
});
</script>

<style lang="scss" scoped>
@import url('index.scss');
</style>
