<template>
  <div id="article-index">
    <div class="article-banner">
    <portal-header current="article" textColor="#ffffff" :goSearch="3"></portal-header>
    </div>
    <div style="padding-top:30px">
      <div class="xcontent2">
         <div class="xcontent2-main" style="margin-right: 30px;" >
          <div  v-if="noData" >
          <!--文章详细内容-->

            <div class="detail">
                <div class="xpage-detail-crumbs">
                    <router-link to="/article"><span class="crumbs-first">文章列表</span></router-link>
                    <span class="crumbs-line">/</span>
                    <span class="crumbs-last">文章详情</span>
                </div>
                <div class="title">{{articleDetailData.title}}</div>
                <div class="label">
                  <div style="margin-top: 5px;">
                      <author :avatar="articleDetailData.avatar" :name="articleDetailData.name" :sex="articleDetailData.sex"></author>
                  </div>
                  <div style="margin-top: 8px;padding-left: 15px;font-size: 14px;">
                    {{authorSign}}
                  <!-- <time-show :time="articleDetailData.sysCreateTime"></time-show> -->
                  </div>
                  <!-- <author :avatar="articleDetailData.avatar" :name="articleDetailData.name" :info="articleDetailData.orgInfo" ></author> -->
                  <!-- :readonly="true" -->
                  <!-- <interactBar v-if="articleDetailData.id" :type="2" :data="articleDetailData" :comments="false" :praises="false" :views="false"></interactBar> -->
                  <!-- <div style="padding-top: 5px;padding-left: 5px;"> 作者：{{ articleDetailData.name }}&emsp;&emsp;部门：{{ articleDetailData.orgInfo }}&emsp;&emsp;发布时间：<time-show :time="articleDetailData.sysCreateTime"></time-show> </div> -->
                </div>
                <div class="content ql-container">
                  <div class="ql-editor">
                  <div class="qltext" style="word-break:break-all; color:#121212" v-html="articleDetailData.content"></div>
                  </div>
                </div>
              <!-- </el-card> -->
                <div style="margin-top:10px;">
                <interactBar :type="2" :data="articleDetailData" :theme='1' :shares="false" ></interactBar>
                </div>
            </div>
          <!--评论, 修改边距调整-->
            <div>
              <comments v-if="articleId!=''" @success="success" :obj-type="2" :obj-id="articleId" :toUsers="toUsers" :authorId="articleDetailData.sysCreateAid"></comments>
            </div>
          </div>
          <div v-else>
            <el-empty :image-size="200"></el-empty>
          </div>
         </div>
         <div class="xcontent2-minor">
          <div>
           <div id="articleAnking">
              <div class="portal-model-btn pointer" @click="openDialog">
                    <svg-icon style="margin-right: 10px;font-size: 24px;" icon-class="addArticle"></svg-icon>
                    写文章
              </div>
              <div class="portal-ranking ranking-bg">
                <p class="ranking-title">贡献榜</p>
                <ul class="ranking-data">
                    <li v-for="(item, index) in ankingList" :key="index" style="margin-top:30px;line-height: 22px;cursor: pointer;">
                      <router-link  :to="'article/detail?id=' + item.id">
                        <span class="portal-right-text orange-one" v-if="index==0" style="margin-right:94px">
                          <img src="/images/list-01.png" alt="">
                        </span>
                        <span class="portal-right-text orange-tow" v-if="index==1" style="margin-right:94px">
                            <img src="/images/list02.png" alt="">
                        </span>
                        <span class="portal-right-text orange-three" v-if="index==2" style="margin-right:94px">
                            <img src="/images/list03.png" alt="">
                        </span>
                        <span class="portal-right-text" v-if="index==3" style="margin-right:94px">
                             <img src="/images/list04.png" alt="">
                        </span>
                         <span class="portal-right-text" v-if="index==4" style="margin-right:94px">
                             <img src="/images/list05.png" alt="">
                        </span>
                        <span class="portal-title-desc">{{ item.sysCreateUname }}</span>
                         </router-link>
                    </li>
                </ul>
              </div>
              <div class="course-resources">
                <!-- 资源位 -->
                <img :src="fileBaseUrl + resonimg.image" alt="">
              </div>
          </div>
            </div>
         </div>
      </div>




      <!--以下是评论信息-->

    </div>
    <!-- <div style="display: none;">
      <interactBar res="interactBar" :type="2" :data="articleDetailData" :comments="false" :views="false"></interactBar>
    </div> -->
    <el-dialog title="创建文章" :visible.sync="diagSync" :close-on-click-modal="false" width="900px" custom-class="g-dialog">
      <editItems v-if="diagSync" :jumpLimit="false" :editForm="{}" @success="saveSuccess"></editItems>
    </el-dialog>
    <portal-footer></portal-footer>
   <portalFloatTools></portalFloatTools>
  </div>
</template>

<script>
import portalFloatTools from '@/components/PortalFloatTools.vue';
import { mapGetters } from "vuex";
import portalHeader from "@/components/PortalHeader.vue";
import portalFooter from "@/components/PortalFooter.vue";
import timeShow from '@/components/Portal/daytimeShow.vue';
import interactBar from "@/components/Portal/interactBar.vue";
import author from '@/components/Portal/authorInfo.vue';
import comments from "@/components/Portal/comments.vue";
import apiArticle from "@/api/modules/article.js"
import apiUser from '@/api/system/user.js';
import apiMessage from '@/api/system/message.js';
import apiPraises from '@/api/modules/praises.js';
import apiShares from '@/api/modules/shares.js';
import apiFavorites from '@/api/modules/favorites.js';
import editItems from '@/components/Article/editItems.vue';
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import apiPlace from "@/api/phase2/place.js"
export default {
  components: { portalHeader, portalFooter,interactBar,comments,timeShow,author,editItems,portalFloatTools},
  computed: {
    ...mapGetters(["userInfo"]),
  },
  data() {
    return {
      resonimg:{},
      fileBaseUrl: process.env.VUE_APP_FILE_BASE_URL,
      noData:true,
      shareInfo:{
        name:'',
        load:false,
        list:[]
      },
      authorSign:'',//个性签名
      shareShow:false,
      toUsers: [],
      articleId:'',
      shareUsers:[],
      articleDetailData:{
        avatar:'',
        name:'',
        orgInfo:'',
        code:'',
        sex:null,
      },
      ankingList: [],
      diagSync:false,//控制弹窗
      isPraise:false,
      isFavorite: false,
      setTime: null
    };
  },
  created(){

  },
  mounted() {
    this.articleId=this.$route.query.id;
    //console.log(this.$route.query.id,'this.$route.query.id');
    this.getArticleDetail()
    this.$watermark.set(this.userInfo.name+this.userInfo.loginName);
    this.getAnkingData();
    window.addEventListener(
      "scroll",
      this.handleScroll
    );
    this.couresreso();
  },
  beforeDestroy(){
    window.removeEventListener("scroll",this.handleScroll);
    clearInterval(this.setTime);
  },
  methods: {
    couresreso(){
      let key = 'article';
      apiPlace.detail(key).then(res=>{
        console.log(res)
        let lmj =  JSON.parse(res.result.content)
        // console.log(lmj)
        this.resonimg = lmj[0]
        console.log(this.resonimg.image)
      })
    },
      handleScroll() {
      let el_anking = document.querySelector('#articleAnking');
      //console.log(el_anking.clientWidth,'clientWidth');
      //el_anking.wid
      let innerHeight = document.querySelector('#article-index').clientHeight
      let outerWidth = el_anking.clientWidth;
      let outerHeight = document.documentElement.clientHeight
      let scrollTop = document.documentElement.scrollTop
         if(scrollTop > 400) {
          document.querySelector('#articleAnking').style.cssText = "position: fixed;top: 0;width:"+outerWidth+"px";
        } else {
          document.querySelector('#articleAnking').style.cssText = "position: static";
        }
  },
    saveSuccess(data){
      this.diagSync=false;
      this.articleList.pageIndex = 1;
      this.articleList.list = [];
      this.getArticleList();
    },
    openDialog(){
      this.diagSync=true
    },
    getAnkingData() {
      apiArticle.countsUsername(5).then(res => {
        if (res.status == 200) {
          this.ankingList = res.result;
        }
      });
    },
    //获取文章详细信息
    getArticleDetail(){
      let $this=this;
      apiArticle.detail(this.articleId,true).then(res=>{
        if(res.status==200){
          res.result.avatar='';
          res.result.name='';
          res.result.orgInfo='';
          res.result.sex=null;
          this.articleDetailData=res.result;
          //if(this.articleDetailData.toString()!='{}'){
            this.getAuthorInfo(this.articleDetailData)
            let event = {
              key: "ViewArticle",//后台的事件key  发布文章且审核通过
              title: "查看文章",//事件的标题
              parameters:"",//用户自定义参数 name:value,name:value
              content: "查看了文章",//事件的内容
              source:'page',
              objId: this.articleId,//关联的id
              objType: "2",//关联的类型
              objInfo: this.articleDetailData.title,
              aid: this.userInfo.aid, //当前登录人的id
              aname: this.userInfo.name,//当前人的姓名
              status: 1 //状态，直接写1
            }
            this.$store.dispatch("userTrigger", event);
            this.setTime = setTimeout(()=>{
              event.key = 'ReadArticle';
              event.title = "阅读文章";
              event.parameters='second:60';//增加60秒的学习时长
              event.content = "阅读了文章"
              $this.$store.dispatch("userTrigger", event);
            },61000);//1分钟后记录
          //}
        }else{
          this.noData = false;
          this.$message.error(res.message);
        }
      }).catch(err=>{
        this.$message.error("获取数据失败")
      })
    },
    //获取文章发布人的人物信息
    getAuthorInfo(data){
      let ids=[data.sysCreateAid]
      apiUser.getByIds(ids).then(res=>{
        if(res.status==200){
          this.authorSign=res.result[0].sign;
          this.articleDetailData=Object.assign(this.articleDetailData,res.result[0])
          this.toUsers = [
            {name: res.result[0].name,  aid:res.result[0].aid ,sex:res.result[0].sex}
          ];
        }
      })
    },
    success(value){
      let content=this.userInfo.name+'评论了我的文章'+'-'+this.articleDetailData.title;
      let query={refId:this.articleDetailData.id,sendType:1,title:'系统消息',refType:2,content:content,sendName:this.userInfo.name,acceptId:this.articleDetailData.sysCreateAid,acceptName:this.articleDetailData.sysCreateBy}
      apiMessage.save(query).then(res=>{
        if(res.status==200){

        }
      })
    }
    //获取文章评论人的人物信息
  },
};
</script>

<style scoped lang="scss">
  .article-banner{
    height: 240px;
    background: url('/images/article-banner.png');
  }
.course-resources{

  margin-top: 26px;
  img{
    width: 100%;
    height: 100%;
    border-radius: 8px;
  }
}

.write-art{
    width: 410px;
    height: 67px;
    text-align: center;
    // line-height: 67px;
    background: #DDEDFF;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 500;
    border: none;
    color: #387DF7;
    margin-bottom: 22px;
  }
::v-deep .el-card__body{
    padding: 0;
  }
  ::v-deep .bacolor:nth-child(odd){
    background-color: #fff;
    padding: 0 5px;
  }
  ::v-deep .bacolor:nth-child(even){
    background-color: #f6f6f6;
    padding: 0 5px;
  }
.qltext{
  font-size: 15px;
  font-weight: normal;
  color: #454545;
  line-height: 24px;
  ::v-deep img{
    width: 100%;
  }

}
.detail {
  background-color: #fff;
  padding: 50px;
  .title {
    font-size: 22px;
    text-align: center;
    line-height: 33px;
    color: #121212 ;
    font-weight: 500;
    margin-top: 30px;
    word-break:break-all;
  }
  .label {
    font-size: 15px;
    color: #999999;
    display: flex;
    padding: 10px 0;
    align-items: center;
    font-size: 12px;
    span{
      margin-left: 10px;
    }
    .interact-bar{
      margin-left: auto;
    }
  }
  .btn-div {

    margin: 8px 0;
    text-align: right;
    padding-bottom: 10px;
    font-size: 15px;
    color: #454545 ;
    border-bottom: 1px solid #dfdfdf;
    .item {
      margin: 0 8px 0 25px;
    }
    .item-right {
      float: right;
    }
  }
  .content {
    padding: 20px 0;
    // line-height: 25px;
    // text-indent: 2em;
    // color: #444444;
    // font-size: 16px;
    overflow-x: hidden;
    min-height: 200px;
  }
  .ql-container{
    // font-size: 14px;
    .ql-editor{
      padding: 0;
      line-height: 1.6;
    }
  }
}

</style>
