<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="rules" label-width="100px">
        <el-form-item label="名称" prop="datasetName">
          <el-input v-model="form.datasetName" maxlength="20" placeholder="请输入名称" />
        </el-form-item>
        <el-form-item label="描述" prop="datasetDesc">
          <el-input
            type="textarea"
            placeholder="请输入描述"
            v-model="form.datasetDesc"
            maxlength="200"
            show-word-limit
          >
          </el-input>
        </el-form-item>
        <el-form-item label="数据类型" prop="dataType">
          <el-radio-group v-model="form.dataType">
            <el-radio :label="0" border>图片</el-radio>
            <el-radio :label="1" border>视频</el-radio>
            <el-radio :label="2" border>音频</el-radio>
<!--            <el-radio :label="3" border>自由格式</el-radio>-->
          </el-radio-group>
          <div>
            <span style="color: #8a8e99;font-size: 14px" v-show="form.dataType ===0">支持格式: .jpg、.png、.jpeg、.bmp</span>
            <span style="color: #8a8e99;font-size: 14px" v-show="form.dataType ===2"> 支持格式: .wav</span>
            <span style="color: #8a8e99;font-size: 14px" v-show="form.dataType ===1">支持格式: .mp4</span>
          </div>
        </el-form-item>
        <el-form-item label="数据来源" prop="dataSource" >
          <el-radio-group v-model="form.dataSource">
            <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="上传文件" prop="dataSource">
            <uploadFiles :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-item label="输出路径" prop="outputPath">
          <el-input placeholder="请选择数据集输出路径" readonly :disabled="true" v-model="form.outputPath" class="input-with-select">
            <el-button slot="append" icon="el-icon-folder-opened" @click="selectFolder(1)"></el-button>
          </el-input>
        </el-form-item>-->
      </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 { add } from '@/api/dataCenter/dataSet'

export default {
  components: { uploadFiles, selectFolderDialog},
  props: {
    open: {
      type: Boolean,
      default: false,
    },
    getList: {
      type: Function,
      required: true,
    },
  },
  computed: {
    isOpen: {
      get() {
        return this.open;
      },
      set(value) {
        this.$emit('update:open', value);
      },
    },
  },
  data() {
    return {
      ObjectDetection_YOLO:ObjectDetection_YOLO,
      folderOpen: false,
      folderType:0,
      form: {
        dataType:0,
        dataSource:0,
        inputId:0,
        outputId:0,
        inputPath:'',
        outputPath:'',
      }, // 初始化为空
      rules:{
        datasetName:[
          { required: true, message: '名称不能为空', trigger: 'blur' },
        ],
        datasetDesc:[
          { required: true, message: '描述不能为空', trigger: 'blur' },
        ],
        dataType:[
          { required: true, message: '数据类型不能为空', trigger: 'blur' },
        ],
        dataSource:[
          { required: true, message: '数据来源不能为空', trigger: 'blur' },
        ],
        inputPath:[
          { required: true, message: '导入路径不能为空', trigger: 'blur' },
        ],
        /* outputPath:[
          { required: true, message: '输出路径不能为空', trigger: 'blur' },
        ], */
      }
    };
  },
  methods: {
    uploadFileId(res){
      console.log("addDataSetDialog.vue",res)
    },
    // 数据提交
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          add(this.form).then(response => {
            this.$modal.msgSuccess("新增成功");
            this.cancel();
            this.getList();
          })
        }
      })
      // 提交逻辑
    },
    // 取消按钮
    cancel() {
      this.isOpen = false;
      this.reset();
      this.$emit('dialog-cancel'); // 通知父组件
    },
    // 表单重置
    reset() {
      this.form = {
        dataType:0,
        dataSource:0,
        inputId:0,
        outputId:0,
        inputPath:'',
        outputPath:'',
      }; // 清空表单
      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;
        this.form.inputId = data.fileId
      }else {
        this.form.outputPath = data.folder;
        this.form.outputId = data.fileId
      }
    }
  },
};
</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>
