<template>
    <div class="container bg-white mx-auto mt-3  p-0 text-lg">
        <div v-if="isLoading">
            <h2>Loading ...</h2>
        </div>
        <div v-else>
            <div v-html="page[0].content" class="container mx-auto text-blue-900 mt-14">


            </div>
            <div v-if="fileAttached">
                <h2 class="text-blue-900 text-center text-2xl font-semibold mb-16">Attachments</h2>
                <table class="text-blue-700">
                <tr v-for="(file, index) in files">

                    <td>{{index+1}}. </td>
                <td><a target="_blank" :href="`https://api8.siliconpin.com/assets/` + file.id+'?download' "  :download="file.filename_download">
                        <h3> {{ file.filename_download }}</h3>
                    </a></td>

                </tr>
                </table>
            </div>
        </div>
    </div>
</template>
    
<script>
export default { 
    data() {
        return {
            page: null,
            fileAttached:false,
            files: [],
            isLoading: true
        }
    },
    mounted: function () {
        fetch('https://api8.siliconpin.com/items/scc22?filter[slug][_eq]=' + this.$route.params.id)
        .then((response) => {
            if (response.ok) {
                return response.json();
            }
            throw new Error('Something went wrong');
            })
            .then(jsonPageData => {
                this.page = jsonPageData.data
                this.isLoading = false
                return jsonPageData.data[0].id
                }
            )
            .then((pageID) => {
                fetch('https://api8.siliconpin.com/items/scc22_files_1?filter[scc22_id][_in]=' + pageID)
                .then(resp => resp.json())
                    .then(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)
                });
    },
    methods: {
        // getAttachments(att) {

        //     console.log(att)
        //     // fetch('https://api8.siliconpin.com/items/ecom55?filter[slug][_eq]=' + this.$route.params.id)
        //     //     .then(response => response.json())
        //     //     .then(data => this.itemByCategory = data)
        //     // console.log(this.itemByCategory)

        // }
    }
}
</script>