<template>
  <div class="search-box-wrap" :class="{'hidden':!isSearchBoxShow}">
    <div class="search-wrap">
      <el-input v-model.trim="searchText" placeholder="请输入搜索词"/>
      <el-button type="primary" @click="handleSearchWord">添加搜索词</el-button>
      <span @click="closeBox"><i class="el-icon-close"></i></span>
    </div>
  <div class="history-wrap">
    <div class="history-label">
      <span>
        <img src="~@/assets/img/document_m/history-icon.png" />
        历史记录</span>
      <span style="cursor:pointer;" @click="deleteSearchItem(_,'all')"><i class="el-icon-delete"></i></span>
    </div>
    <div class="history-search">
        <div class="search-item-wrap" v-for="item in searchArr" :key="item">
            <div class="search-item" :class="{'choosed':choosedSearch.find(s=>s===item)}"  @click="searchWord(item)">
                {{item}}
            </div>
            <span class="close" @click.stop="deleteSearchItem(item)"><i class="el-icon-close"></i></span>
        </div>
    </div>
  </div> 
  </div>
</template>

<script>
import{getHighlightWordRange,getTextNodes} from '../../utils/index';
export default {
  props:{
    isSearchBoxShow:{
      type:Boolean,
      default:false,
    }
  },
  watch:{
    isSearchBoxShow(val){
      if(val){
        this.searchText=''
      }
    }
  },
  data() {
    return {
      searchArr:[],
      searchText:'',
      choosedSearch:[]
    };
  },
  methods: {
    handleSearchWord(){
      if(!this.searchText.length) return
      !this.searchArr.includes(this.searchText)&&this.searchArr.push(this.searchText)
      this.searchWord(this.searchText)
      this.searchText = ''
    },
    //搜索高亮
    searchWord(word,type='search'){
      if(type==='search'){
        //支持多选
        const selectIndex = this.choosedSearch.findIndex(s=>s===word)
        if(selectIndex!==-1){
            this.choosedSearch.splice(selectIndex,1)
        }else{
            this.choosedSearch.push(word)
        }
      }
      //找到file-item-content里所有段落匹配的word位置
      const blockContent = document.querySelectorAll('.block-innerText')
      let allTextNodes = []
      blockContent.forEach(item=>{
        allTextNodes = allTextNodes.concat(getTextNodes(item))
      })
      //console.log('allTextNodex',allTextNodes)
      if(!CSS.highlights){
        this.$message.warning('该浏览器不支持高亮效果，请切换至chrome浏览器105版本以上')
        return
      }
      //选定文字也增加了高亮,所以这里不能清除全部高亮了
      //CSS.highlights.clear();
      CSS.highlights.delete('search-results')
      let rangesArr = []
      this.choosedSearch.forEach(s=>{
        const ranges = getHighlightWordRange(allTextNodes,s)
        rangesArr.push(...ranges.flat())
      })
      // 创建高亮对象
      const searchResultsHighlight = new Highlight(...rangesArr);
      // 注册高亮
      CSS.highlights.set("search-results", searchResultsHighlight); 
    },
    //删除单个/全部搜索项
    deleteSearchItem(item,type='item'){
        if(type==='item'){
            const selectIndex = this.searchArr.findIndex(s=>s===item)
            const selectIndexInChoosedSearch = this.choosedSearch.findIndex(s=>s===item)
            this.searchArr.splice(selectIndex,1)
            selectIndexInChoosedSearch!==-1&&this.choosedSearch.splice(selectIndexInChoosedSearch,1)
            selectIndexInChoosedSearch!==-1&&this.searchWord(_,'research')
        }else{
            this.searchArr=[]
            this.choosedSearch=[]
            CSS.highlights&&CSS.highlights.delete('search-results')
        }
    },
    closeBox(){
      this.$emit('close')
      //CSS.highlights&&CSS.highlights.delete('search-results');
    }
  },
};
</script>

<style scoped lang="scss">
.search-box-wrap{
  position:fixed;
  top:90px;
  right:45px;
  width:600px;
  min-height:190px;
  border-radius: 4px;
  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  padding: 30px 20px;
  background-color: #fff;
  &.hidden{
    pointer-events: none;
    opacity: 0;
  }
  .search-wrap{
    display: flex;
    align-items: center;
    .el-input{
      flex: 1;
    }
    .el-button{
      margin:0 20px;
    }
    span{
      font-size: 16px;
      cursor: pointer;
    }
  }
  .history-wrap{
    margin-top:20px;
    color:#666666;
    span{
      display: flex;
      align-items: center;
      font-size: 14px;
      img{
        width:14px;
        height:14px;
      }
    }
    .history-label{
      display: flex;
      justify-content: space-between;
      align-items: center;
      span{
        font-size: 14px;
        img{
          margin-right:10px;
        }
      }
    }
    .history-search{
     /*  margin-top:20px; */
      display: flex;
      flex-wrap: wrap;
      .search-item-wrap{
          position: relative;
          &:hover{
              .close{
                  visibility: visible;
              }
          }
            .close{
                visibility: hidden;
                position: absolute;
                top:16px;
                right:16px;
                width:14px;
                height: 14px;
                background-color: #83BFFF;
                border-radius: 50%;
                color: #FFFFFF;
                text-align: center;
                cursor: pointer;
                i{
                    transform: scale(0.7);
                }
            }
      }
      .search-item{
        margin-top:20px;
        max-width: 156px;
        box-sizing: border-box;
        border:1px solid #DCDFE6;
        border-radius: 4px;
        padding:4px 8px;
        margin-right: 20px;
        cursor: pointer;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        &.choosed{
            background-color: #409EFF;
            color: white;
        }
      }

    }
  }
}
</style>
