<template>
    <div class="col-one-layout" style="position:  relative;height: 100%"  >
        
  
	 <article class="content-vue-component-wrapper"  >
	 
	 
        <p id="content-vue-component" @click="handleClick" style="position: relative;overflow:hidden">
{{profileId}}
        </p>
		    </article>     
		  <b-carousel id="main-slider"
                    style="text-shadow: 1px 1px 2px #333;max-width: 90vw;max-height:90vh;width:50rem;height:30rem;margin:auto;"
                    controls
                    indicators
                    background="#ababab"
                    :interval="4000"  

                    v-model="slide"
                    @sliding-start="onSlideStart"
                    @sliding-end="onSlideEnd"
                    >
 


            <!-- Slides with image only -->
            <b-carousel-slide   v-for="img in images" v-bind:img-src="'/static/profile/'+profileId+'/'+img"  caption=" "
                              text=" ">
            </b-carousel-slide> 

        </b-carousel>
         
		      
    </div> 
</template>
<script>
    import ContactService from '../dao/ContactService.js' 
    var anchor = undefined;
    export default {
        name: 'Content',
        anchor: '',
        data() {
		var currentId =  this.$route.params.content_id;
		var getProfile = ContactService.get(currentId); 
            return {
                profileId: currentId,
                profile: getProfile,
				images: getProfile.gallery
            }
        },
        created:
            function () {
            }
        ,
        mounted: function () {
            this.$nextTick(function () {
				this.loadArticle()
            })
        },
        watch: {
            $route(to, from) {

              this.loadProfile()
                this.profileId = this.$route.params.content_id;
            }
        },
        methods: {
            handleClick() {

                //alert(anchor + " d " + JSON.stringify(this.$route.fullPath) + " " + JSON.stringify(this.$route.hash) + " " + location.pathname + location.hash);
            },
			loadProfile(){
				 
               
			}, 
			loadArticle(){
			//alert(this.profileId)
			  $("#content-vue-component").load("/static/profile/" + this.profileId  + "/content.htm", function (p, code) {
				  
                    if (code == 'error') {
                        $("#content-vue-component").html("<h1>article not found:(</h1>");
                    }  
                });
			} 
		
        }
    }
</script>

 