<template>
  <div>
    <el-dialog title="导入" :visible.sync="isOpen" width="700px" append-to-body :modal="false" @close="cancel"
               :close-on-click-modal="false"
    >
      <el-form ref="form" :model="form" :rules="importRules" label-width="100px">
        <el-form-item label="数据来源" prop="dataSource">
          <el-radio-group v-model="form.dataSource" @change="handleDataSourceChange">
            <el-radio :label="0" border>系统选择</el-radio>
            <el-radio :label="1" border>本地上传</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="导入路径" prop="inputPath">
          <el-input placeholder="请选择导入路径" readonly :disabled="true" v-model="form.inputPath"
                    class="input-with-select"
          >
            <el-button slot="append" icon="el-icon-folder-opened" @click="selectFolder(0)"></el-button>
          </el-input>
        </el-form-item>
        <div v-show="form.dataSource ===1">
          <el-form-item label="上传文件">
            <uploadFiles @file-uploaded="uploadFileId" :disabled="form.inputId===0" :key="new Date().getTime()"
                         :parent-id="form.inputId.toString()" :fileUrl="form.inputPath || ''"
            />
          </el-form-item>
          <!--          <el-form-item label="数据标注状态" prop="isAnnotated">
                      <el-radio-group v-model="form.isAnnotated">
                        <el-radio :label="0" border>未标注</el-radio>
                        <el-radio :label="1" border>已标注</el-radio>
                      </el-radio-group>
                    </el-form-item>
                    <el-form-item v-show="form.isAnnotated === 1">
                      <div style="display: flex;flex-direction: column;">
                        <span>文件存放方式满足YOLO格式</span>
                        <img style="width: 50%" :src="ObjectDetection_YOLO" alt="Weibo">
                      </div>
                    </el-form-item>-->
        </div>
      </el-form>
      <template #footer>
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </template>
    </el-dialog>
    <selectFolderDialog :open="folderOpen" :folder-type="folderType" @dialog-cancel="handleCancel"
                        @update-data="updateData"
    />
  </div>

</template>

<script>
import ObjectDetection_YOLO from '@/assets/images/ObjectDetection_YOLO.png'
import selectFolderDialog from './selectFolderDialog.vue'
import uploadFiles from '../../library/child/uploadFiles.vue'
import { importData } from '@/api/dataCenter/dataSet'

export default {
  components: { uploadFiles, selectFolderDialog },
  props: {
    open: {
      type: Boolean,
      default: false
    },
    dataType: {
      type: String,
      default: '',
      required: true
    },
    getList: {
      type: Function,
      required: true
    },
    datasetId: {
      type: String,
      default: 0,
      required: true
    }
  },
  computed: {
    isOpen: {
      get() {
        return this.open
      },
      set(value) {
        this.$emit('update:open', value)
      }
    }
  },
  watch: {
    isOpen(newVal, oldVal) {
      if (newVal) {
        this.fileIds = []
      }
    }
  },
  data() {
    return {
      type: this.dataType, // 创建一个本地副本
      ObjectDetection_YOLO: ObjectDetection_YOLO,
      folderOpen: false,
      folderType: 0,
      fileIds: [],
      form: {
        dataSource: 0,
        inputId: 0,
        inputPath: ''
      }, // 初始化为空
      importRules: {
        dataSource: [
          { required: true, message: '数据来源不能为空', trigger: 'blur' }
        ],
        inputPath: [
          { required: true, message: '导入路径不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleDataSourceChange() {
      this.fileIds = []
    },
    uploadFileId(res) {
      this.fileIds.push(res.fileId)
    },
    // 数据提交
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.form.datasetId = this.datasetId
          this.form.dataType = this.dataType
          this.form.fileIds = this.fileIds
          importData(this.form).then(response => {
            this.$modal.msgSuccess('导入成功')
            this.cancel()
          })
        }
      })
      // 提交逻辑
    },
    // 取消按钮
    cancel() {
      this.getList()
      this.isOpen = false
      this.reset()
      this.$emit('dialog-cancel') // 通知父组件
    },
    // 表单重置
    reset() {
      this.form = {
        dataSource: 0,
        inputId: 0,
        outputId: 0
      } // 清空表单
      this.$refs.form.resetFields() // 调用 Element UI 的重置方法
    },
    //选择文件夹
    selectFolder(folderType) {
      this.folderType = folderType
      this.folderOpen = true
    },
    handleCancel() {
      this.folderOpen = false
    },
    updateData(data) {

      if (data.folderType === 0) {
        this.form.inputPath = data.folder || '' // 确保 inputPath 是非空字符串
        this.form.inputId = data.fileId || 0
      }
    }
  }
}
</script>

<style scoped lang="scss">
/* 样式按需定义 */
.el-dialog__wrapper {
  z-index: 2000 !important; /* Set a lower z-index for dialog */
}

input[aria-hidden=true] {
  display: none !important;
}
</style>
