<template>
    <div class="container mx-auto px-4 text-justify">
        <!-- <div v-for="files in file" :key="file.id">
            <a :href="'https://api8.siliconpin.com/assets/'+files[0]">wsrvfsgv</a>
        </div> -->
        <div v-if="isLoading" class="">
            <div class="text-center text-2xl flex flex-col justify-center place-items-center">
                <svg class="animate-spin delay-1000 mt-24" fill="#1068c6" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64px" height="64px" viewBox="0 0 26.349 26.35" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <g> <circle cx="13.792" cy="3.082" r="3.082"></circle> <circle cx="13.792" cy="24.501" r="1.849"></circle> <circle cx="6.219" cy="6.218" r="2.774"></circle> <circle cx="21.365" cy="21.363" r="1.541"></circle> <circle cx="3.082" cy="13.792" r="2.465"></circle> <circle cx="24.501" cy="13.791" r="1.232"></circle> <path d="M4.694,19.84c-0.843,0.843-0.843,2.207,0,3.05c0.842,0.843,2.208,0.843,3.05,0c0.843-0.843,0.843-2.207,0-3.05 C6.902,18.996,5.537,18.988,4.694,19.84z"></path> <circle cx="21.364" cy="6.218" r="0.924"></circle> </g> </g> </g></svg>
                Loading....
            </div>
        </div>
        <div v-else="content" class="py-10">
            <p class="text-center text-2xl font-bold pb-4 font-smooth underline">{{ page.title }}</p>
            <div class="flex flex-col justify-center place-items-center w-[100%] " v-html="content"></div>
        </div>
        <div v-if="fileAttached">
                <h2>Attachments.</h2>
                <div>
                    <div v-for="(file, index) in files">
                        {{index+1}}. 
                            <a class="text-blue-600" :href="`https://api8.siliconpin.com/assets/` + file.id+'?download' "  :download="file.filename_download">
                                {{ file.filename_download }}
                            </a>
                    </div>

                </div>

            </div>
        
    </div>
</template>
    
<script>
export default {
    data() {
        return {
            page: null,
            attachment:null,
            fileAttached:false,
            content:null,
            isLoading: true,
            fileAttached: false,
            file: null,
        }
    },
    mounted: function () {
        let path=window.location.pathname.split('/');
        // console.log(path[2]);

        // fetch('https://api8.siliconpin.com/items/scc22?filter[type][_eq]=notice&limit=-1')
        let queryP='https://api8.siliconpin.com/items/scc22?filter[type][_eq]=notice&filter[slug][_eq]='+path[2];
        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) => {
                console.log(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
                                    
                                })
                        })
            })
            .catch((error) => {
                console.log(error)
                });
    }
}
</script>