<template>
  <div class="add-block-label-dialog">
    <el-dialog
      :visible.sync="isAddSectionLabelShow"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      @close="closeDialog"
      v-dialogDrag
      width="42%"
      center
    >
      <div slot="title" style="display: flex; alignitems: center">
        <span style="fontsize: 16px">打标签</span>
      </div>
      <div class="dialog-container">
          <div class="search-box">
              <el-input placeholder="请输入标签名称" 
                style="width:200px;"
                prefix-icon="el-icon-search"
                v-model="searchText"
                @input="getLabelList"
                clearable/>
                <el-button type="text" @click="getLabelList">搜索</el-button>
          </div>
        <div class="classify-cont">
          <el-tag
            v-for="item in labelArr"
            :class="[
              'classify-tag',
              { act: selectedLabelIdArr.includes(item.SaLabelId) },
            ]"
            :key="item.SaLabelId"
            type="info"
            effect="plain"
            @click="chooseLabel(item)"
          >
            {{ item.LabelName }}
          </el-tag>
        </div>
        <span class="add-cont" @click="handleAddLabel">
          <img src="~@/assets/img/document_m/add-label.png" />
          新增标签
        </span>
        <span class="add-cont" @click="toTagPage">
          <img src="~@/assets/img/document_m/to-label-page.png" style="width:14px;"/>
          标签管理
        </span>
      </div>
      <div class="foot-container">
        <el-button type="primary" @click="handleAddSection">确定</el-button>
        <el-button @click="closeDialog">取 消</el-button>
      </div>
    </el-dialog>
        <!-- 新建标签弹窗 -->
    <el-dialog
      title="新增标签"
      :visible.sync="isAddLabelShow"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      @close="isAddLabelShow=false"
      width="589px"
      v-dialogDrag
      center
    >
      <div class="dialog-container">
        <div class="input-item">
          标签名称：<el-input  placeholder="请输入标签名称" v-model.trim="labelName" required ></el-input>
        </div>
        <p class="form-hint">注：名称不得超过15字</p>
      </div>
      <div class="foot-container">
        <el-button @click="isAddLabelShow=false">取 消</el-button>
        <el-button type="primary" @click="addTag">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
/* api */
import { tagInterface } from "@/api/modules/semanticsApi";
export default {
  props: {
    isAddSectionLabelShow: {
      type: Boolean,
      default: false,
    },
    sectionInfo: {
      //段落信息 or 词，句信息
      type: Object,
      default: () => {
        return {
          DocId: 3, //段落所属文档
          SectionId: 11, //段落id
          Content: "", //如果是整段打，这个可以为空
          Sort: 4,
          isThisLabelArr:[], //该段落当前打的标签
        };
      },
    },
  },
  watch: {
    isAddSectionLabelShow(val) {
      if (val) {
        this.getLabelList();
        this.selectedLabelArr = _.cloneDeep(this.sectionInfo.isThisLabelArr)
        this.selectedLabelIdArr = this.selectedLabelArr.map(item=>{
          return item.LabelId
        })
      }
    },
  },
  data() {
    return {
      labelArr: [], //标签列表
      selectedLabelIdArr: [], //当前段落已被打的标签id
      selectedLabelArr:[],//当前段落已被打的标签
      isAddLabelShow:false,//新增标签弹窗
      labelName:'',//输入的标签名
      searchText:'',//搜索标签名
    };
  },
  methods: {
    getLabelList() {
      this.labelLoading = true;
      tagInterface
        .getTagList({
          PageSize: 1000,
          CurrentIndex: 1,
          Keyword: this.searchText,
        })
        .then((res) => {
          if (res.Ret !== 200) return;
          const { List, Paging } = res.Data;
          this.labelArr = List || [];
          this.labelLoading = false;
        });
    },
    chooseLabel(item) {
      //是否是已选择的id
      if (this.selectedLabelIdArr.includes(item.SaLabelId)) {
        const index = this.selectedLabelIdArr.indexOf(item.SaLabelId);
        this.selectedLabelIdArr.splice(index, 1);
        this.selectedLabelArr.splice(index,1)
      } else {
        this.selectedLabelIdArr.push(item.SaLabelId);
        this.selectedLabelArr.push(item)
      }
    },
    //打开新增标签弹窗
    handleAddLabel() {
      this.labelName = ''
      this.isAddLabelShow = true
    },
    handleAddSection() {
      //console.log("addSection", this.selectedLabelIdArr);
      this.$emit("addSection", this.selectedLabelArr);
    },
    toTagPage(){
      //this.$router.push('/tagPage')
      window.open('/tagPage')
    },
    addTag(){
      //添加成功后，调getLabelList
      if(!this.labelName){
        this.$message.warning('请输入标签名称')
        return
      }
      if(this.labelName.length>15){
        this.$message.warning('标签名称过长,请重新编辑')
        return
      }
      tagInterface.addNewTag({
        LabelName:this.labelName
      }).then(res=>{
        if(res.Ret!==200) return 
        this.$message.success('添加成功')
        this.isAddLabelShow = false
        this.getLabelList()
      })
    },
    closeDialog() {
      this.fileList = [];
      this.$emit("close");
    },
  },
};
</script>


<style scoped lang="scss">
@import "../../css/classifyTag.scss";
.add-block-label-dialog {
  .dialog-container {
    padding: 15px 35px;
    .add-cont {
      margin-right:15px;
      color: #409eff;
      cursor: pointer;
      img{
          width: 12px;
          height:12px;
      }
    }
    .input-item{
      margin-bottom:10px;
    }
    .form-hint{
      color:#999999;
      font-size: 12px;
    }
    .search-box{
        margin-bottom: 20px;
        .el-input{
            margin-right: 10px;
        }
    }
    .classify-cont{
      max-height: 300px;
      overflow-y: scroll;
      &::-webkit-scrollbar-track{
        display: none;
      }
    }
  }
  .foot-container {
    margin-top: 15px;
    text-align: center;
    padding-bottom: 40px;
  }
}
</style>
