<template>
    <b-container v-if="is_loaded">
        <b-row>
            <b-col>

                <div v-html="article"></div>

            </b-col>
            <b-col>
                <a href="#" @click.prevent="article = getArticle()" class="button button-primary">Reload</a>
            </b-col>


        </b-row>
    </b-container>
</template>

<script>

let project = {
    id:'12g65-13h7-138jh-1d5fg',
    version:0.1,
    name: 'Some name',
    intro:{
        title:['intro title one', 'intro title two'],
        subtitle:['sub 1', 'sub 2'],
        content:['para 1', 'para 2']
    },
    summary:{
        title:['summary title one', 'summary title two'],
        subtitle:['sub 1', ''],
        content:['para 1', 'para 2']
    },
    items:[
        {
            id:1,
            title:['item 1 title 1', 'item 1 title 2'],
            subtitle:['', 'item 1 sub 2'],
            content:['para 1', 'para 2']
        },
        {
            id:2,
            title:['item 2 title 1', 'item 2 title 2'],
            subtitle:['item 2 sub 1', 'item 2 sub 2'],
            content:['para 1', 'para 2']
        },
    ]
}

export default {


    data(){
        return {
            project:null,
            variation_count:0,
            item_count:0,
            reload_count:0,
            article:'',
            is_loaded:false
        }
    },
    mounted(){
        this.project = project;
        this.variation_count = project.intro.title.length;
        this.item_count = project.items.length;
        this.article = this.getArticle();
        this.is_loaded = true;

    },
    computed:{


    },
    methods:{
        getIntro(){
            let title = this.project.intro.title[this.getRandomIndex()];
            let subtitle = this.project.intro.subtitletitle[this.getRandomIndex()];
        },

        getRandomIndex(){
            return Math.floor(Math.random() * this.variation_count);
        },

        getRandomItems(){
            let items = this.project.items;
            items.sort((a,b) => 0.5 - Math.random());
            return items.slice(0, Math.floor(Math.random() * this.item_count))
        },
        getArticle(){
            //yuck, POC only
            console.log('getArticle');
            let html='';
            html +=`<h1>${this.project.intro.title[this.getRandomIndex()]}</h1>`;
            html += `<p><b>${this.project.intro.subtitle[this.getRandomIndex()]}</b></p>`;
            html += `<p>${this.project.intro.content[this.getRandomIndex()]}</p>`;

            return html;
        }
    }
}
</script>