<template>
    <div class="jpCards col-12" :class="sizeClass">
        <div class="jpCards-content d-flex justify-content-start flex-column" :class="height" v-if="publications">
            <perfect-scrollbar class="scroll-container">
            <b-link
                class="jpCards-content-item d-flex align-items-start justify-content-start"
                v-for="(dock, index) of publications"
                :href="dock.link" :class="{'withLine': dock.withLine}"
                :key="index"
                :target="dock.linkTarget"
            >
                <div class="jpCards-content-item-icon d-flex">
                    <img :src="dock.icon" alt="" v-if="dock.icon">
                </div>
                <div class="jpCards-content-item-deck d-flex flex-wrap align-items-start">
                    <div class="jpCards-content-item-name">
                        {{dock.name}}
                        <span class="jpCards-content-item-data">
                            {{dock.data}}
                        </span>
                    </div>
                </div>
            </b-link>
            </perfect-scrollbar>
            <b-link
                class="jpCards-content-item d-flex align-items-start justify-content-start"
                href="https://www.ncbi.nlm.nih.gov/pubmed/?term=(international%20agency%20for%20research%20on%20cancer[CN]%20OR%20iarc[CN]%20OR%20international%20agency%20for%20research%20on%20cancer[AD]%20OR%20iarc[AD])"
                target="_blank"
            >
                <div class="jpCards-content-item-icon d-flex">
                    <img src="/img/link.svg" alt="">
                </div>
                <div class="jpCards-content-item-deck d-flex flex-wrap align-items-start">
                    <div class="jpCards-content-item-name show-all">
                        {{ showallText }}
                    </div>
                </div>
            </b-link>
        </div>
    </div>
</template>

<script>
module.exports = {
    name: 'RemoteJustPublishedCard',
    mixins: [sizableComponentMixin],
    components: {
        'perfect-scrollbar': Vue2PerfectScrollbar.PerfectScrollbar,
    },
    props:{
        withSidebar: Boolean,
        lang: String,
        height: String
    },
    data() {
        return {
            publications: [],
            defaultSize: 'col-lg-6',
            linkBase: 'https://pubmed.ncbi.nlm.nih.gov/',
            requestUrl: 'https://webapi.iarc.who.int/refman/api/recent_pub',
        }
    },
    methods: {
        fetchPublications() {
            fetch(this.requestUrl)
                .then(stream => stream.json())
                .then(data => {
                    let resultData = data.articles;
                    resultData.map(
                        publication => (
                            this.publications.push(
                                {
                                    icon: '/img/link.svg',
                                    name: publication.title,
                                    data: publication.date,
                                    link: this.linkBase + publication.pmid,
                                    linkTarget: '_blank'
                                }
                            )
                        )
                    )
                })
        },
    },
    mounted() {
        this.fetchPublications();
    },
    computed: {
        showallText: function() {
            if (this.lang == 'fr') {
                return 'Tout afficher';
            }
            return 'Show all';
        }
    }
};
</script>

<style lang="stylus">
#app
    .jpCards
        margin-bottom 30px
        &-size
            &-sm
                height 350px
                @media (max-width 1199px)
                    height 290px
                @media (max-width 991px)
                    height 330px
                @media (max-width 767px)
                    height auto
                @media (max-width 575px)
                    height 290px
            &-md
                height 360px
            &-lg
                height 460px
                @media (max-width 1199px)
                    height 490px
                @media (max-width 991px)
                    height auto
                @media (max-width 767px)
                    height auto
                @media (max-width 575px)
                    height 390px
        &-content
            background-color #ffffff
            box-shadow 0 0 20px rgba(0, 0, 0, 0.2)
            &:hover
                box-shadow 0px 0px 20px rgba(0, 0, 0, 0.2), 0px 0px 30px rgba(0, 0, 0, 0.25)
            &-item
                padding 0 20px 16px
                &:hover
                    text-decoration none
                &:first-child
                    padding-top 20px
                &-icon
                    position relative
                    top 4px
                    margin-right 10px
                &-deck
                    font-size 16px
                    line-height 150%
                    @media (max-width 575px)
                        font-size 14px
                &-name
                    color #1E7FB8
                    margin-right 5px
                &-data
                    white-space nowrap
                    color #808080
                &.withLine
                    border-bottom 1px solid #E3F4FE
                    margin-bottom 16px
            .scroll-container
                margin-top 20px
                margin-bottom 15px
                height 400px
            .show-all
                color #1e7fb8
                text-transform uppercase
                font-weight bold
</style>
