<!--导入配置  -->
<template>
   <el-form label-position="left" ref="form" label-width="130px" :model="form" :size="defaultFormItemSize" :rules="rules"   v-loading.fullscreen.lock="fullscreenLoading">
    <el-form-item label="上传知识库文件:"  prop="filesArr">
      <el-button @click="clickUp" :size="defaultFormItemSize"  type="primary">上传</el-button>
      <input style="display:none" ref="upFile" type="file"   @change="fileinfo($event.target.files)" multiple accept=".html, .md, .json, .jsonl, .csv, .pdf, .png, .jpg, .jpeg, .bmp, .eml, .msg, .epub, .xlsx, .xls, .ipynb, .odt, .py, .rst, .rtf, .srt, .toml, .tsv, .docx, .doc, .xml, .ppt, .pptx, .txt, .htm">
      <div class="el-upload__tip" ><i class="el-icon-document"  style="color:#909399;margin-right:5px"></i>可上传HTML, MD, JSON, JSONL, CSV, PDF, PNG, JPG, JPEG, BMP, EML, MSG, EPUB, XLSX, XLSD, IPYNB, ODT, PY, RST, RTF, SRT, TOML, TSV, DOCX, DOC, XML, PPT, PPTX, TXT, HTM文件</div>
      <div class="itemFile" v-for="(item,index) in files" :key="item.name">{{ item.name }}
      <i class="el-icon-circle-close" style="color:#0092FF;cursor: pointer;" @click="clearFile(index)"></i>
      </div>
    </el-form-item>
    <el-form-item label="单段文本最大长度:">
      <el-slider :min="0" :max="1000" v-model="form.chunk_size" show-input >
      </el-slider>
    </el-form-item>
    <el-form-item label="相邻文本重合长度:">
      <el-slider :min="0" :max="12" v-model="form.chunk_overlap" show-input>
      </el-slider>
    </el-form-item>
    <el-form-item label="开启中文标题加强:">
      <el-checkbox v-model="form.zh_title_enhance"></el-checkbox>
    </el-form-item>
    <el-form-item label="已有文件:">
      <el-table
      :data="listFiles"
      style="width: 100%">
      <el-table-column
      type="index"
      width="50">
    </el-table-column>
      <el-table-column
        prop="name"
        label="名称"
       >
      </el-table-column>
      <el-table-column  label="操作" width="90px" >
       <template slot-scope="scope">
           <el-button type="text" @click="delFile(scope.row)" :size="defaultFormItemSize">删除</el-button>
           <el-button type="text" @click="down(scope.row)" :size="defaultFormItemSize" >下载</el-button>
      </template>
      </el-table-column>

    </el-table>
    </el-form-item>
    <el-row type="flex" justify="end" class="dialog-btn-layer mt20">
      <template>
        <el-button :size="defaultFormItemSize" :plain="true" @click="back" >上一步</el-button>
        <el-button :size="defaultFormItemSize" :plain="true" @click="$parent.onCancel(false)" >取消</el-button>
        <el-button :size="defaultFormItemSize" :plain="true" @click="onSubmit">确认上传</el-button>
    </template>
    </el-row>
  </el-form>
  <!-- </template> -->
</template>

<script>
import { KnowledgeManage } from '@/api/gptController.js';
export default {
  data () {
    return {
      fullscreenLoading: false,
      form: {
        filesArr: undefined,
        knowledge_base_name: '',
        override: false,
        to_vector_store: true,
        chunk_size: 250,
        chunk_overlap: 0,
        zh_title_enhance: true,
        not_refresh_vs_cache: false
      },
      files: [],
      listFiles: [],
      rules: {
        filesArr: [
          { required: true, message: '请选择文件', trigger: 'blur' }
        ]
      }
    };
  },
  props: ['item'],
  components: {},

  computed: {},

  mounted () {
    this.getFiles()
  },
  watch: {

  },
  methods: {

    fileinfo (files) {
      for (const key in files) {
        if (Object.hasOwnProperty.call(files, key)) {
          const element = files[key];
          if (this.files.map((item) => item.name).indexOf(element.name) === -1) {
            this.files.push(element)
            this.form.filesArr = this.files
          } else {
            console.log('重复上传');
          }
        }
      }
    },
    clickUp () {
      this.$refs.upFile.click()
    },
    onSubmit () {
      return new Promise((resolve, reject) => {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.form.knowledge_base_name = this.$parent.knowledgeCode
            let params = {};
            params = { ...this.form };
            this.fullscreenLoading = true
            this.upload('/2api/knowledge_base/upload_docs', params, false).then(res => {
              resolve(res);
              this.$message.success('上传成功');
              this.fullscreenLoading = false
              this.$parent.onCancel(false)
            }).catch(e => {
              reject(e);
            });
          }
        });
      });
    },
    getFiles () {
      let params = {knowledgeName: this.$parent.knowledgeCode};
      KnowledgeManage.listFiles(this, params).then(res => {
        this.listFiles = res.data.map((item) => {
          return {
            name: item
          }
        })
      }).catch(e => {
        console.log(e);
      });
    },
    delFile (row) {
      let params = {
        'knowledge_base_name': this.$parent.knowledgeCode,
        'file_names': [
          row.name
        ],
        'delete_content': false,
        'not_refresh_vs_cache': false

      };
      this.$confirm('是否确认删除', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        KnowledgeManage.deleteDocs(this, params).then(res => {
          if (res.success) {
            this.getFiles()
          }
        }).catch(e => {
          console.log(e);
        });
      })
    },
    back () {
      this.$parent.active--
    },
    clearFile (index) {
      this.files.splice(index, 1)
    },
    down (row) { // 下载文件
      let params = {knowledge_base_name: this.item.knowledgeCode, file_name: row.name, boolean: false}

      this.download('/2api/knowledge_base/download_doc', params, row.name, 'get', false).then((res) => {

      })
    }
  }
}

</script>
<style scoped>
.introduce{
  font-size: 12px;
  color: #909399;
}
.title {
  font-size: 20px;
  margin-bottom: 16px;
}
.itemFile{

}

.el-upload__tip{

  font-size: 12px !important;
}
</style>
