<!-- 文本文档格式 导入配置  -->
<template>

  <el-form style="width:70%" label-position="left" ref="form" label-width="130px" :model="form" :size="defaultFormItemSize" :rules="rules" v-loading.fullscreen.lock="fullscreenLoading">
    <el-row class="title">导入配置</el-row>
    <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=".xlsx,.jsonl">
      <div class="el-upload__tip"> 创建知识库过程仅支持.xlsx,.jsonl格式文件，单个⽂件不超过60M，只支持UTF-8格式 </div>
      <div class="itemFile" v-for="(item,index) in files" :key="item.name"><i class="el-icon-document" style="color:#909399;margin-right:5px"></i>{{ 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="已有文件:">
      <knowledgeFileList :knowledgeName="knowledgeName" />
    </el-form-item>
    <el-row type="flex" justify="end" class="dialog-btn-layer mt20">
      <template>
        <el-button :size="defaultFormItemSize" :plain="true" @click="onCancel(false)">取消</el-button>
        <el-button :size="defaultFormItemSize" :plain="true" @click="onSubmit">确认上传</el-button>
      </template>
    </el-row>
  </el-form>
  <!-- </template> -->
</template>

<script>
import knowledgeFileList from '../knowledgeFileList'

// import manualSegmentation from './manualSegmentation/index.vue'
export default {
  data() {
    return {
      fullscreenLoading: false,

      form: {
        segmentedMode: 4, // 结构化数据分段
        filesArr: undefined,
        knowledge_base_name: '',
        override: false,
        to_vector_store: true,
        not_refresh_vs_cache: false,
        separators: undefined
      },
      files: [],
      listFiles: [],
      rules: {
        filesArr: [{ required: true, message: '请选择文件', trigger: 'blur' }]
      }
    }
  },
  props: ['item', 'knowledgeName', 'isEdit'],
  components: { knowledgeFileList },

  computed: {},

  mounted() {},
  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('重复上传')
          }
        }
      }
      this.$refs.upFile.value = ''
    },
    clickUp() {
      this.$refs.upFile.click()
    },
    onCancel(isSuccess) {
      if (this.isEdit) {
        if (this.observer != null) {
          this.observer.cancel(isSuccess)
        }
      } else {
        this.$parent.onCancel(isSuccess)
      }
    },
    onSubmit() {
      console.log(this.form)
      return new Promise((resolve, reject) => {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.form.knowledge_base_name = this.knowledgeName
            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.onCancel(false)
              })
              .catch((e) => {
                this.fullscreenLoading = false
                this.getFiles()
                reject(e)
              })
          }
        })
      })
    },

    back() {
      this.$parent.active--
    },

    clearFile(index) {
      this.files.splice(index, 1)
    }
  }
}
</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>
