import { ElNotification, ElButton } from 'element-plus';
/**
 * @description 用于记录时间戳的变量，时间戳是响应头中的etag和last-modified字段其中之一
 */
let previousTimeTag: string | null = '';

/**
 * @description 获取当前最新的时间戳tag
 */
async function getTimeTag() {
	const response = await fetch(`${window.location.protocol}//${window.location.host}`, {
		method: 'HEAD',
		cache: 'no-cache',
	});
	// 以响应体的etag或者last-modified为时间戳
	return response.headers.get('etag') || response.headers.get('last-modified');
}
let notice: any = null;
/**
 * @description 判断是否需要更新
 */
async function judge() {
	// 获取当前最新的时间戳
	const currentTimeTag = await getTimeTag();
	// 检测到最新请求的时间戳和上一次不一致，即文件发生变化
	if (previousTimeTag !== currentTimeTag) {
		// 需要更新的逻辑
		// 监听是否更新
		// @ts-ignore'
		const messageContent = () => {
			return (
				<div>
					<p style="justify-content:flex-end">
						<span class="mb10">检测到新版本，是否刷新页面更新？</span>
						<div class="mt10">
							<ElButton onClick={ignore} size="small">
								忽略
							</ElButton>
							<ElButton type="primary" onClick={Refresh} size="small">
								刷新
							</ElButton>
						</div>
					</p>
				</div>
			);
		};
		notice = ElNotification({
			title: '提示',
			type: 'warning',
			dangerouslyUseHTMLString: true,
			message: messageContent(),
			customClass: 'updateTips',
			duration: 30 * 1000,
		});
	}
}
/**
 * @description 忽略
 */
const ignore = () => {
	notice.close();
};
/**
 * @description 刷新
 */
const Refresh = () => {
	window.location.reload();
};
/**
 * @description 查询是否更新版本
 * @param {number} timer 轮询时间 单位秒 默认60秒
 * @param {boolean} immediately  是否立即执行
 */
export default async function checkUpdate(timer: number = 60, immediately: boolean = true) {
	// 通过立即执行函数，记录首次请求的时间戳，以便与后面轮询得出的时间戳进行对比
	previousTimeTag = await getTimeTag();
	window.versionMonitor && clearInterval(window.versionMonitor);
	// 开启轮询执行judge函数
	window.versionMonitor = setInterval(() => {
		judge();
	}, timer * 1000);
	if (immediately) await judge(); //是否立即执行一次
}
