<template>
  <div class="select-label-dialog">
    <el-dialog 
      :visible.sync="isSelectFileShow"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      @close="closeDialog"
      v-dialogDrag
      width="40%" center
    >
      <div slot="title" style="display: flex; alignitems: center">
        <span style="fontsize: 16px">选择文档</span>
      </div>
      <div class="dialog-container">
        <div class="select">
          <el-select
            style="width:100%;"
            filterable remote
            placeholder="请输入文档名称"
            v-model="searchTitle"
            :remote-method="searchHandle"
            clearable
          >
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
            <el-option
              v-for="item in searchOptions"
              :key="item.SaDocId"
              :label="item.Title"
              :value="item"
            >
          </el-option>
        </el-select>
        </div>
        <div class="file-catalog">
          <el-tree
            ref="fileCatalog"
            :data="fileList"
            show-checkbox
            check-on-click-node
            node-key="nodeKeyId"
            class="catalog-tree"
            :default-checked-keys="defaultCheckedKeys"
            :default-expanded-keys="expandKeys"
             @node-expand="handleNodeExpand"
          >
          </el-tree>
        </div>
      </div>
      <div class="foot-container">
          <el-button type="primary" @click="getCheckedNode">确定</el-button>
          <el-button @click="closeDialog">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {formatArr} from '../../utils/index';

import {documentInterface} from '@/api/modules/semanticsApi.js';
export default {
  props:{
    isSelectFileShow:{
      type:Boolean,
      default:false
    },
    selectedFileArr:{//已经选择的文档ids
      type:Array,
      default:()=>{
        return []
      }
    }
  },
  watch:{
    isSelectFileShow(val){
      if(val){
        this.getFileList()
      }
    },
    searchTitle(newVal){
      const {SaDocId,ClassifyId} = newVal
      if(SaDocId&&ClassifyId){
        this.handleNodeExpand({nodeKeyId:ClassifyId+''})
        this.$refs.fileCatalog.setChecked('children_'+SaDocId,true)
        this.searchOptions = []
      }
    }
  },
  data() {
    return {
      fileList:[],//文档列表
      searchTitle:'',
      searchOptions:[],
      defaultCheckedKeys:[],//已选中的文档keys
      expandKeys:[],
    };
  },
  methods: {
    async getFileList(){
      this.searchTitle=''
      this.searchOptions=[]
      //this.expandKeys=[]
      //请求文档分类列表
      const res = await documentInterface.getClassifyList()
      if(res.Ret!==200) return
      this.fileList = formatArr(res.Data||[])
      this.defaultCheckedKeys = this.selectedFileArr.map(id=>{
        return `children_`+id
      })
      //已选择的文档不允许取消选择
      this.fileList.forEach(item=>{
        if(item.children.length){
          let selectedFileNum = 0
          item.children = item.children.map(file=>{
            file.disabled = this.defaultCheckedKeys.includes(file.nodeKeyId)
            file.disabled&&selectedFileNum++
            return file
          })
          if(selectedFileNum===item.children.length){
            item.disabled = true
          }
        }
      })
    },
    getCheckedNode(){
      const keys = this.$refs.fileCatalog.getCheckedKeys()
      //过滤掉没有childen的，并拿到childen的SaDocId
      const selectKeys = keys.filter((item)=>{
          return item.includes('children')
        }).map(key=>{
          return Number(key.split('_')[1])
        })
      //对比selectKeys与selectedFileArr 只请求selectedFileArr中没有的
      this.selectedFileArr.forEach(key=>{
        const index = selectKeys.indexOf(key)
        if(index!=-1){
          selectKeys.splice(index,1)
        }
      })
      //获取选择对比文档ids 结果抛出
      if(selectKeys.length){
        this.$emit('selectFile',selectKeys)
      }else{
        this.closeDialog()
      }
    },
    closeDialog(){
      this.$emit('close')
    },
    searchHandle(keyword){
      documentInterface.getDocumentList({
        PageSize:100,
        CurrentIndex:1,
        Keyword:keyword
      }).then(res=>{
        if(res.Ret!==200) return 
        this.searchOptions = res.Data.List||[]
      })
    },
    handleNodeExpand(data){
      !this.expandKeys.includes(data.nodeKeyId)&&this.expandKeys.push(data.nodeKeyId)
    }
  },
};
</script>


<style lang="scss">
@import "../../css/catalogTree.scss";
</style>
<style scoped lang="scss">
.select-label-dialog{
  .dialog-container{
    padding:15px 35px;
    .file-catalog{
      margin-top:30px;
      height: 300px;
      overflow-y: scroll;
    }
  }
  .foot-container{
    margin-top:15px;
    text-align: center;
    padding-bottom: 40px;
  }
}
</style>
