<template>
  <div id="case-list-content">
    <portal-header current="case" @emitInput="emitInput"></portal-header>
    <div class="xcontent portal-content">
      <div style="flex: 1;" class="xcol content-div">
         <el-row>
             <el-col :span="24">
          <el-card :body-style="{ padding: '0px' }" class="left-div">
            <el-row class="search-div">
              <el-row>
                <el-col :span="10" class="search-keyword">
                  <!-- <el-input placeholder="请输入关键词搜索" v-model="keyWord" clearable><el-button slot="append" icon="el-icon-search" @click="search"></el-button></el-input> -->
                  <!-- <div class="tip">热门搜索词：物联网 教师 辅导 绩效</div> -->
                  <!-- <div class="tip" style="font-size: 14px;">
                  热门搜索词：<span style="cursor:pointer;font-size:15px;margin-left: 10px;" v-for="(item,index) in searchRecords" :key="index" @click="useHotword(item)">{{item.keyword}}</span>
                  </div> -->
                </el-col>
              </el-row>
              <div class="searchbar" v-if="searchTags.length > 0">
              <div style="line-height: 30px;">
                <span class="item-title">搜索条件</span>
                <el-tag closable>显示事业</el-tag>
                <el-tag closable>经营</el-tag>
                <el-tag closable>业绩提升</el-tag>
                <el-tag closable v-for="(tag, tagIdx) in searchTags" :key="tagIdx">{{ tag.words }}</el-tag>
              </div>
            </div>
              <el-row class="search-item">
                <el-col :span="24">
                  <!-- <div class="item-title">组织领域</div> -->
                  <div style="margin-top:10px; display: flex;">
                     <div style="line-height: 25px;">
                      <span class="item-title" style="padding-right: 5px;">组织领域</span>
                      <span class="item-line"></span>
                    </div>
                    <div>
                        <el-radio-group v-model="category" size="mini" @change="search()">
                    <el-radio-button label="0">全部</el-radio-button>
                    <el-radio-button label="1">显示事业</el-radio-button>
                    <el-radio-button label="2">传感器事业</el-radio-button>
                    <el-radio-button label="3">智慧医工事业</el-radio-button>
                  </el-radio-group>
                    </div>
                    
                  </div>
                 
                </el-col>
              </el-row>
              <div class="search-div-collapse">
                <el-row class="search-item">
                  <el-col :span="24">
                    <!-- <div class="item-title">专业领域</div> -->
                    <div style="margin-top:10px; display: flex;">
                      <div style="line-height: 25px;">
                    <span class="item-title" style="padding-right: 5px;">专业分类</span>
                    <span class="item-line"></span>
                     </div>
                     <div>
                        <el-radio-group v-model="type2" size="mini" @change="search()">
                      <el-radio-button label="0">全部</el-radio-button>
                      <el-radio-button label="1">经营</el-radio-button>
                      <el-radio-button label="2">领用</el-radio-button>
                      <el-radio-button label="3">研发</el-radio-button>
                      <el-radio-button label="4">营销</el-radio-button>
                      <el-radio-button label="5">生产技术</el-radio-button>
                      <el-radio-button label="6">信息技术</el-radio-button>
                      <el-radio-button label="7">质量</el-radio-button>
                    </el-radio-group>
                     </div>
                    </div>
                   
                  </el-col>
                </el-row>
                <el-row class="search-item">
                  <el-col :span="24">
                    <!-- <div class="item-title">应用场景</div> -->
                    <div style="margin-top:10px; display: flex;">
                        <div style="line-height: 25px;">
                    <span class="item-title" style="padding-right: 5px;">专业领域</span>
                    <span class="item-line"></span>
                     </div>
                     <div>
                        <el-radio-group v-model="type3" size="mini" @click="search()">
                      <el-radio-button label="0">全部</el-radio-button>
                      <el-radio-button label="1">业绩提升</el-radio-button>
                      <el-radio-button label="2">人才培养</el-radio-button>
                      <el-radio-button label="3">知识管理</el-radio-button>
                    </el-radio-group>
                     </div>
                    </div>
                    
                  </el-col>
                </el-row>
              </div>
              <!-- <el-row class="search-div-more">
                <el-col :span="24">
                  <el-button type="text" @click="queryExpand = true" v-if="!queryExpand">收起</el-button>
                  <el-button type="text" v-else @click="queryExpand = false">更多</el-button>
                </el-col>
              </el-row> -->
            </el-row>
            
            <el-row class="order-div">
              <span class="quyer-tag">
                <el-button type="text" class="order-class" @click="searchData('')" :class="{ actice: queryCondition.orderField == '' }">时间最近</el-button>
                <el-button type="text" class="order-class" @click="searchData('praises')" :class="{ actice: queryCondition.orderField == 'praises' }">热度最高</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>
              <!-- <span v-if="isFind" style="padding-left:10px;">本次搜索出 {{caseList.count}} 条结果</span> -->
              <!-- <span class="more"></span> -->
            </el-row>
            <el-row class="data-content">
              <el-col :span="24" v-for="item in caseList.list" :key="item.id" class="case-list">
                <div class="case-info">
                  <div class="case-info">
                    <div class="case-info-title">
                      <router-link :to="'/case/detail?id='+item.id">
                        <!-- <span v-if="i % 2 == 0" style="color:red;margin-right:5px">[组织推荐]</span> -->
                        <span v-html="item.title"></span>
                        <div class="case-info-date">
                         <i class="el-icon-time"></i>
                         <time-show :time="item.sysCreateTime"></time-show>
                        </div>
                      </router-link>
                    </div>
                    <div class="case-info-summary" >
                      {{item.content}}
                    </div>
                    <div style="display: flex;justify-content: space-between;">
                      <div><author :avatar="item.authorInfo.avatar" :name="item.authorInfo.name" :info="item.authorInfo.orgInfo" :sex="item.authorInfo.sex"></author> </div>
                      <div><interactBar :type="0" :shares="false" :views="false" :data="item" :readonly="false"></interactBar> </div>
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>

          </el-card>
          <div class="pagination-div">
            <span class="pag-text" v-if="isMore" @click="loadMore()">加载更多</span>
            <span class="pag-text" v-else>没有更多数据了</span>
          </div>
        </el-col>
         </el-row>
      </div>
      <div style="width: 245px;margin-left: 5px;">
        <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" @click.native="jumpRouter(item)" effect="light" :content="item.sysCreateUname" placement="top-start">
                        <el-col :span="15" style="cursor: pointer;" 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="top-start">
                        <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="top-start">
                        <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>
      
      <el-row :gutter="10">
      </el-row>
      <div style="height: 50px;"></div>
      <el-dialog class="protocol" :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 apiDict from "@/api/modules/dict.js";
export default {
  name: 'index',
  components: { portalHeader, portalFooter, portalFloatTools, interactBar,timeShow ,author},
  computed: {
    ...mapGetters(['userInfo','portalCase']),
    isMore() {
      let isOk = true;
    if(this.caseList.list.length === this.caseList.count) {
       isOk = false;
    }
    return isOk;
    }
  },
  data() {
    return {
      searchRecords:[],
      caseList:{
        count:0,
        list:[]
      },
      ankingList:[],
      Popularity:[],
      Positive:[],
      protocolDialogVisible: false,
      protocolConfirmButton:true,
      queryCondition:{
        pageIndex:1,
        pageSize:10,
        orderField:'',
        breCommend:null,
        keyWord:''
      },
      keyWord:'',
      anking: 2,
      queryExpand: true, // true更多，false收起
      category: 0,
      type2: 0,
      type3: 0,
      isFind: false,
      searchTags: []
    };
  },
  mounted() {
    if(!this.portalCase.readProtocol){
      this.protocolDialogVisible = true;
    }
    this.keyWord = this.$route.query.keyword;
    this.getAnkingData()
    this.getPopularity()
    this.searchterm()
    this.getPositive()
    this.getCaseData();
    window.addEventListener(
      "scroll",
      this.handleScroll
    );
  },
  watch:{
    // queryCondition:{
    //   handler(newValue,oldValue){
    //     this.getCaseData()
    //   },
    //   deep:true,
    //   immediate:true
    // }
  },
    beforeDestroy(){
    window.removeEventListener("scroll",this.handleScroll);
  },
  methods: {
    emitInput(val) {
      this.keyWord=val;
      this.search()
    },
    searchData(num) {
      this.queryCondition.orderField = num;
      this.getCaseData();
    },
    handleScroll() {
        let innerHeight = document.querySelector('#case-list-content').clientHeight
        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(scrollTop > 100) {
          document.querySelector('#fixd-box').style.cssText = "position: fixed;top: 0;width:245px";
        } 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
      }
      this.getCaseData();
    },
    async getCaseData(){
      let isTopList = [];
      let caseList = [];
      await apiCase.queryList(this.queryCondition).then(res=>{
        if(res.status==200){
          if(res.result.list.length>0){
            res.result.list.forEach(item=>{
              item.authorInfo={aid:'',name:'',orgInfo:'',avatar:'',sex:null};
              if(item.isTop) {
                isTopList.push(item);
              } else {
                caseList.push(item)
              }
            })
            if(this.queryCondition.pageIndex == 1) {
              this.caseList.list =[];
            } 
            this.caseList.list.push(...isTopList,...caseList);
            this.caseList.count=res.result.count;
            this.getCaseUserData(res.result.list)
          }
        }else{
          this.$message.error(res.message);
        }
      }).catch(err=>{
        console.log(err)
      })
    },
    getCaseUserData(caseList){
      let ids=caseList.map((item,index)=>{
        return item.sysCreateAid
      })
      const noReapetIds=[...new Set(ids)]
      apiUser.getByIds(ids).then(res=>{
        if(res.status==200){
          caseList.forEach((item,index)=>{
            res.result.some(author=>{
              if(author.aid==item.sysCreateAid){
                item.authorInfo=author;
                return true;
              }else{
                return false;
              }
            })
          });
        }else{
          this.$message.error(res.message);
        }
      });
    },
    getAnkingData(){
      apiCase.usernameList(5).then(res=>{
        if(res.status==200){
          this.ankingList=res.result
        //  console.log(res)
        }
      })
    },
    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)
        }
      })
    },

    jumpRouter(item){
        this.$router.push(`/case/detail?id=${item.id}`);

    }


  }
};
</script>

<style scoped lang="scss">
.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;
}
::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;

}
::v-deep .el-card{
  border: none;
  border-radius: 0px;
}
::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;
}

 .item-title{
  margin: 10px 10px 10px 0;
  //font-size: 14px;
  font-weight: 600;
  color: #333333;
  // line-height: 20px;
}
.item-line{
  padding-left: 2px;
  height: 20px;
  
  background: #ddd;
}

.portal-content{
  display: flex;
  justify-content: space-between;
  // .item-title{
  //   margin-bottom: 5px;
  //   line-height: 36px;
  //   font-size: 14px;
  //   font-weight: 600;
  //   color: #333333;
  // }
}
.searchbar {
  background-color: #ffffff;
  // border: 1px solid #f3f3f3;
  // width: 1200px;
  // padding: 5px 20px;
  // margin-bottom: 10px;
}

.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 {
  .quyer-tag {
    // margin-left: 10px;
    .order-class {
      color: #666666;
      width: 80px;
      // text-align: left;
      border: 1px solid #dfdfdf;
      // padding-left: 5px;
      // padding-top: 5px;
      // padding-bottom: 5px;
      // padding: 8px 20px;
      .el-icon--right {
        margin-left: 0;
      }
    }
    .actice {
      background: #3e7fff;
      color: #fff;
    }
  }
  /* 分页div */
  .pagination-div {
    text-align: center;
    padding: 10px 0;
  }
  .order-div {
    padding: 12px 15px;
    background-color: #fff;
    // margin-bottom: ;
  }
  .data-content {
    background-color: #fff;
    padding: 5px 10px;
    .case-list:last-child {
      border-bottom: none;
    }

    .case-list {
      margin: 5px 0;
      padding-bottom: 10px;
      padding-left: 10px;
      padding-right: 10px;
      border-bottom: 1px solid #dfdfdf;
    }
    .case-image {
      width: 230px;
      height: 170px;
      float: left;
      border: 1px solid #eee;
    }
    .case-info {
      .case-info {
        .case-info-title {
          font-size: 16px;
          font-weight: 600;
          height: 30px;
          .case-info-date {
            height: 30px;
            float: right;
            font-weight: 200;
            color: #999999;
            i {
              margin-right: 5px;
            }
          }
        }
        .case-info-summary {
          height: 45px;
          line-height: 30px;
          font-size: 15px;
          color: #444444;
          display: -webkit-box;
          overflow: hidden;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
        .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: 10px 25px;
    .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;
  }
}

.right-box {
  line-height: 25px;
  .ranking-card {
    margin-bottom: 10px;
    .el-col{
      margin-bottom: 10px;
    }
    .center{
      text-align: center;
    }
  }
  
  .aligh-title{
    font-size: 14px;
    color: #333333;
  }
  .ranking-data {
    margin: 10px 0;
    color: #999999;
  }
}
</style>
