<script lang="ts">
	import tl from '$lib/assets/images/tl.png'
	import { onMount } from 'svelte';
	import { openUrl } from '@tauri-apps/plugin-opener';

	let data:[{attributes:{title:string, slug:string, id:string}}] = [];
	let loading = true;
	let error;

	const url = "https://nopj.cn/api/discussions?include=tags.parent&filter[tag]=resources&sort=-createdAt&page[offset]=0&page[limit]=5"

	onMount(async () => {
		try {
			const res = await fetch(url,{
				method: 'GET',
				headers: {
					'Content-Type': 'application/json'
				}
			});

			if (!res.ok){
				throw new Error(res.statusText);
			}
			let jsonStr = await res.json();
			console.log(jsonStr.data);
			data = jsonStr.data
		}catch (e: any){
			error = e.message;
		} finally {

		}
	})



	async function handleExternalLink(event: MouseEvent, targetUrl: string) {

		event.preventDefault();

		try {
			await openUrl(targetUrl);
		} catch (e) {
			console.error("无法打开外部链接:", e);
		}
	}

</script>

<div class="h-screen w-screen flex z-10 pt-8">
	<div class="flex-1">
		123
	</div>
	<div class=" w-96 bg-base-200  bg-cover bg-center text-base-300 overflow-hidden relative" style="background-image: url({tl})">
		<div class="h-full w-full absolute top-0  z-0">

		</div>
		<div class="z-10 relative p-4 w-full ">
			<h1 class="font-bold text-4xl text-right">NoPJ</h1>
			<p class="font-bold text-right pt-2 ">最新资源</p>
			<div class="pt-4">

				<ul class="list">
					{#each data as item}
						<li class="list-row backdrop-blur-xs hover:backdrop-blur-xl hover:font-bold transition-all mt-4  font-misans">
							<a href="https://nopj.cn/d/{item.attributes.slug}" class="  "
								 on:click={(e) => handleExternalLink(e, `https://nopj.cn/d/${item.attributes.slug}`)}
							>
							<span class="">
								{item.attributes.title}
							</span>
							</a>
						</li>
					{/each}
				</ul>
			</div>
		</div>
	</div>
</div>