<template>
    <div class="col-one-layout" style="position:  relative;height: 100%"  >
        <!--<h1>jakiś tytuł ({{ msg }})</h1>-->

    <div id="content-vue-component-wrapper" style="background-image: url('/static/img/content_bg.jpg');position:absolute; top:0;left:0;z-index: 0;height: 100%;width: 100%;background-size: 100% auto;"/>
	 <article class="content-vue-component-wrapper"  >
	 
	 
        <p id="content-vue-component" @click="handleClick" style="position: relative;overflow:hidden">

        </p>
		<a target="_blank" rel="noopener noreferrer" v-bind:href="currentArticle" class="pdf-link"><h2> </h2><img src="/static/icon/pdf_icon.png"></a>
	
       </article>     
    </div> 
</template>
<script>
function applyImg(idxArray=[]){
			var curFloat = "left";
			var imgCount = idxArray.length==0? 7:idxArray.length
				   for(var  i =0 ;i<imgCount;i++){
						if(curFloat=="left")
							curFloat="right";
						else
							curFloat="left";
						var imgIdx = idxArray.length==0? Math.floor(Math.random() * 70)+1:idxArray[i];
					 
						var imgName = 'img ('+imgIdx+').jpg';
						$("#content-vue-component .WordSection1 > p:nth-child("+(Math.floor(4.6*i)+1)+")").after('<div  style="background-image: url(\'/static/img/rand/'+imgName+'\');height: 350px;width: 350px;float: '+curFloat+';display: block;  background-size: cover; position: relative;margin:1rem"> </div>')
				   }
}
 

    var anchor = undefined;
    export default {
        name: 'Content',
        anchor: '',
        data() {
            return {
                currentArticle: "/static/articles/pdf/" + this.$route.params.content_id +".pdf"
            }
        },
        created:
            function () {
            }
        ,
        mounted: function () {
            this.$nextTick(function () {
				this.loadArticle()
            })
        },
        watch: {
            $route(to, from) {
              this.loadArticle()
                this.currentArticle = "/static/articles/pdf/" + this.$route.params.content_id +".pdf"
            }
        },
        methods: {
            handleClick() {

                //alert(anchor + " d " + JSON.stringify(this.$route.fullPath) + " " + JSON.stringify(this.$route.hash) + " " + location.pathname + location.hash);
            },
			loadArticle(){
				var arr = ImageIndex[this.$route.params.content_id]
			  $("#content-vue-component").load("/static/articles/" + this.$route.params.content_id + ".htm", function (p, code) {
					var offset = Math.floor(Math.random() * 30)*720;
                    $("#content-vue-component-wrapper").css("background-position",'0px ' + offset+'px'); 
					
					applyImg(arr);
                    if (code == 'error') {
                        $("#content-vue-component").html("<h1>article not found:(</h1>");
                    } else {
                        $("#content-vue-component a").click(function (e) {
                            e.preventDefault();
                            var id = ($(this).attr('href') + "").replace("#", "");
                            document.getElementsByName(id)[0].scrollIntoView(false);
                        });
                    }
                });
			}
		
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 .pdf-link{position:absolute;bottom:1rem;right:1rem;float:left;text-decoration: none;color: black;}
 .pdf-link img{height:5rem;width:5rem}

</style>
