<template>
  <div @click="openStories">
  
  <VueStories
    :avatarImage=""
    :avatarTitle=""
    :stories="[]" 
    :isPause=true 
    :header=true
    :isSave=true
    ref="vueStories"
    v-on:onNextFrame="actionOnNext"
    v-on:onPreviousFrame="actionOnPrevious"
    v-on:onComplete="actionOnComplete"
    v-on:onFullscreen="actionOnFullscreen"
    v-on:onSave="actionOnSave"
/>
</template>

<script>
  import VueStories from 'vue-stories';

  export default {
    name: 'App',
    
    components: { VueStories },
    
    data() {
      return {
      
        strories:[
          {
            id: String || Number ,
            url: String ,
            title: String ,
            subTitle: String,
            styles:{
              backgroundSize:'contain',  
          }
        ]
      }
    },
    
    methods: {
      //open vue stories
      openStories(){
           this.$refs.vueStories.toggle_fullscreen(true)
      },
      
      actionOnNext(id)
      actionOnPrevious(id)
      actionOnComplete(id)
      actionOnFullscreen(status)
      actionOnSave(status, id)
    }
  };
</script>