<!-- 结构化格式 导入配置  -->
<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="导入格式:">
      <el-radio-group v-model="form.importFormat">
        <el-radio-button v-for="item in KnowledgeImportFormat.getList()" :key="item.id" :label="item.id">{{ item.name }}</el-radio-button>
      </el-radio-group>
    </el-form-item>
    <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="'.'+KnowledgeImportFormat.getValue(form.importFormat)">
      <div class="el-upload__tip"> </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="分段方式:">
      <el-radio-group v-model="form.segmentedMode">
        <el-radio-button v-for="item in SegmentedMode.getList()" :key="item.id" :label="item.id" :disabled="isDisabled(item)">{{ item.name }}</el-radio-button>
      </el-radio-group>
    </el-form-item>
    <distribution v-if="form.segmentedMode===0" v-model="distributionForm" />
    <customSegmentation v-if="form.segmentedMode===1" v-model="customSegmentationForm" />
    <levelSegmentation v-if="form.segmentedMode===2" v-model="levelSegmentationForm" />
    <!-- <manualSegmentation v-if="form.segmentedMode===3" v-model="form" /> -->
    <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="250" 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="已有文件:">
      <knowledgeFileList :knowledgeName="knowledgeName" :params="getParams" />
    </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 distribution from './distribution'
import customSegmentation from './customSegmentation'
import levelSegmentation from './levelSegmentation'
import knowledgeFileList from '../knowledgeFileList'

// import manualSegmentation from './manualSegmentation/index.vue'
export default {
  data() {
    return {
      fullscreenLoading: false,
      distributionForm: {
        splitType: 0,
        separators: []
      },
      customSegmentationForm: {
        splitType: 1,
        separators: []
      },
      levelSegmentationForm: {
        splitType: 2,
        titleDepth: 1,
        separators: []
      },
      form: {
        importFormat: 0,
        segmentedMode: 0,
        chunk_size: 250,
        chunk_overlap: 0,
        zh_title_enhance: true,
        filesArr: undefined,
        knowledge_base_name: '',
        override: false,
        to_vector_store: true,
        not_refresh_vs_cache: false
      },
      files: [],
      listFiles: [],
      rules: {
        filesArr: [{ required: true, message: '请选择文件', trigger: 'blur' }]
      }
    }
  },
  props: ['item', 'knowledgeName', 'isEdit'],
  components: { distribution, customSegmentation, levelSegmentation, knowledgeFileList },

  computed: {
    getParams() {
      return {
        ...this.form,
        ...this[this.form.segmentedMode === 0 ? 'distributionForm' : this.form.segmentedMode === 1 ? 'customSegmentationForm' : this.form.segmentedMode === 2 ? 'levelSegmentationForm' : '']
      }
    }
  },

  mounted() {},
  watch: {},
  methods: {
    isDisabled(item) {
      let disabledBoolean = item.id === 2 ? this.form.importFormat !== 2 && this.form.importFormat !== 3 : false
      if (disabledBoolean && this.form.segmentedMode === 2) {
        this.form.segmentedMode = 0
      }
      return disabledBoolean
    },
    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.getParams
            params.separators = JSON.stringify(params.separators)
            console.log(params.separators)
            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>
