<template>
    <div class="productions-container">
        <production-card
            v-for="production in productions" 
            :id="production.id"
            :key="production.id" 
            :slug="production.slug"
            :image-url="production.image_url"
            :name="production.title" 
            :description="production.summary" 
        />
    </div>
</template>



<script setup lang="ts">
const { find } = useStrapi()
const { getStrapiLocale } = useLocalizations()

const strapiLocale = getStrapiLocale()

const baseUrl = 'http://192.168.86.5:1337';

interface Production {
    id: number;
    title: string;
    summary: string;
    production_image?: {
        url: string;
    };
    documentId?: string;
}

class ProductionInfo {
    id: number;
    title: string;
    summary: string;
    image_url: string;
    slug?: string;

    constructor(id: number, title: string, summary: string, image_url: string, slug?: string) {
        this.id = id;
        this.title = title;
        this.summary = summary;
        this.image_url = baseUrl + image_url;
        this.slug = slug;
    }
}

const productions = ref<ProductionInfo[]>();

onMounted(async () => {
    try {
        const response = await find<Production>('productions', {
            populate: '*',
            locale: strapiLocale, // 使用简体中文
        })
        
        productions.value = response.data.map((item: Production) => {
            return new ProductionInfo(
                item.id,
                item.title,
                item.summary,
                item.production_image?.url || '',
                item.documentId ? item.documentId : undefined
            );
        });
    } catch (error) {
        console.error('Failed to fetch productions:', error)
    }
});

</script>

<style scoped>
.productions-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px;
    gap: 20px;
}
</style>