<template>
  <v-container grid-list-md>

<!-- <lite-youtube
  v-bind:videoid= "`${videoNews[0].slug}`"
  playlabel="Play: Keynote (Google I/O '18)"
  params="controls=0&start=10&end=30&modestbranding=2&rel=0&enablejsapi=1"
/>
<h2> {{videoNews[0].title}} </h2> -->
      <v-layout row wrap >
        <v-flex v-for="vn in videoNews" :key="videoNews.id" xs12 md6 lg3>
        
            <v-card width="95%">
              <lite-youtube
                v-bind:videoid= "`${vn.content}`"
                params="controls=0&start=10&end=30&modestbranding=2&rel=0&enablejsapi=1"
                />
                <p class="px-4">On : <span  v-text="vn.created_at.slice(0,10)"></span>
               , at : <span  v-text="vn.created_at.slice(11,-5)"></span></p>
                  
               
              <v-card-title primary-title>
                <div>
                  <h3 class="headline mb-0" v-text="vn.title"></h3>
                 
                </div>
                <div>
                      <a
                        :href="`https://youtu.be/${vn.content}`">
                        <v-btn color="error"> পুরো দেখুন </v-btn>
                      </a></div>
              </v-card-title>
            </v-card>
        </v-flex>
      </v-layout>


  </v-container>
</template>
<script>
// import VueYoutube from 'vue-youtube'

export default {
      data() {
    return {
      videoId: 'l5yX7cY0iSE',
      videoNews:[]
    }
  },
//   methods: {
//     playVideo() {
//       this.player.playVideo()
//     },
//     playing() {
//       console.log('\o/ we are watching!!!')
//     }
//   },
//   computed: {
//     player() {
//       return this.$refs.youtube.player
//     }
//   },
  async asyncData({ $axios, $config }) {
    let videoNews = await $axios.$get(`/bartas/?category=video&_sort=id:DESC&_limit=20`)

    // need to create the json / var first
    // if(worldNews.length < 1) { worldNews[0].image.url="", worldNews[0].slug="404", worldNews[0].slug="not found";}
    // if(nationalNews.length < 1) { nationalNews[0].image.url="", nationalNews[0].slug="404", nationalNews[0].slug="not found";}
    // if(localNews.length < 1) { localNews[0].image.url="", localNews[0].slug="404", localNews[0].slug="not found";}
    // if(articleNews.length < 1) { articleNews[0].image.url="", articleNews[0].slug="404", articleNews[0].slug="not found";}
    // if(editorialNews.length < 1) { editorialNews[0].image.url="", editorialNews[0].slug="404", editorialNews[0].slug="not found";}
    // if(videoNews.length < 1) { videoNews[0].image.url="", videoNews[0].slug="404", videoNews[0].slug="not found";}

    videoNews = JSON.parse(JSON.stringify(videoNews).replace(/\:null/gi, "\:\"\"")); 
    return { videoNews }
  }
} 
</script>
