<template>
  <div id="case-list-content">
    <div style="margin-bottom:30px" class="case-banner">
      <portal-header current="case" textColor="#fff" @emitInput="emitInput"></portal-header>
    </div>
    <div class="xcontent2">
      <div class="xcontent2-main" style="margin-right: 30px;">
            <div class="left-div">
              <div class="search-div">
                <div class="searchbar" v-if="searchTags.length > 0">
                  <div style="line-height: 30px;">
                    <span class="item-title">搜索条件</span>
                    <el-tag closable v-for="(tag, tagIdx) in searchTags" :key="tagIdx" @close="tagsClose(tag,tagIdx)">{{ tag.value }}</el-tag>
                  </div>
                </div>
                <div class="search-item">
                    <div style="margin-top:10px; display: flex;">
                      <div style="line-height: 25px;padding-right: 10px;">
                        <!-- <img class="orgaicon" :src="`${webBaseUrl}/images/orgaimg.png`" alt=""> -->
                        <span class="item-title" >组织领域</span>
                        <span class="item-line"></span>
                      </div>
                      <div style="flex:1;">
                        <el-radio-group v-model="queryCondition.orgDomain" size="mini" @change="search()">
                          <el-radio-button :label="null">全部</el-radio-button>
                          <el-radio-button v-for="item in domain" :key="item.code" :label="item.code"> {{ item.name}}</el-radio-button>
                        </el-radio-group>
                      </div>
                    </div>
                </div>
                <div class="search-div-collapse">
                  <div class="search-item">

                      <div style="margin-top:10px; display: flex;">
                        <div style="line-height: 25px;padding-right: 10px;">
                           <!-- <img class="orgaicon" :src="`${webBaseUrl}/images/specimg.png`" alt=""> -->
                      <span class="item-title" >专业分类</span>
                      <span class="item-line"></span>
                       </div>
                       <div style="flex:1" id="searchBox">
                          <el-radio-group style="display:flex;" v-model="queryCondition.majorType" size="mini" @change="search()">
                            <el-radio-button :label="null">全部</el-radio-button>
                            <div>
                              <el-radio-button v-for="item in speciData" :key="item.code" :label="item.code" > {{ item.name }} </el-radio-button>
                            </div>
                          </el-radio-group>
                       </div>
                      </div>

                  </div>
                </div>
                <div class="searBox" v-if="searchwd">
                   <el-button type="text"  id="closeSearchBtn" @click="closeSearch">
                        {{word}}
                       <i :class="showAll ? 'el-icon-arrow-up ': 'el-icon-arrow-down'"></i>
                  </el-button>
                </div>
              </div>
              <div style="height:30px;background-color:#f6f7fc;"></div>
              <div class="order-div"  style="border-bottom:none">
                <span class="quyer-tag">
                  <el-button type="text" class="order-class" @click="searchData('views')" :class="{ actice: queryCondition.orderField == 'views' }">最热</el-button>
                  <el-button type="text" class="order-class" @click="searchData('')" :class="{ actice: queryCondition.orderField == '' }">最新</el-button>
                  <el-button type="text" class="order-class" @click="searchexcellent()" :class="{ actice: queryCondition.excellent == true }">优秀案例</el-button>

                  <!-- <el-button type="text" class="order-class" @click="queryCondition.breCommend = queryCondition.breCommend == ture ? true : null" :class="{ actice: queryCondition.breCommend == true }">组织推荐</el-button> -->
                </span>
              </div>
              <div class="data-content">
                <div v-for="item in caseList.list" :key="item.id" class="case-list">
                  <div class="case-info">
                    <div class="case-info-cont">
                        <router-link :to="'/case/detail?id='+item.id">
                      <div class="case-info-title">
                      <div class="case-titdiv">
                          <span class="case-tittext" v-html="item.title"></span>
                          <div class="case-info-date portal-time">
                            <i class="el-icon-time"></i>
                            <time-show :time="item.sysCreateTime"></time-show>
                          </div>
                      </div>
                    </div>
                    </router-link>
                      <div style="height:58px;padding-top:14px ">
                        <author :avatar="item.authorInfo.avatar" :name="item.authorInfo.name" :info="item.authorInfo.orgInfo"  :sex="item.authorInfo.sex" :aid="item.authorInfo.aid"></author>
                      </div>
                       <router-link :to="'/case/detail?id='+item.id">
                      <div class="keyword-text clearfix">
                        <div style="color:#2974D6;font-weight: 450;" v-if="item.orgDomain">{{ orgDomainTranslate(item.orgDomain) }}</div>
                        <div style="color:#2974D6;font-weight: 450;" v-if="item.orgDomain == '' && item.orgDomainParent">{{ orgDomainTranslate(item.orgDomainParent) }}</div>
                        <div style="color:#2974D6;font-weight: 450;"  v-for="item,idx in item.majorType" :key="idx" >{{ majorTypeTranslate(item) }}</div>
                        <div v-if="item.keyword1">{{ item.keyword1 }}</div>
                        <div v-if="item.keyword2">{{ item.keyword2 }}</div>
                        <div v-if="item.keyword3">{{ item.keyword3 }}</div>
                        <div v-if="item.keyword4">{{ item.keyword4 }}</div>
                        <div v-if="item.keyword5">{{ item.keyword5 }}</div>
                      </div>
                    </router-link>
                      <div class="case-info-summary two-line-ellipsis" @click="jumcasedet(item)">
                        {{ item.summary }}
                        <!-- <router-link :to="'/case/detail?id='+item.id"> -->
                            <!-- {{displayAll(item)}} -->
                        <!-- </router-link> -->
                            <!-- <span style="color:#588afc;cursor:pointer;" v-if="item.summary.length>150" @click.stop="changeIsAll(item)"> -->
                                <!-- {{item.isAll?'收起':'展开'}} -->
                            <!-- </span> -->
                      </div>
                      <div style="display: flex;justify-content: flex-end;">
                       <div style="margin:8px 0;">
                          <interactBar :type="0"  :data="item" :readonly="true"></interactBar> </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="pagination-div">
                <span class="pag-text" @click="loadMore()" v-if="moreState == 1">加载更多</span>
                <span class="pag-text-msg" v-else-if="moreState == 2">数据加载中</span>
                  <span class="notcoures" v-else-if="caseList.list.length == 0">
                      <img :src="`${webBaseUrl}/images/nocase.png`" alt="">
                  <h5>暂无案例，请优先学习其它案例吧～</h5>
                  </span>
                <!-- <span class="pag-text-msg" v-else-if="isSeach">没有查询到相关内容</span> -->
              </div>
              <div v-if="isSeach" style="height:382px">
              </div>
            </div>

      </div>
      <div class="xcontent2-minor">
           <div id="fixd-box">
              <div class="portal-ranking ranking-bg">
                <p class="ranking-title">好评榜</p>
                <ul class="ranking-data">
                  <li v-for="(item, index) in Positive" :key="index" class="title-line-ellipsis" style="cursor: pointer;margin-top:30px;line-height: 22px;">
                        <router-link :to="'/case/detail?id='+item.id">
                        <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.title }}</span>
                         </router-link>
                   </li>
                </ul>
              </div>
              <div class="portal-ranking ranking-bg1" style="margin-top:26px" >
                <p class="ranking-title">人气榜</p>
                <ul class="ranking-data">
                    <li v-for="(item, index) in Popularity" :key="index" class="title-line-ellipsis" style="cursor: pointer;margin-top:30px;line-height: 22px;">
                        <router-link :to="'/case/detail?id='+item.id">
                        <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.title }}</span>
                        </router-link>
                   </li>
                </ul>
              </div>
               <!-- <div class="course-resources pointer"> -->
                <!-- 资源位 -->
                <!-- <img  @click="banJump()" :src="fileBaseUrl + resonimg.image" alt=""> -->
              <!-- </div> -->
           </div>
      </div>
      <div style="height: 50px;"></div>
      <el-dialog class="protocol" :close-on-click-modal="false" :visible.sync="protocolDialogVisible" width="30%" :show-close="false">
        <div class="protocol-title">案例查阅及使用用户协议</div>
        <div class="protocol-content">
          &emsp;&emsp;本专区内案例为BOE各组织沉淀的通用案例、 组织案例、卓越绩效案例、管理案例、 职级晋升案例、企业文化案例等。 案例内容记录作者亲历的、真实的、已完成的、
          典型工作事件，提炼解决具体问题的心得、思路经验、方法等。 仅供BOE员工查询、学习、交流使用，未经允许不得以任何方式外传。
        </div>
        <span slot="footer" class="dialog-footer">
          <el-checkbox label="我已阅读并同意。" @change="protocolCheck" style="float: left"></el-checkbox>
          <el-tooltip :disabled="!protocolConfirmButton" effect="light" content="请先勾选‘我已阅读并同意。’" placement="bottom">
            <span><el-button type="primary" :disabled="protocolConfirmButton" @click="protocolConfirm">确 定</el-button></span>
          </el-tooltip>
        </span>
      </el-dialog>
    </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 portalFloatTools from "@/components/PortalFloatTools.vue";
import interactBar from "@/components/Portal/interactBar.vue";
import timeShow from "@/components/Portal/datetimeShow.vue";
import author from "@/components/Portal/authorInfo.vue";
import apiCase from "@/api/modules/cases.js";
import apiUser from "@/api/system/user.js";
import apiSearchterm from "@/api/modules/searchterm.js";
import { deepClone } from "../../../utils";
import apiDict from "@/api/modules/dict.js";
import {cutFullName} from "@/utils/tools.js";
import apiPlace from "@/api/phase2/place.js"
export default {
  name: "index",
  components: {
    portalHeader,
    portalFooter,
    portalFloatTools,
    interactBar,
    timeShow,
    author
  },
  computed: {
    ...mapGetters(["userInfo", "portalCase"]),
    word: function() {
      if (this.showAll == false) {
        //对文字进行处理
        return "展开";
      } else {
        return "收起";
      }
    },
    isMore() {
      let isOk = true;
      if (this.caseList.list.length === this.caseList.count) {
        isOk = false;
      }
      return isOk;
    }
  },
  data() {
    return {
      fileBaseUrl: process.env.VUE_APP_FILE_BASE_URL,
      resonimg:{},
      speciData:[],
      moreState: 1, // 1 加载更多 2 加载中 3无数据
      isSeach: false,
      searchwd: false,
      showAll: true, //是否展开全部
      initHeight:40,//原始 高度
      searchRecords: [],
      caseList: {
        count: 0,
        list: []
      },
      ankingList: [],
      Popularity: [],
      Positive: [],
      domain: [],
      Profess: [],
      optionsList: [], //分类数据
      protocolDialogVisible: false,
      protocolConfirmButton: true,
      queryCondition: {
        pageIndex: 1,
        pageSize: 10,
        isTop: true,
        orderField: "views",
        // breCommend:null,
        keyWord: "",
        majorType:null, //专业分类
        orgDomain: null, // 组织领域
        orderAsc: false,
        excellent:false
      },
      keyWord: "",
      anking: 2,
      queryExpand: true, // true更多，false收起
      category: 0,
      type2: 0,
      type3: 0,
      isFind: false,
      searchTags: [],
      orgData: [],
    };
  },

  mounted() {
    if(this.searchTags.length == 0){
      this.queryCondition.majorType = null;
      this.queryCondition.orgDomain = null;
    };
    this.specialized();
    // this.$nextTick(function() {
    //   this.closeSearch();
    // });
    if (!this.portalCase.readProtocol) {
      this.protocolDialogVisible = true;
    }
    this.keyWord = this.$route.query.keyword;
    if (this.keyWord != "") {
      this.isSeach = true;
    }
    this.getAnkingData();
    this.getPopularity();
    this.searchterm();
    this.getPositive();
    this.getProfess();
    this.getdomain();
    // this.getCaseData();
    this.search();
     this.couresreso();
    window.addEventListener("scroll", this.handleScroll);

  },

  watch: {
    // queryCondition:{
    //   handler(newValue,oldValue){
    //     this.getCaseData()
    //   },
    //   deep:true,
    //   immediate:true
    // }
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScroll);
  },
  methods: {
    banJump() {
      if(this.resonimg.JumpUrl) {
        window.open(this.resonimg.JumpUrl);
      }
    },
    couresreso(){
      let key = 'case';
      apiPlace.detail(key).then(res=>{
        let lmj =  JSON.parse(res.result.content)
        this.resonimg = lmj[0]
      })
    },
  specialized(){
    let $this=this;
    apiCase.majorTypes().then(res =>{
      if(res.status == 200){
        this.speciData = res.result;
        this.$nextTick(function() {
          $this.initHeight = document.getElementById("searchBox").offsetHeight;
          $this.closeSearch();
        });
      }
    })
  },


    jumcasedet(item) {
      this.$router.push({path:'/case/detail',query:{id:item.id}});

    },
    debounce(func, wait) {
      // 非立即执行
      let timeout;
      return function() {
        let context = this;
        let args = arguments;
        if (timeout) clearTimeout(timeout);
        timeout = setTimeout(() => {
          func.apply(context, args);
        }, wait);
      };
    },
    //展示全部
    displayAll(item) {
      if (!item.isAll && item.summary && item.summary.length > 150) {
        return item.summary.slice(0, 150) + "...";
      }
      return item.summary;
    },
    changeIsAll(item) {
      item.isAll = !item.isAll;
    },
    closeSearch() {
      this.showAll = !this.showAll;
      var searchBoxHeght = document.getElementById("searchBox");
      //console.log(this.initHeight,'this.initHeight');
      if(this.initHeight>80){
        this.searchwd = true;
      }
      //console.log(het,'het');
      if(this.showAll){
        //searchBoxHeght.style.height = "auto";
        searchBoxHeght.style.maxHeight = this.initHeight + "px";
      }else{
        searchBoxHeght.style.maxHeight = 70 + "px";
      }
    },
    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;
          // console.log(this.Popularity)
        }
      });
    },
    getPositive() {
      apiCase.queryComments(5).then(res => {
        if (res.status == 200) {
          this.Positive = res.result;
          console.log(res);
        }
      });
    },

    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;
    },
    emitInput(val) {
      this.keyWord = val;
      this.isSeach = true;
      this.queryCondition.pageIndex = 1;
      this.search();
    },
    searchexcellent(){
        this.queryCondition.excellent = !this.queryCondition.excellent;
        this.getCaseData();
    },
    searchData(num) {
      // if(num == 1){
        // this.queryCondition.excellent = !this.queryCondition.excellent;
        // this.getCaseData();
      // }
      this.queryCondition.pageIndex = 1;
      this.queryCondition.orderField = num;
      this.getCaseData();
    },
    handleScroll() {
      let innerw = document.querySelector("#fixd-box");
      let innerHeight = document.querySelector("#case-list-content")
        .clientHeight;
      let outerHeight = document.documentElement.clientHeight;
      let outerWidth = innerw.clientWidth;
      let scrollTop = document.documentElement.scrollTop;
      if (outerHeight + scrollTop + 350 >= innerHeight) {
        if (this.moreState == 1) {
          this.debounce(this.loadMore(), 5000);
        }
      }
      if (scrollTop > 630) {
        document.querySelector("#fixd-box").style.cssText =
          "position: fixed;top: -400px;width:"+outerWidth+"px";
      } else {
        document.querySelector("#fixd-box").style.cssText = "position: static";
      }
    },
    useHotword(item) {
      this.keyWord = item.keyword;
      this.search();
    },
    searchterm() {
      apiSearchterm.list(5, 3).then(res => {
        if (res.status === 200) {
          this.searchRecords = res.result;
        }
      });
    },
    loadMore() {
      this.queryCondition.pageIndex += 1;
      this.getCaseData();
    },
    protocolCheck(obj) {
      this.protocolConfirmButton = !obj;
    },
    protocolConfirm() {
      this.protocolDialogVisible = false;
      this.$store.dispatch("portal/SetReadProtocol", true);
    },
    handleSizeChange(item) {
      this.queryCondition.pageSize = item;
    },
    handleCurrentChange(item) {
      this.queryCondition.pageIndex = item;
    },
    search() {
      apiSearchterm.save({ keyword: this.keyWord, type: 3 });
      if (!this.isFind) {
        this.isFind = true;
      }
      this.queryCondition.pageIndex = 1;
      if (this.keyWord != this.queryCondition.keyWord) {
        this.queryCondition.keyWord = this.keyWord;
      }
      if(this.queryCondition.orgDomain == 0){
        this.queryCondition.orgDomain = null
      }
      if(this.queryCondition.majorType == 0){
        this.queryCondition.majorType = null
      }


      this.getCaseData();
    },
    async getCaseData() {
      this.getTags();
      if (this.queryCondition.pageIndex == 1) {
        this.caseList.list = [];
      }
      this.moreState = 2;
      await apiCase
        .queryList(this.queryCondition)
        .then(res => {
          if (res.status == 200) {
            if (res.result.list.length > 0) {
              this.isSeach = false;
              res.result.list.forEach(item => {
                item.majorType = item.majorType.split(",");
                item.isAll = false;
                item.authorInfo = {
                  aid: "",
                  name: "",
                  orgInfo: "",
                  avatar: "",
                  sex: null
                };
              });
              this.caseList.list.push(...res.result.list);
              this.caseList.count = res.result.count;
              this.getCaseUserData(res.result.list);
              this.moreState = 1;
              if (res.result.count === res.result.list.length) {
                this.moreState = 3;
              }
            } else {
              this.moreState = 3;
            }
          } else {
            this.$message.error(res.message);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    getTags() {
      this.searchTags = [];
      let caseData = deepClone(this.queryCondition);
      for (let i in caseData) {
        if (
          caseData[i] !== "" &&
          i !== "pageIndex" &&
          i !== "pageSize" &&
          i !== "orderField" &&
          i !== "orderAsc" &&
          i !== "isTop" &&
          caseData[i] !== null &&
          caseData[i] !== undefined
        ) {
          if (caseData[i] == "0") {
            return;
          }
          if(i == 'majorType'){
            this.searchTags.push({ type:'majorType',value:this.majorTypeTranslate(caseData[i])})
          }
          if(i == 'orgDomain'){
            this.searchTags.push({type:'orgDomain',value:this.orgDomainTranslate(caseData[i])})
          }
          if(i == 'keyWord'){
            this.searchTags.push({type:'keyWord',value:caseData[i]})
          }
        }
      }
    },
    tagsClose(tag, index) {

      for (let i in this.queryCondition) {

        if (tag.type === i) {
          if (i == "majorType") {
             this.queryCondition.majorType = '';
          }
          if (i == "orgDomain") {
            this.queryCondition.orgDomain = '';
          }
          if (i == "keyWord") {
            this.queryCondition.keyWord = "";
            this.keyWord = "";
          }
          this.queryCondition[i] = "";
          this.searchTags.splice(index, 1);
           if (i == "majorType") {
             this.queryCondition.majorType = null;
          }
          if (i == "orgDomain") {
            this.queryCondition.orgDomain = null;
          }

          this.getCaseData();
        }
      }

    },
    getCaseUserData(caseList) {
      let ids = caseList.map((item, index) => {
        return item.authorId;
      });
      const noReapetIds = [...new Set(ids)];
      apiUser.getByIds(noReapetIds).then(res => {
        if (res.status == 200) {
          caseList.forEach((item, index) => {
            res.result.some(author => {
              if (author.aid == item.authorId) {
                item.authorInfo = author;
                author.orgInfo=cutFullName(author.orgInfo,1);
                return true;
              } else {
                return false;
              }
            });
          });
        } else {
          this.$message.error(res.message);
        }
      });
    },
    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:'',
             })
          }
          }

        }
      });
    },
    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:'',
             })
          }

          }
        }
      });
    },

    jumpRouter(item) {
      // console.log(item)
      this.$router.push(`/case/detail?id=${item.id}`);
    }
  }
};
</script>

<style scoped lang="scss">
.notcoures{
  text-align: center;
  img{
    width: 360px;
    height: 226px;
  }
  h5{
    font-size: 14px;
    color: #333333;
    font-weight: 400;
  }
}
.orgaicon{
  width: 22px;
  height: 22px;
  vertical-align: middle;
  margin-right: 8px;
  img{
    width: 100%;
    height: 100%;
  }
}
.course-resources{
  margin-top: 26px;
  img{
    width: 100%;
    height: 100%;
    border-radius: 8px;
  }
}
  .case-banner{
    height: 240px;
    background: url('../../../../public/images/case-banner.png');
  }

::v-deep  .el-checkbox{
   .el-checkbox__input{
     .el-checkbox__inner{
       border: 1px solid #3e3c3c;
     }
   }

  }

::v-deep .el-radio-button{
  margin-right:-5px;
}
::v-deep .el-button {
  border-radius: 0px;
}
.case-titdiv {
  line-height: 30px;
  display: flex;
  .case-tittext {
    font-size: 18px;     
    font-weight: 600;
    color: #333333;
    width: 67%;
    display: -webkit-box;
    overflow: hidden;
    word-break: break-all;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    box-sizing: border-box;
  }
}
::v-deep .interact-bar .interact-bar-btns .interact-bar-btn {
  margin-left: 0;
  margin-right: 20px;
}
.clearfix:after{
  content: "020";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  }
.keyword-text {

  div {
    padding:0px 8px;
    margin-top: 5px;
    float: left;
    line-height: 24px;
    font-size: 12px;
    border-radius:2px;
    margin-right: 8px;
    color: #2C68FF;
    height: 24px;
    background: rgba(44,104,255,0.06);
  }
}
.searBox {
  text-align: center;
  margin: 0px auto 0 auto;
}
#searchBox {
  overflow: hidden;

}

::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;
}
::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;
}
::v-deep .el-card {
  border: none;
  border-radius: 0px;
  // border: 1px solid #ebeef5;
}
::v-deep .el-radio-button__inner,
.el-radio-group {
  vertical-align: top;
}
::v-deep .el-radio-button__inner {
  background: none;
}
::v-deep .el-radio-button:first-child .el-radio-button__inner {
  border-left: none;

  // border-radius: 4px 0 0 4px;
  //box-shadow: none!important;
}

::v-deep.item-title {
  margin: 15px 10px 10px 0;
  font-size: 16px !important;
  font-weight: 400;
  color: #6B7C85;
  line-height: 25px;
}
.item-line {
  padding-left: 2px;
  height: 20px;
  // background: #ddd;
}

.portal-content {
  display: flex;
  justify-content: space-between;
  
}
.searchbar {
  background-color: #ffffff;
 
}

.fixed {
  position: fixed;
  top: 0px;
  background-color: #f0f0f0;
  z-index: 999;
  height: 50px;
}
.protocol {
  .protocol-title {
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 25px;
  }
  .protocol-content {
    font-size: 14px;
    line-height: 25px;
  }
}
.left-div {
  border: none;
  .quyer-tag {
    // margin-left: 10px;
    .order-class {
      padding:0px 12px;
      color: #6E7B84;
      line-height: 32px;
      border-radius: 0px;
      .el-icon--right {
        margin-left: 0;
      }
    }
    .actice {
      border: 0px;
      background: #387DF7;
      color: #fff;
      font-size: 14px;
      border-radius: 4px;
    }
  }
  /* 分页div */
  .pagination-div {
    text-align: center;
    padding: 10px 0;
    .pag-text {
    }
  }
  .order-div {
    padding: 34px 40px 20px 40px;
    background-color: #fff;
    // margin-bottom: ;
  }
  .data-content {
    background-color: #fff;
    padding: 5px 50px;
    ::v-deep .interact-bar-btns{
      .interact-bar-btn{
        text-align: right;
        min-width: 78px !important;
        margin-right: 0;
      }
    }
    .case-list:last-child {
      border-bottom: none;
    }

    .case-list {
      border-bottom: 1px solid rgba(153, 153, 153,.2);
      margin-top: 10px;
      margin-bottom: 25px;
      padding-left: 5px;
      padding-right: 5px;
    }
    .case-image {
      width: 230px;
      height: 170px;
      float: left;
      border: 1px solid #eee;
    }

    .case-info {
      .case-info-cont {
        .case-info-title {
          font-size: 15px;
          color: #333;
          font-weight: 600;
          height: 30px;
          .case-info-date {
            flex: 1;
            text-align: right;
            font-weight: normal;
            // font-size: 12px;
            // height: 30px;
            // font-weight: 200;
            // color: #8590a6;
            i {
              margin-right: 5px;
            }
          }
        }
        .case-info-summary {
          margin-top:16px;
          cursor: pointer;
          margin-bottom: 5px;
          word-break: break-all;
          line-height: 24px;
          font-size: 14px;
          color: #333330;
          font-weight: 400;
        }
        .case-info-tools {
          height: 30px;
          .case-info-tools-auth {
            float: left;
            font-size: 13px;
            color: #999999;
            img {
              margin-right: 10px;
              width: 30px;
              border: 1px solid #eee;
              border-radius: 50%;
              vertical-align: middle;
            }
          }
          .case-info-tools-btns {
            float: right;
            .case-info-tools-btn {
              margin: 0 0 0 15px;
            }
          }
        }
      }
    }
  }
  .search-div {
    background: #fff;
    padding: 30px 40px;
    .search-keyword {
      line-height: 30px;
      .tip {
        font-size: 12px;
        color: #999999;
        // margin-bottom: 20px;
      }
    }
    .search-item {
      // padding: 10px 0;
    }
    // .search-item:not(:last-child) {
    //   //  border-bottom: 1px solid #dfdfdf;
    // }
  }
  .search-div-collapse {
    display: block;
  }
  .search-div-expand {
    display: none;
  }
  .search-div-more {
    text-align: center;
  }
}

</style>
