<template>
  <div id="case-list-content">
    <div style="margin-bottom:30px" class="case-banner">
      <portal-header current="case" textColor="#fff" :goSearch="2"></portal-header>
    </div>
    <div class="">
      <div class="xcontent2">
        <div class="xcontent2-main" style="margin-right: 30px;" id="content-div">
          <div v-if="noData">
            <div class="detail">
              <div class="xpage-detail-crumbs">
                <router-link to="/case"><span class="crumbs-first">案例列表</span></router-link>
                <span class="crumbs-line">/</span>
                <span class="crumbs-last">案例详情</span>
              </div>
              <div class="title">
                <h5>{{ caseDetail.title }}</h5>
                <span style="text-align: right;" v-if="caseDetail.sysCreateTime"> <i class="el-icon-time"></i> {{
                  caseDetail.sysCreateTime.substring(0, 10) }}</span>
              </div>
              <div class="label">
                <author :aid="caseDetail.sysCreateAid" :onlyAvatar="true" :avatar="authorInfo.avatar"
                  :sex="authorInfo.sex"></author>
                <span>案主：{{ authorInfo.name }} ({{ authorInfo.orgInfo }})</span>
                <!-- <span>案主：{{ authorInfo.name }}</span>
                    <span>工号：{{ authorInfo.code }}</span>
                    <span>组织：{{ authorInfo.orgInfo }} </span> -->
                <span> {{ authorInfo.sign }}</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:#2974D6;font-weight: 450;" v-if="caseDetail.orgDomain" class="item">{{
                  orgDomainTranslate(caseDetail.orgDomain) }}</div>
                <div style="color:#2974D6;font-weight: 450;" class="item"
                  v-if="caseDetail.orgDomain == '' && caseDetail.orgDomainParent">{{
                    orgDomainTranslate(caseDetail.orgDomainParent) }}</div>
                <!-- <div style="color:#2974D6;font-weight: 450;" v-if="caseDetail.majorType" class="item">{{ majorTypeTranslate(caseDetail.majorType) }}</div> -->
                <div class="item" style="color:#2974D6;font-weight: 450;" v-for="item, idx in caseDetail.majorType"
                  :key="idx">{{ majorTypeTranslate(item) }}</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>

            <div v-if="Internet == 1" :body-style="{ padding: '0px' }" class="jianjie" id="pdfPreview">
              <pdfPreview v-if="pdfPath" :filePath="pdfPath"></pdfPreview>
            </div>
            <el-card v-if="Internet == 2" style="background-color:#eee" class="jianjie pdftext" id="pdfPreview">
              <div style="margin-top:40px">
                <span>十分抱歉，您当前的网络环境不符合观看要求。<br />
                  为了保障案例信息的安全，您需要接入公司内网才能观看。</span>
              </div>
              <div style="margin-top:20px" @click="retest">
                <el-button type="primary">重新检测</el-button>
              </div>
            </el-card>
            <el-card v-else-if="Internet == 3" style="background-color:#eee" class="jianjie pdftext" id="pdfPreview">
              <div style="margin-top:40px">
                <span>网络安全检测中...</span>

              </div>
            </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 v-if="caseDetail.id" :data="caseDetail" :type="3" :comments="false" :shares="true"
                        :unicom="true"></interactBar>
                    </div>
                    <div style="display:inline-block;margin: 0 20px;">
                      <i style="font-size: 25px;color:#6E7B84;" @click="goTop()" class="el-icon-arrow-up"></i>
                      <!-- <el-button type="primary" >返回顶部</el-button> -->
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- :authorId="articleDetailData.sysCreateAid" -->
            <div id="comments-box">
              <comments @success="success" v-if="resolveId != ''" :obj-type="3" :obj-id="resolveId"
                :authorId="caseDetail.authorId" :toUsers="toUsers"></comments>
            </div>

          </div>
          <div v-else>
            <el-empty :image-size="200"></el-empty>
          </div>
        </div>
        <div class="xcontent2-minor" :style="{ display: zoomShow ? '' : 'none' }">
          <div id="fixd-box">
            <router-link class="the_charts" to="/case/charts">
              <div class="text">排行榜</div>
              <div class="icon">></div>
            </router-link>
            <div>
              <div class="portal-ranking ranking-bg" style="padding: 20px 15px;max-height: 222px;">
                <div style="display: flex;justify-content: space-between;">
                  <p class="ranking-title">好评榜</p>
                  <el-dropdown trigger="click"  @command="positiveReview">
                    <span class="el-dropdown-link">
                      {{favorableName}}<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item command="total">总</el-dropdown-item>
                      <el-dropdown-item command="quarter">季度</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
                <ul class="ranking-data">
                  <li v-for="(item, index) in Positive" :key="index" class="title-line-ellipsis"
                    style="cursor: pointer;margin-top:15px;line-height: 22px;" @click="jumpRouter(item)">
                    <span class="portal-right-text blue-one" v-if="index == 0">
                      <img :src="`${webBaseUrl}/images/listblue01.png`" alt="">
                    </span>
                    <span class="portal-right-text blue-tow" v-if="index == 1">
                      <img :src="`${webBaseUrl}/images/listblue02.png`" alt="">
                    </span>
                    <span class="portal-right-text blue-three" v-if="index == 2">
                      <img :src="`${webBaseUrl}/images/listblue03.png`" alt="">
                    </span>
                    <span class="portal-right-text" v-if="index == 3">
                      <img :src="`${webBaseUrl}/images/list04.png`" alt="">
                    </span>
                    <span class="portal-right-text" v-if="index == 4">
                      <img :src="`${webBaseUrl}/images/list05.png`" alt="">
                    </span>
                    <span class="portal-title-desc" style="font-size: 14px;">{{ item.caseTitle }}</span>
                  </li>
                </ul>
              </div>
              <div style="padding: 20px 15px;max-height: 222px;margin-top: 20px;" class="portal-ranking ranking-bg1">
                <div style="display: flex;justify-content: space-between;">
                  <p class="ranking-title">人气榜</p>
                  <el-dropdown trigger="click"  @command="popularityReview">
                    <span class="el-dropdown-link">
                      {{popularityName}}<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item command="total">总</el-dropdown-item>
                      <el-dropdown-item command="quarter">季度</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
                <ul class="ranking-data">
                  <li v-for="(item, index) in Popularity" :key="index" class="title-line-ellipsis"
                    style="cursor: pointer;margin-top:15px;line-height: 22px;" @click="jumpRouter(item)">
                    <span class="portal-right-text orange-one" v-if="index == 0">
                      <img :src="`${webBaseUrl}/images/list-01.png`" alt="">
                    </span>
                    <span class="portal-right-text orange-tow" v-if="index == 1">
                      <img :src="`${webBaseUrl}/images/list02.png`" alt="">
                    </span>
                    <span class="portal-right-text orange-three" v-if="index == 2">
                      <img :src="`${webBaseUrl}/images/list03.png`" alt="">
                    </span>
                    <span class="portal-right-text" v-if="index == 3">
                      <img :src="`${webBaseUrl}/images/list04.png`" alt="">
                    </span>
                    <span class="portal-right-text" v-if="index == 4">
                      <img :src="`${webBaseUrl}/images/list05.png`" alt="">
                    </span>
                    <span class="portal-title-desc" style="font-size: 14px;">{{ item.caseTitle }}</span>
                  </li>
                </ul>
              </div>
              <div v-if="recommendRank.length > 0" class="portal-ranking ranking-bg2" style="padding: 20px 15px;max-height: 222px;margin-top: 20px;">
                <p class="ranking-title">推荐榜</p>
                <ul class="ranking-data">
                  <li v-for="(item, index) in recommendRank" :key="index" class="title-line-ellipsis"
                    style="cursor: pointer;margin-top:15px;line-height: 22px;">
                    <router-link :to="'/case/detail?id=' + item.caseId">
                      <span class="portal-right-text blue-one" v-if="index == 0">
                        <img :src="`${webBaseUrl}/images/listred01 .png`" alt="">
                      </span>
                      <span class="portal-right-text blue-tow" v-if="index == 1">
                        <img :src="`${webBaseUrl}/images/listred02.png`" alt="">
                      </span>
                      <span class="portal-right-text blue-three" v-if="index == 2">
                        <img :src="`${webBaseUrl}/images/listred03.png`" alt="">
                      </span>
                      <span class="portal-title-desc" style="font-size: 14px;">{{ item.caseTitle }}</span>
                    </router-link>
                  </li>
                </ul>
              </div>
              <!-- <div class="course-resources pointer"> -->
              <!-- 资源位 -->
              <!-- <img @click="banJump()" :src="fileBaseUrl + resonimg.image" alt=""> -->
              <!-- </div> -->
            </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 { formatDate } from "@/utils/datetime.js"
import { cutFullName } from "@/utils/tools.js";
import apiPlace from "@/api/phase2/place.js"
import portalFloatTools from "@/components/PortalFloatTools.vue";
export default {
  name: 'atticle',
  components: { portalHeader, portalFloatTools, portalFooter, interactBar, author, comments, pdfPreview },
  computed: {
    ...mapGetters(['userInfo'])
  },
  data() {
    return {
      switch: {
        'total': '总',
        'quarter': '季度',
      },
      favorableName: '季度',
      popularityName: '季度',
      fileBaseUrl: process.env.VUE_APP_FILE_BASE_URL,
      resonimg: {},
      Internet: 3,//1是成功 2是是失败 3是检测中
      noData: true,
      authorSign: '',//提问人的个性签名
      zoomShow: true,
      isTopBoxShow: true,
      toUsers: [],
      ankingList: [],
      Popularity: [],
      Positive: [],
      recommendRank: [],
      resolveId: '',
      basePath: process.env.VUE_APP_FILE_BASE_URL,
      pdfPath: '',
      caseDetail: {
        sysCreateAid: '',
        id: '',
        filePath: ''
      },
      ankingList: [],
      authorInfo: { aid: '', name: '', orgInfo: '', avatar: '', code: '', sex: null },
      domain: [],
      Profess: [],
      orgData: [],
      setTimeCase: null,
      dataTime: sessionStorage.getItem('startTime') || 0,
      defaultMaxTime: 1800,//最大时长
      cumulativeDuration:0,//累计时长
      secondTime:15, //秒数
    };
  },
  mounted() {
    console.log(this.dataTime);
    this.allRequests()
  },


  beforeRouteEnter(to, from, next) {
    let time = new Date().getTime()
    sessionStorage.setItem('startTime', time)
    next()
  },
  beforeRouteUpdate(to, from, next) {
    if (to.query.id != from.query.id) {
      window.removeEventListener("scroll", this.handleScroll);
      clearInterval(this.setTimeCase);
      // 结束时间
      let recordEndTime = new Date().getTime()
      this.endTimeRequst(from.query.id, recordEndTime)
      //时间重新赋值
      let time = new Date().getTime()
      sessionStorage.setItem('startTime', time)
      this.dataTime = time
      this.allRequests(to.query.id)
    }
    next()
  },
  beforeRouteLeave(to, from, next) {
    to.meta.keepAlive = true;
    next();
  },
  beforeDestroy() {
    console.log('销毁了');
    // 结束时间
    let recordEndTime = new Date().getTime()
    this.endTimeRequst(this.resolveId, recordEndTime)
    sessionStorage.removeItem('startTime')
    window.removeEventListener("scroll", this.handleScroll);
    clearTimeout(this.setTimeCase);
    this.cumulativeDuration = 0;
  },
  methods: {
    positiveReview(e){
      this.favorableName = this.switch[e]
      this.getPositive()
    },
    popularityReview(e){
      this.popularityName = this.switch[e]
      this.getPopularity()
    },
    endTimeRequst(caseId, recordEndTime) {
      console.log(this.dataTime);
      let time = (recordEndTime - this.dataTime) / 1000 / 60
      if (time > 10080) {
        time = 0
      }
      //结束之前的查看取时间
      apiCase.endReadTimer({
        caseId,
        browseDuration: Math.ceil(time),
        createTime:formatDate(new Date())
      })
    },
    allRequests(id = '') {
      this.Intsucc();

      this.resolveId = id ? id : 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();
      this.getQueryRecommendRank();
      this.couresreso();
      this.retest();
      window.addEventListener(
        "scroll",
        this.handleScroll
      );
    },
    banJump() {
      if (this.resonimg.JumpUrl) {
        window.open(this.resonimg.JumpUrl);
      }
    },
    jumecase(item) {
      this.$router.push({ path: './Detail.vue', query: { id: item.id } });
    },
    couresreso() {
      let key = 'case';
      apiPlace.detail(key).then(res => {
        let lmj = JSON.parse(res.result.content)
        // console.log(lmj)
        this.resonimg = lmj[0]
      })
    },
    retest() {
      this.Internet = 3;
      let $this = this;
      let xmlhttp = this.getXmlHttpRequest();
      let timedOut = false;
      let timer = setTimeout(function () {
        timedOut = true;
        xmlhttp.abort();
      }, 5000);
      xmlhttp.open("HEAD", window.location.protocol + "//uapi.boe.com.cn/500.html", true);
      xmlhttp.send();
      xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4) {
          if (xmlhttp.status == 200) {
            clearTimeout(timer);
            $this.Internet = 1;
            $this.$store.dispatch("userTrigger", {
              key: "ViewCase",//后台的事件key  发布文章且审核通过
              title: '查看案例',//事件的标题
              parameters: "",//用户自定义参数 name:value,name:value
              content: '查看了案例',//事件的内容
              objId: $this.resolveId,//关联的id
              objType: "3",//关联的类型
              objInfo: $this.caseDetail?.title,
              aid: $this.userInfo.aid, //当前登录人的id
              aname: $this.userInfo.name,//当前人的姓名
              status: 1 //状态，直接写1
            });
            $this.sendEventData();
          } else {
            clearTimeout(timer);
            $this.Internet = 2;
          }
        } else {
          if (timedOut) return;//忽略中止请求
          clearTimeout(timer);//取消等待的超时
        }
      }
    },
    getXmlHttpRequest() {
      if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
      }
      else if (window.ActiveXObject) {
        return new ActiveXObject("Microsoft.XMLHTTP");
      }
    },
    Intsucc() {
      const loading = this.$loading({
        lock: true,
        text: '正在进行安全检测',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      setTimeout(() => {
        loading.close();
      }, 2000);

    },

    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;
          // this.Profess = this.Profess.split(",")
        }
      });
    },
    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}`);
      const currentRoute = this.$router.currentRoute;
      if (currentRoute.query.id !== item.caseId) {
        this.$router.push('/case/detail?id=' + item.caseId);
      } else {
        // 结束时间
        let recordEndTime = new Date().getTime()
        this.endTimeRequst(item.id, recordEndTime)
        location.href = `${this.webBaseUrl}/case/detail?id=${item.caseId}`
      }
    },
    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 innerw = document.querySelector("#fixd-box");
      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 outerWidth = innerw.clientWidth;
      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 > 240) {
        this.isTopBoxShow = true;
        document.querySelector('#fixd-box').style.cssText = "position: fixed;top: 10px;width:" + outerWidth + "px";
      } 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;
      //     if (res.result.length < 5) {
      //       for (let i = 0; i = (5 - res.result.length); i++) {
      //         this.Popularity.push({
      //           authorName: '',
      //           count: 1,
      //           id: '',
      //           title: '',
      //         })
      //       }
      //     }
      //   }
      // })
      apiCase.queryPraisesNew(3,this.popularityName == '季度' ? 1 : 2).then(res => {
        if(res.status == 200) {
          this.Popularity = res.result
        }
      })
    },
    getQueryRecommendRank(){
      apiCase.queryRecommendRank(3).then(res => {
        if(res.status == 200) {
          this.recommendRank = res.result
        }
      })
    },
    getPositive() {
      // apiCase.queryComments(5).then(res => {
      //   if (res.status == 200) {
      //     this.Positive = res.result;
      //     if (res.result.length < 5) {
      //       for (let i = 0; i = (5 - res.result.length); i++) {
      //         this.Positive.push({
      //           authorName: '',
      //           count: 1,
      //           id: '',
      //           title: '',
      //         })
      //       }
      //     }
      //   }
      // })
      apiCase.queryCommentsNew(3,this.favorableName == '季度' ? 3 : 4).then(res => {
        if(res.status == 200) {
          this.Positive = res.result
        }
      })
    },
    sendEventData() {
      this.setTimeCase && clearTimeout(this.setTimeCase);
      let startTime = new Date().getTime();
      this.setTimeCase = setTimeout(() => {
        let endTime = new Date().getTime();
        let totalTime = Math.round((endTime - startTime) / 1000);
        this.cumulativeDuration += totalTime
        if(this.cumulativeDuration <= this.defaultMaxTime){
          console.log(totalTime,'时长');
          this.sendStudyTime(totalTime)
          this.secondTime = 60
          this.sendEventData()
        }else{
          this.cumulativeDuration = 0
          clearTimeout(this.setTimeCase);
          this.setTimeCase = null
        }
      }, this.secondTime * 1000);//15秒记录一次之后1分钟之后发送阅读案例事件
    },
    sendStudyTime(totalTime){
      this.$store.dispatch("userTrigger", {
        key: "ReadCase",//后台的事件key  发布文章且审核通过
        title: '阅读案例',//事件的标题
        parameters: "second:" + totalTime,//用户自定义参数 name:value,name:value
        content: '阅读了案例',//事件的内容
        objId: this.resolveId,//关联的id
        objType: "3",//关联的类型
        objInfo: this.caseDetail.title,
        aid: this.userInfo.aid, //当前登录人的id
        aname: this.userInfo.name,//当前人的姓名
        status: 1 //状态，直接写1
      });
    },
    getCaseData() {
      let $this = this;
      apiCase.details(this.resolveId, true).then(res => {
        if (res.status == 200) {
          if (JSON.stringify(res.result) != '{}') {
            this.caseDetail = res.result.case;
            this.caseDetail.majorType = this.caseDetail.majorType.split(",")
            this.getCaseUserDetail();
            if (this.caseDetail.filePath) {
              //this.pdfPath=this.basePath+this.caseDetail.filePath;
              this.createPlayUrl(this.caseDetail.filePath);
              //this.sendEventData();//移到检查之后
            } 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,
        source: 1,
        pageUrl: location.href,
        sendAid: this.userInfo.aid,
        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">
.case-banner {
  height: 240px;
  background: url('../../../../public/images/case-banner.png');
}

.course-resources {
  margin-top: 26px;

  img {
    width: 100%;
    height: 100%;
    border-radius: 8px;
  }
}
.the_charts{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  font-size: 18px;
  max-width: 400px;
  min-width: 260px;
  height: 47px;
  background: #DDEDFF;
  border-radius: 8px;
  .text{
    font-size: 18px;
    color: #387DF7;
  }
  .icon{
    position: absolute;
    font-size: 18px;
    color: #387DF7;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
  }

}
.pdftext {

  // padding: 0 20px;
  span {
    font-size: 22px;
    color: #ccc;
    font-weight: bold;
    line-height: 40px;
    padding: 0 20px;
  }

  text-align: center;
}

.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: 50px;

  .title {
    display: flex;
    width: 100%;

    h5 {
      margin: 0;
      font-size: 20px;
      line-height: 45px;
      font-weight: 600;
      flex: 1;
    }

    span {
      margin-left: auto;
      line-height: 45px;
      color: #999999;
      font-size: 14px;
    }
  }

  .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;
      background: rgba(44, 104, 255, 0.06);
      border-radius: 2px;
      padding: 0px 10px;
      line-height: 24px;
      text-align: center;
      font-size: 12px;
      height: 24px;
      box-sizing: border-box;
      color: #2C68FF;
    }

    .item-right {
      float: right;
    }
  }
}

.jianjie {
  // margin: 15px 0;
  margin-top: 30px;
  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>
