<template>
  <div class="label-list">
    <div class="list-item" v-for="(detail,index) in detailArr" :key="index">
      <p>{{detail.title}}</p>
      <ul>
        <li v-for="(item,dindex) in detail.arr" :key="dindex" 
            @mousemove="showCurrentRange(item,'show')"
            @mouseleave="showCurrentRange(_,'delete')"
            @click.stop="addLab(detail,item)">
          <img src="~@/assets/img/document_m/label-img.png">
          <span style="margin-right:auto;">{{item.LabelName}}</span>
          <i class="el-icon-circle-close" v-if="detail.isThis" @click.stop="deleteLab(item)"></i>
        </li>
        <li v-if="!detail.arr.length" @click.stop 
            @mousemove="showCurrentRange(_,'delete')"
            @mouseleave="showCurrentRange(_,'delete')">
          <span>暂无标签</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props:{
    detailArr:{
      type:Array,
      default:()=>{
        return []
      }
    },
    type:{//展示标签
        type:String,
        default:'block'
    }
  },
  data() {
    return {
        showingLabel:null,//正在展示的label
    };
  },
  methods: {
    //由于只有当前标签可以删除/添加,所以不需要判断是哪个数组里的
    //删除标签事件
    deleteLab(label){
      this.showCurrentRange(_,'delete')
      this.$emit('deleteLab',label)
    },
    //快速添加标签事件
    addLab(detail,label){
      if(detail.isThis) return
      this.$emit('addLab',label)
    },
    //展示标签详情的文字范围
    showCurrentRange(label,type){
        if(this.type==='block') return 
        if(this.showingLabel&&this.showingLabel.LabelId===label.LabelId) return 
        if(type==='delete'){
            CSS.highlights&&CSS.highlights.delete("label-choosed-mine") 
            this.showingLabel = null
            return 
        }
        const {areaRangeInfo} = label
        if(areaRangeInfo){
            this.showingLabel = label
            const {ParentNode,StartOffset,EndOffset} = areaRangeInfo
            const range = new Range()
            range.setStart(ParentNode,StartOffset)
            range.setEnd(ParentNode,EndOffset)
            CSS.highlights&&CSS.highlights.set("label-choosed-mine",new Highlight(range))
        }
    }
  },
};
</script>

<style scoped lang="scss">
.label-list{
  padding:8px;
  .list-item{
    p{
      color:#333333;
    }
    ul{
      li{
        padding:6px 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #666666;
        cursor: pointer;
        background-color: transparent;
        transition: background-color .3s;
        &:hover{
          background-color: #ECF5FF;
        }
        img{
          width:14px;
          height:14px;
          margin-top:2px;
          margin-right: 5px;
        }
        i{
          margin-left: 10px;
        }
      }
    }
  }
}
</style>
