<template>
  <div>
    <div class="newsTitle"> {{articles.title}}</div>
    <div class="msg" v-html="articles.content" v-show="articleshow"></div>
     <div class="video" v-show="videoshow">            
          <video id="example_video_1" class="video-js vjs-default-skin"
                 controls preload="auto" width="640" height="300"
                 poster="http://video-js.zencoder.com/oceans-clip.png"
                 data-setup='{"example_option":true}' ref="video">
               <source :src="articles.video_url" type='video/mp4' />
        </video>            
        </div>
  </div>
</template>
  <script>
      import { singleArticleInfo } from "@/api/micro/micro"
     export default{
       data(){
         return{
            articles:[],
            videoshow:false,
            articleshow:true,
         }
       },
       methods:{
         singleArticleInfo(id,orgid){
             singleArticleInfo(id,orgid).then(response=>{
                 if(response.data.state == 1){
                   var articles =  response.data.data.articles;
                   console.log("articles是什么",articles)
                   this.articles = articles;
                   if(articles.video_url != ""){
                     this.articleshow = false;
                      this.videoshow = true;
                      this.$refs.video.src = articles.video_url;  
                   }
                        
                } 
             })
          }
       },
       created(){
           const id = this.$route.query.id;
           const orgid = this.$route.query.orgid;
           console.log("id是多少",id)
           console.log("orgid是多少",orgid)
           this.singleArticleInfo(id,orgid)  
       },
     }
  </script>


<style lang="scss" scoped>
.newsTitle {
  width: 19.9375rem;
  height: 3.75rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: rgba(7, 18, 40, 1);
  line-height: 1.875rem;
  margin: 1.3125rem 2.1875rem 0 1.3125rem;
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.msg {
  width: 21rem;
  min-height: 12.0625rem;
  font-size: 1rem;
  font-weight: 600;
  color: rgba(7, 18, 40, 1);
  line-height: 1.375rem;
  margin: 1.25rem 1.25rem 0 1.125rem;
}
</style>
