<template>
  <div class="select-label-detail">
    <div class="select-option">
        <!-- 不需要选择全部标签了,注释相关代码 -->
      <!-- <div class="select-all">
        <el-checkbox v-model="isSelectAll" @change="selectChange">全部标签</el-checkbox>
      </div> -->
      <div class="select-minie">
        <el-switch
          @change="switchChange"
          v-model="isOnlyMine"
          active-text="只看我的">
        </el-switch>
      </div>
    </div>
    <div class="classify-cont">
      <el-tag
        v-for="item in labelArr"
        :class="[
          'classify-tag',
          { act: selectedLabelArr.find(label=>label.LabelId===item.LabelId) },
        ]"
        :key="item.LabelId"
        type="info"
        effect="plain"
        @click="chooseLabel(item)"
      >
        {{ item.LabelName }}
      </el-tag>
    </div>
    <div class="tool-btn">
      <el-button @click="closePop('close')">取 消</el-button>
      <el-button type="primary" @click="closePop('select')">确定</el-button>
    </div>
  </div>
</template>

<script>
import {semanticInterface} from '@/api/modules/semanticsApi.js';
export default {
  props:{
    isSelectLabelShow:{
      type:Boolean,
      default:false
    },
    newAddLabelArr:{ //在当前页打的标签
      type:Array,
      default:()=>{
        return []
      }
    },
    lastSelectLabelArr:{ //上一次选择的标签
      type:Array,
      default:()=>{
        return [] 
      }
    },
    selectedFileArr:{ //已选择的文档ids
      type:Array,
      default:()=>{
        return []
      }
    }
  },
  watch:{
    isSelectLabelShow(val){
      if(val){
        this.initLabelInfo()
      }
    },
  },
  data() {
    return {
      labelArr:[],//当前语义分析拥有的所有标签
      selectedLabelArr:[],//选择需要展示的标签
      onlyMine:[],//labelArr中，属于自己的标签
      isOnlyMine:false,//选择只看我的
      /* isSelectAll:false,//选择全部标签 */
    };
  },
  methods: {
    initLabelInfo(){
      if(!this.selectedFileArr.length) return
      //给labelArr赋值 值来自选择对比文档后的HeadLabel，考虑到标签页可关闭，在这里请求一次选择对比文档接口
      semanticInterface.getCompareDocumentDetail({
        DocIds:this.selectedFileArr.join(',')
      }).then(res=>{
        if(res.Ret!==200) return 
        const {HeadLabel} = res.Data
        this.labelArr = HeadLabel||[]
        this.selectedLabelArr = _.cloneDeep(this.lastSelectLabelArr)
        //如果有当前页新加的标签
        if(this.newAddLabelArr.length){
          //与labelArr的标签做对比
          //如果有相同的,则该项的IsMine置为1
          //如果有不同的,则labelArr添加一项
          this.newAddLabelArr.forEach(label=>{
            const index = this.labelArr.findIndex(l=>l.LabelId===label.LabelId)
            let temp = {
              LabelId:label.LabelId,
              IsMine:1,
              LabelName:label.LabelName
            }
            if(index===-1){
              this.labelArr.push(temp)
            }else{
              this.labelArr.splice(index,1,temp)
            }
          })
        }
        //初始化全部标签和只看我的
        this.initSelectBtn()
      })
    },
    initSelectBtn(){
      /* if(this.isSelectAll){
        this.isSelectAll = this.selectedLabelArr.length===this.labelArr.length
      } */
      if(this.isOnlyMine){
        this.isOnlyMine = this.selectedLabelArr.length===this.labelArr.filter(l=>l.IsMine===1).length
      }
    },
    chooseLabel(label) {
      //是否是已选择的id
      const selectedLabelIndex = this.selectedLabelArr.findIndex(l=>l.LabelId===label.LabelId)
      //是否是属于"只看我的"的标签
      const IsMineArr = this.labelArr.filter(l=>l.IsMine===1)
      const IsMine = IsMineArr.findIndex(l=>l.LabelId===label.LabelId)!==-1
      if (selectedLabelIndex!==-1) {
        this.selectedLabelArr.splice(selectedLabelIndex, 1);
        IsMine&&(this.isOnlyMine=false)
      } else {
        this.selectedLabelArr.push(label);
        IsMine&&(this.isOnlyMine = this.selectedLabelArr.length===this.labelArr.filter(l=>l.IsMine===1).length)
        !IsMine&&(this.isOnlyMine=false)
      }
      /* if(this.selectedLabelArr.length===this.labelArr.length){
        this.isSelectAll = this.labelArr.length?true:false
      }else{
        this.isSelectAll = false
      } */
    },
    /* selectChange(val){
      if(val){
        this.selectedLabelArr = _.cloneDeep(this.labelArr)
        this.isOnlyMine = false
      }else{
        this.selectedLabelArr = []
      }
    }, */
    switchChange(val){
      if(val){
        this.selectedLabelArr = this.labelArr.filter(l=>l.IsMine===1)
        /* this.isSelectAll=false */
      }else{
        this.selectedLabelArr=[]
      }
    },
    closePop(type='close'){
      if(type==='close'){
        this.selectedLabelArr = _.cloneDeep(this.lastSelectLabelArr)
      }
      this.$emit('close',{type:type,selectedLabelArr:this.selectedLabelArr})
    }
  },
};
</script>

<style scoped lang="scss">
@import "../../css/classifyTag.scss";
.select-label-detail{
  min-width: 648px;
  padding:28px 48px;
  .select-option{
    display: flex;
    /* justify-content: space-between; */
    justify-content: flex-end;
  }
  .classify-cont{
    margin-top:20px;
    max-height: 300px;
    overflow-y: scroll;
    &::-webkit-scrollbar-track{
      display: none;
    }
  }
  .tool-btn{
    text-align: center;
  }
}
</style>
