<template>
  <div id="case-list-content">
    <portal-header current="case" :goSearch="2"></portal-header>
    <div class="portal-content xcontent" style="margin-top: 30px;">
       <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb-nav">
        <el-breadcrumb-item :to="{ path: '/case' }">案例列表</el-breadcrumb-item>
        <el-breadcrumb-item>案例详情</el-breadcrumb-item>
      </el-breadcrumb>
       <div class="xrow" style="display: flex;justify-content: space-between;" >
          <div style="flex: 1;" class="xcol content-div" id="content-div">
            <el-row :gutter="10" v-if="noData">
              <el-col :span="24">
                <el-card :body-style="{ padding: '0px' }" class="detail">
                  <div class="title">{{ caseDetail.title }}</div>
                  <div class="label">
                    <author :onlyAvatar="true" :avatar="authorInfo.avatar" :sex="authorInfo.sex" ></author>
                    <span>案主：{{ authorInfo.name }}</span>
                    <span>工号：{{ authorInfo.code }}</span>
                    <span>组织：{{ authorInfo.orgInfo }}</span>
                    <span style="text-align: right;" v-if="caseDetail.sysCreateTime">{{ caseDetail.sysCreateTime.substring(0,10) }}</span>
                  </div>
                  <!-- <div class="label">
                    <span style="margin-left:0px;" v-if="caseDetail.sysCreateTime">{{ caseDetail.sysCreateTime.substring(0,10) }}</span>
                    <interactBar  :data="caseDetail" :type="3" :comments="false" :shares="true"></interactBar>
                  </div> -->
                  <!-- <div class="case-summary"><span>{{ caseDetail.summary }}</span></div> -->
                  <div class="btn-div clearfix" >
                    <div style="color:#666" v-if="caseDetail.orgDomain" class="item">{{ orgDomainTranslate(caseDetail.orgDomain) }}</div>
                    <div style="color:#666" class="item" v-if="caseDetail.orgDomain == '' && caseDetail.orgDomainParent">{{ orgDomainTranslate(caseDetail.orgDomainParent) }}</div>
                    <div style="color:#666" v-if="caseDetail.majorType" class="item">{{ majorTypeTranslate(caseDetail.majorType) }}</div>
                    <div v-if="caseDetail.keyword1" class="item">{{ caseDetail.keyword1 }}</div>
                    <div v-if="caseDetail.keyword2" class="item">{{ caseDetail.keyword2 }}</div>
                    <div v-if="caseDetail.keyword3" class="item">{{ caseDetail.keyword3 }}</div>
                    <div v-if="caseDetail.keyword4" class="item">{{ caseDetail.keyword4 }}</div>
                    <div v-if="caseDetail.keyword5" class="item">{{ caseDetail.keyword5 }}</div>
                    <!-- <span v-if="caseDetail.caseType" class="item">{{ caseDetail.caseType }}</span>
                    <span v-if="caseDetail.caseType1" class="item">{{ caseDetail.caseType1 }}</span>
                      <span v-if="caseDetail.caseType2" class="item">{{ caseDetail.caseType2 }}</span> -->
                  </div>
                  <div class="case-summary"><span>{{ caseDetail.summary }}</span></div>
                  <div class="label" style="margin-top:10px">
                    <!-- <span style="margin-left:0px;" v-if="caseDetail.sysCreateTime">{{ caseDetail.sysCreateTime.substring(0,10) }}</span> -->
                    <interactBar  :data="caseDetail" :type="3" :comments="false" :shares="true" :unicom="true"></interactBar>
                  </div>
                </el-card>
                <el-card :body-style="{ padding: '0px' }" class="jianjie" id="pdfPreview">
                  <!-- <div class="content">
                    {{ caseDetail.content }}
                  </div> -->
                  <pdfPreview v-if="pdfPath" :filePath="pdfPath"></pdfPreview>
                </el-card>
                <div class="postfixt-bot">
                  <div class="postfixt-bot-box" id="pdfTopBox">
                    <div style="display: flex;justify-content: space-between;">
                      <div style="margin-left:20px">
                        <div style="margin-top:3px">
                          <i style="font-size:22px;color:#a3b1cc" v-show="zoomShow" @click="zoomBox()" class="el-icon-zoom-in"></i>
                          <i style="font-size:22px;color:#a3b1cc" v-show="!zoomShow" @click="zoomBox()" class="el-icon-zoom-out"></i>
                        </div>
                      </div>
                      <div>
                        <div style="display:inline-block;">
                            <interactBar  :data="caseDetail" :type="3" :comments="false" :shares="true" :unicom="true"></interactBar>
                          </div>
                          <div style="display:inline-block;margin: 0 20px;">
                            <el-button type="primary" @click="goTop()">返回顶部</el-button>
                          </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- :authorId="articleDetailData.sysCreateAid" -->
                <div id="comments-box">
                  <el-row><comments @success="success" v-if="resolveId != ''" :obj-type="3" :obj-id="resolveId" :authorId="caseDetail.authorId" :toUsers="toUsers"></comments></el-row>
                </div>
              </el-col>
            </el-row>
            <div v-else>
              <el-empty :image-size="200"></el-empty>
            </div>
          </div>
          <div style="width: 245px;margin-left: 5px;" :class="zoomShow?'':'fixd-box-show'">
        <div>
           <div id="fixd-box">
             <el-card class="ranking-card" >
              <div slot="header">
                <span style="font-size: 14px;font-weight: 600;color: #333333;">贡献榜</span>
              </div>
              <div style="padding-bottom:10px">
                <el-row class="ranking-title">
                  <!-- <el-col :span="15" style="color: #333333;font-size: 14px;">名称</el-col> -->
                  <!-- <el-col :offset="4" :span="5" class="center" style="color: #333333;font-size: 14px;">分数</el-col> -->
                </el-row>
                <el-row class="ranking-title  bacolor" v-for="(item, index) in ankingList" :key="index" >
                  <el-col :span="6" style="height:34px">
                    <img v-if="index===0" :src="`${webBaseUrl}/images/first.png`"/>
                    <img v-if="index===1" :src="`${webBaseUrl}/images/second.png`"/>
                    <img v-if="index===2" :src="`${webBaseUrl}/images/third.png`"/>
                    <span style="margin-left: 10px" v-if="index!=2&&index!=0&&index!=1">{{index+1}}</span>
                  </el-col>
                  <el-tooltip :enterable="false"  effect="light" :content="item.sysCreateUname" placement="bottom" :visible-arrow="false" popper-class="text-tooltip">
                        <el-col :span="15"  class="title-line-ellipsis"> {{ item.sysCreateUname }}</el-col>
                  </el-tooltip>
                  <!-- <el-col class="center" style="color: #FF8E00;" :span="5">{{ item.score }}</el-col> -->
                </el-row>
              </div>
            </el-card>
                <div style="height: 10px;"></div>
              <el-card class="ranking-card" >
              <div slot="header">
                <span style="font-size: 14px;font-weight: 600;color: #333333;">人气榜</span>
              </div>
              <div style="padding-bottom:10px">
                <el-row class="ranking-title">
                  <!-- <el-col :span="15" style="color: #333333;font-size: 14px;">名称</el-col> -->
                  <!-- <el-col :offset="4" :span="5" class="center" style="color: #333333;font-size: 14px;">分数</el-col> -->
                </el-row>
                <el-row class="ranking-title  bacolor" v-for="(item, index) in Popularity" :key="index" >
                  <el-col :span="6" style="height:34px">
                    <img v-if="index===0" :src="`${webBaseUrl}/images/first.png`"/>
                    <img v-if="index===1" :src="`${webBaseUrl}/images/second.png`"/>
                    <img v-if="index===2" :src="`${webBaseUrl}/images/third.png`"/>
                    <span style="margin-left: 10px" v-if="index!=2&&index!=0&&index!=1">{{index+1}}</span>
                  </el-col>
                  <el-tooltip :enterable="false" @click.native="jumpRouter(item)" effect="light" :content="item.title" placement="bottom" :visible-arrow="false" popper-class="text-tooltip">
                        <el-col :span="15" style="cursor: pointer;" class="title-line-ellipsis"> {{ item.title }}</el-col>
                  </el-tooltip>
                  <!-- <el-col class="center" style="color: #FF8E00;" :span="5">{{ item.score }}</el-col> -->
                </el-row>
              </div>
            </el-card>
             <div style="height: 10px;"></div>
              <el-card class="ranking-card" >
              <div slot="header">
                <span style="font-size: 14px;font-weight: 600;color: #333333;">好评榜</span>
              </div>
              <div style="padding-bottom:10px">
                <el-row class="ranking-title">
                  <!-- <el-col :span="15" style="color: #333333;font-size: 14px;">名称</el-col> -->
                  <!-- <el-col :offset="4" :span="5" class="center" style="color: #333333;font-size: 14px;">分数</el-col> -->
                </el-row>
                <el-row class="ranking-title  bacolor" v-for="(item, index) in Positive" :key="index" >
                  <el-col :span="6" style="height:34px">
                    <img v-if="index===0" :src="`${webBaseUrl}/images/first.png`"/>
                    <img v-if="index===1" :src="`${webBaseUrl}/images/second.png`"/>
                    <img v-if="index===2" :src="`${webBaseUrl}/images/third.png`"/>
                    <span style="margin-left: 10px" v-if="index!=2&&index!=0&&index!=1">{{index+1}}</span>
                  </el-col>
                  <el-tooltip :enterable="false" @click.native="jumpRouter(item)" effect="light" :content="item.title" placement="bottom" :visible-arrow="false" popper-class="text-tooltip">
                        <el-col :span="15" style="cursor: pointer;" class="title-line-ellipsis"> {{ item.title }}</el-col>
                  </el-tooltip>
                  <!-- <el-col class="center" style="color: #FF8E00;" :span="5">{{ item.score }}</el-col> -->
                </el-row>
              </div>
            </el-card>
           </div>
        </div>
      </div>
      </div>
    </div>
    <portal-footer></portal-footer>
      <portalFloatTools></portalFloatTools>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import portalHeader from '@/components/PortalHeader.vue';
import portalFooter from '@/components/PortalFooter.vue';
import pdfPreview from '@/components/PdfPreview/view.vue';
import interactBar from '@/components/Portal/interactBar.vue';
import comments from '@/components/Portal/comments.vue';
import apiCase from '@/api/modules/cases.js';
import apiUser from '@/api/system/user.js';
import author from '@/components/Portal/authorInfo.vue';
import apiMessage from '@/api/system/message.js';
import apiDict from "@/api/modules/dict.js"
import {encrypt} from '@/utils/jsencrypt.js';
import cookies from 'vue-cookies'
import {cutFullName} from "@/utils/tools.js";
import portalFloatTools from "@/components/PortalFloatTools.vue";
export default {
  name: 'atticle',
  components: { portalHeader,portalFloatTools,  portalFooter, interactBar, author, comments,pdfPreview },
  computed: {
    ...mapGetters(['userInfo'])
  },
  data() {
    return {
      noData:true,
      zoomShow:true,
      isTopBoxShow:true,
      toUsers:[],
      ankingList:[],
      Popularity:[],
      Positive:[],
      resolveId: '',
      basePath:process.env.VUE_APP_FILE_BASE_URL,
      pdfPath:'',
      caseDetail: {
        id:'',
        filePath:''
      },
      ankingList:[],
      authorInfo:{ aid: '', name: '', orgInfo: '', avatar: '', code: '',sex:null},
      domain: [],
      Profess: [],
      orgData: [],
    };
  },
  mounted() {
    //this.pdfPath=this.basePath+'/case/demo1.pdf';
    this.resolveId = this.$route.query.id;
    this.$watermark.set(this.userInfo.name+this.userInfo.loginName);
    if (this.resolveId) {
      this.getCaseData();
    }
    this.getdomain();
    this.getProfess();
    this.getAnkingData();
    this.getPopularity();
    this.getPositive();
    window.addEventListener(
      "scroll",
      this.handleScroll
    );
  },
  methods: {
     getdomain() {
      let key = "org_domain";
      apiDict.items(key).then(res => {
        if (res.status == 200) {
          this.domain = res.result;
          if(res.result.length > 0) {
           this.orgDomainLevel(res.result)
          }
        }
      });
    },
    getProfess() {
      let key = "major_type";
      apiDict.items(key).then(res => {
        if (res.status == 200) {
          this.Profess = res.result;
        }
      });
    },
    orgDomainLevel(organization) {
     this.orgData = [];
     organization.forEach(item=>{
       this.orgData.push(item);
       if(item.list && item.list != "" && item.list.length > 0){
            item.list.forEach(it =>{
              this.orgData.push(it);
            })
       }
     })
    },
    orgDomainTranslate(code){ // 组织领域翻译
      if(code == '') {
       return
      }
     let name = '';
      let data = this.orgData.find(item => item.code == code);
      if(data == undefined){
        name = '';
      } else {
        name = data.name;
      }
      return name;
    },
    majorTypeTranslate(code){ // 专业分类翻译
      let name = '';
      let data = this.Profess.find(item => item.code == code);
      if(data == undefined){
        name = '';
      } else {
        name = data.name;
      }
      return name;
    },
    zoomBox(){
      this.zoomShow = !this.zoomShow;
    },
    jumpRouter(item) {
      //   console.log(item)
        location.href =`${this.webBaseUrl}/case/detail?id=${item.id}`
      // this.$router.push(`/case/detail?id=${item.id}`);
    },
    goTop() {
     document.documentElement.scrollTop = 0;
    },
    createPlayUrl(u){
      let nowDate=new Date();
      let ctime=parseInt(nowDate.getTime()/1000);
      let beforeUrl=parseInt(nowDate.getTime()/1000)+'/'+u;
      let urlSign=encodeURIComponent(encrypt(beforeUrl));
      cookies.set('CASE_TIME', ctime);//写客户端的cookie保存
      //以下判断是为了区分本地环境和服务器环境
      if(process.env.NODE_ENV == 'development'){
        this.pdfPath=process.env.VUE_APP_FILE_BASE_URL+u;
      }else{
        this.pdfPath=process.env.VUE_APP_BASE_API+'/xboe/m/case/content/resource?sign='+urlSign;
      }
    },
    handleScroll() {
        let innerHeight = document.querySelector('#case-list-content').clientHeight
        let pdfTopBox = document.querySelector('#comments-box')
        let pdfPreview = document.querySelector('#pdfPreview') //pdf盒子距离顶部的高度
        let contentDiv = document.querySelector('#content-div').clientWidth;
        let outerHeight = document.documentElement.clientHeight
        let scrollTop = document.documentElement.scrollTop
        if ((outerHeight + scrollTop + 350) >= innerHeight) {
          if(this.moreState == 1 && this.course.pageIndex < 4) {
              this.loadMore();
          }
        }
        if(pdfPreview.getBoundingClientRect().top < 0) {
          document.querySelector('#pdfTopBox').style.cssText = `position: fixed;bottom:0;box-shadow: -3px 3px 10px 10px rgba(90, 119, 186, .1);width:${contentDiv-9}px;`;
        } else {
          document.querySelector('#pdfTopBox').style.cssText = "position:static";
        }
        if(pdfTopBox.getBoundingClientRect().top < 1000) {
          document.querySelector('#pdfTopBox').style.cssText = "position:static";
        }
        if(scrollTop > 630) {
          this.isTopBoxShow = true;
          document.querySelector('#fixd-box').style.cssText = "position: fixed;top: -500px;width:245.5px";
        } else {
          document.querySelector('#fixd-box').style.cssText = "position: static";
        }
    },

   getAnkingData(){
      apiCase.usernameList(5).then(res=>{
        if(res.status==200){
          this.ankingList=res.result
        }
      })
    },
    getPopularity(){
      apiCase.queryPraises(5).then(res=>{
        if(res.status==200){
          this.Popularity=res.result
        }
      })
    },
    getPositive(){
      apiCase.queryComments(5).then(res=>{
        if(res.status==200){
          this.Positive=res.result
        }
      })
    },
    getCaseData() {
      apiCase.detail(this.resolveId,true).then(res => {
        if (res.status == 200) {
          if (JSON.stringify(res.result) != '{}') {
            this.caseDetail = res.result;
            this.getCaseUserDetail();
            if(this.caseDetail.filePath){
              //this.pdfPath=this.basePath+this.caseDetail.filePath;
              this.createPlayUrl(this.caseDetail.filePath);
            }else{
               this.$message.error('内容文件不存在或已被删除，请与管理员联系');
            }

          }
        }else{
          this.noData=false;
          this.$message.error(res.message)
        }
      });
    },
    getCaseUserDetail() {
      apiUser.getByIds([this.caseDetail.authorId]).then(res => {
        if (res.status == 200 && res.result.length>0) {
          this.authorInfo = res.result[0];
          this.authorInfo.orgInfo=cutFullName(this.authorInfo.orgInfo,1);

          this.toUsers = [
            {name: res.result[0].name,  aid:res.result[0].aid ,sex:res.result[0].sex}
          ];
          //console.log(res.result,'res.result');
        }
      });
    },
    success(value){
      let content=this.userInfo.name+'评论了我的案例'+'-'+this.caseDetail.title;
      let query={refId:this.caseDetail.id,sendType:1,title:'系统消息',refType:3,content:content,sendName:this.userInfo.name,accpetId:this.caseDetail.sysCreateAid,acceptName:this.caseDetail.sysCreateBy}
      apiMessage.save(query).then(res=>{
        if(res.status==200){

        }
      })
          // let con=value.sysCreateBy+' 评论了我的文章'+'-'+this.articleDetailData.title;
          // let query={refId:value.objId,content:con,accpetId:value.sysCreateAid,sendType:1,sendName:'系统',acceptName:'文章',title:'系统消息'}
          // apiMessage.save(query).then(res=>{
          //   if(res.status==200){

          //   }
          // })
    }
  }
};
</script>

<style scoped lang="scss">
.fixd-box-show{
  display: none;
}
::v-deep .interact-bar .interact-bar-btns {
  justify-content: flex-start!important;

}
::v-deep .interact-bar-btn{
  margin-left:0px!important;
  margin-right:15px!important;
}
.postfixt-bot{
  height: 60px;
  //margin-top: 10px;
  line-height: 60px;
  // background-color: #fff;
  // border: 1px solid #eee;
  // z-index: 999;
  .postfixt-bot-box{

    // text-align: right;
    background-color: #fff;
    // border: 1px solid #eee;
  }
}
.el-card{
  border:none;
}
.case-summary{
  font-size: 15px;
  color: #454545;
  word-break:break-all;
  line-height: 25px;
}
::v-deep .el-card__body{
  padding: 0;
}
::v-deep .bacolor:nth-child(odd){
  background-color: #f6f6f6;
  padding: 0 5px;
}
::v-deep .bacolor:nth-child(even){
  background-color:  #fff;
  padding: 0 5px;

}
.ranking-title {
     line-height: 34px;
    font-size: 15px;
    color: #333333;
    .center-titlt{
      font-size: 15px;
      color: #333333;
    }
    .center{
      text-align: right;
    }
    img{
      margin-top: 5px;
    }
  }
  ::v-deep .title-line-ellipsis{
  // width: 100%;
   display: -webkit-box;
   overflow: hidden;
  text-overflow:ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  box-sizing: border-box;
  word-break:break-all;
}
.nav {
  margin-bottom: 10px;
}
.detail {
  background-color: #fff;
  padding: 5px 20px 10px 20px;
  .title {
    font-size: 20px;
    line-height: 45px;
    font-weight: 600;
    word-break:break-all;
  }
  .label {
    font-size: 15px;
    color: #999999;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    span {
      margin-left: 10px;
      &:last-of-type {
        flex: 1;
      }
    }
  }
  .type {
    color: #0079fe;
  }


  .clearfix:after{
  content: "020";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  }
  .btn-div {
    margin: 0px 0 5px 0;
    padding-bottom: 5px;
    padding-top:5px;
    height: 100%;
    width: 100%;
    .item {
      float: left;
      margin: 7px 10px 0px 0px;
      border: 1px solid #c2c3c8;
      padding: 0px 10px;
      line-height: 24px;
      text-align: center;
      height: 24px;
      box-sizing: border-box;
      border-radius: 2px;
      font-size: 14px;
      color: #9c9c9c;
    }
    .item-right {
      float: right;
    }
  }
}
.jianjie {
  // margin: 15px 0;
  background-color: #f5f7fa;
  min-height: 300px;
  padding: 0px 0px 0px 0px;
  .content {
    padding: 10px 0;
    line-height: 25px;
  }
  .btn-div {
    margin: 8px 0;
    padding: 10px 0;
    color: #666;
    .item {
      margin-right: 30px;
    }
    .item-right {
      float: right;
    }
  }
}
.bottom-btn {
  padding: 10px 50px;
  .article-info-tools-btn {
    padding: 5px 0px;
    margin: 0 10px;
  }
}
.bottom-div {
  margin-top: 10px;
  background-color: #fff;
  padding: 5px 20px 10px 20px;
  .title {
    font-size: 16px;
    font-weight: 600;
    line-height: 50px;
    border-bottom: 1px solid #dfdfdf;
    .tip {
      color: #666;
      font-size: 12px;
      margin: 0 10px;
    }
  }
  .submit-div {
    margin: 15px 0;
  }
  .bottom {
    text-align: right;
  }

  .data {
    margin-top: 10px;
    background-color: #fff;
    padding: 5px 20px 10px 20px;
    .data-item {
      border-bottom: 1px solid #dfdfdf;
      margin-top: 10px;
      .top {
        font-size: 18px;
        font-weight: 600;
        span {
          font-size: 14px;
          color: #666;
          font-weight: normal;
        }
      }
      .text {
        margin: 15px 0 5px 0;
        padding-left: 40px;
        line-height: 35px;
      }
      .huifu {
        padding-left: 40px;
        padding-bottom: 10px;
        border-bottom: 1px solid #dfdfdf;
      }
      .result-div {
        padding-left: 40px;
        padding-top: 10px;
        .top {
          font-size: 16px;
        }
      }
      .up-div {
        padding: 0 15px;
        .up-btn {
          padding: 8px 20px;
          color: #000;
        }
      }
      img {
        margin-right: 10px;
        width: 30px;
        border: 1px solid #eee;
        border-radius: 50%;
        vertical-align: middle;
      }
    }
  }
}
.right-box {
  line-height: 25px;
  .ranking-card {
    margin-bottom: 10px;
    .el-col{
      margin-bottom: 10px;
    }
    .center{
      text-align: center;
    }
  }
  .ranking-title {
  }
  .aligh-title{
    font-size: 14px;
    color: #333333;
  }
  .ranking-data {
    margin: 10px 0;
    color: #999999;
  }
}
</style>
