<template>
    <div class="container mx-auto px-4 text-justify mt-16">
        <div v-if="isLoading" class="">
            <div class="bg-gray-200 h-screen border-2 border-gray-300 shadow-2xl rounded-md opacity-500"></div>
        </div>
            <div v-else class="">
                <div v-if="content" class="w-full flex flex-col justify-center place-items-center">
                    <h2 class="text-2xl text-center pb-4  font-bold">{{ page.title }}</h2>
                    <div class=" border-2 border-gray-300 shadow-2xl rounded-md opacity-500 p-4 w-full">
                        <div class="flex flex-col place-items-center" v-html="content"></div>
                    </div>
                </div>
                <div class="pt-10 flex flex-col justify-start place-items-start" v-if="fileAttached">
                    <h2>Attachments</h2>
                    <div v-for="file in files" :key="file.id">
                        <a class="text-blue-600" :href="`https://api8.siliconpin.com/assets/` + file.id+'?download' "  :download="file.filename_download">
                            {{ file.filename_download }}
                        </a>
                        <!-- <a class="" :href="'https://api8.siliconpin.com/assets/' + file"></a> -->
                    </div>
                </div>
            </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            page: null,
            attachment:null,
            content:null,
            isLoading: true,
            files: null,
            fileAttached:false
        }
    },
    mounted: function () {
        let path=window.location.pathname.split('/');
        let slug=path[1]
        // console.log(path[1]);
        if(path[1]==='notice' || path[1]==='documents'){
            slug =path[2]
        }
            let queryP='https://api8.siliconpin.com/items/scc22?filter[slug][_eq]='+slug;
            fetch(queryP)
            .then(response => response.json())
            .then(data => {
            this.page = data.data[0]
            this.content = this.page.content
            this.file = this.page.attachments
            //   console.log(this.file)
            this.isLoading = false
            return this.page.id
            })
            .then((pageID) => {
                fetch('https://api8.siliconpin.com/items/scc22_files_1?filter[scc22_id][_in]=' + pageID)
                .then(resp => resp.json())
                    .then(file => {
                        // console.log(file)
                            let attIDs = ''
                            let t = 0
                            file.data.forEach(ids => {
                                if (t == 0) attIDs = ids.directus_files_id
                                else attIDs = attIDs + ',' + ids.directus_files_id
                                t++
                            });
                            if(t>0) this.fileAttached=true
                        return attIDs
                    })
                        .then((attIDs) => {
                            fetch('https://api8.siliconpin.com/files?filter[id][_in]=' + attIDs)
                            .then(resp => resp.json())
                                .then(file => {
                                    this.files = file.data
                                    console.log(this.files)
                                })
                        })
            })
            .catch((error) => {
                console.log(error)
                });
        
    }
}
</script>