<template>
  <Dialog
    v-model="visible"
    show-footer
    show-cancel-button
    show-confirm-button
    :diaTitle="$t('知识库.上传')"
    @show="onShowFun"
    :confirm-closable="false"
  >
    <template #default>
      <el-form :model="form" :rules="rules" ref='formRef' labelWidth="auto">
        <el-form-item :label="$t('知识库.名称')" prop="fileList">
          <el-upload
            v-model:file-list="form.fileList"
            class="upload"
            ref="uploadRef"
            :limit="1"
            :auto-upload="false"
            :on-change="onUploadChangeFun"
          >
            <el-button type="primary">{{ $t('知识库.上传') }}</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item :label="$t('知识库.大小')" prop="fileSize" v-show="false">
          <el-input v-model="form.fileSize" />
        </el-form-item>
        <el-form-item :label="$t('知识库.所属库')" prop="dirName">
          <el-input v-model="form.dirName" disabled />
        </el-form-item>
        <el-form-item :label="$t('知识库.所属项目')" prop="projectId">
          <node-level-select
            v-model="form.projectId"
            :nodeType="NODE_TYPE.PROJECT"
          />
        </el-form-item>
        <el-form-item
          :label="
            $t('知识库.分析方向')"
          prop="analysisDirectionId"
        >
          <node-level-select
            v-model="form.analysisDirectionId"
            :pid="form.projectId"
            :nodeType="NODE_TYPE.DISCIPLINE"
          />
        </el-form-item>
        <el-form-item :label="$t('知识库.备注')" prop="remarks">
          <el-input v-model="form.remarks" />
        </el-form-item>
        <el-form-item :label="$t('工况库.评审人')" prop="userId">
          <el-select multiple v-model="form.userId" :options="userList"/>
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <div>
        <el-button type="primary" @click="onConfirmFun">确定</el-button>
      </div>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { ref, onMounted, computed, reactive, nextTick } from 'vue';
import Dialog from '@/components/common/dialog/index.vue';
import type { FormInstance, FormRules, UploadProps } from 'element-plus';
import { useI18n } from 'vue-i18n';
import nodeLevelSelect from '@/components/project/nodeLevelSelect.vue';
import { NODE_TYPE } from '@/utils/enum/node';

const { t } = useI18n();

interface Props {
  modelValue: boolean;
  detail: any,
  folder:any,
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  detail: null,
  folder: null,
});
const emits = defineEmits(['update:modelValue', 'ok']);
const visible = computed({
  get: () => props.modelValue,
  set: (val) => emits('update:modelValue', val),
});
const userList = [
  { label: '张三', value: 'zhangsan' },
  { label: '李四', value: 'lisi' },
  { label: '王五', value: 'wangwu' },
];

interface RuleForm {
  file: File | null
  fileList: any[] | null
  fileName: string | null
  fileSize?: string | null
  dirName: string | null
  projectId: string | null
  analysisDirectionId: string | null
  remarks: string | null
  userId: string | null
  userList: Array<any> | null
}
const formRef = ref<FormInstance>();
const uploadRef = ref();
const form = ref<RuleForm>({
  file: null,
  fileList: [],
  fileName: null,
  fileSize: null,
  dirName: null,
  projectId: null,
  analysisDirectionId: null,
  remarks: null,
  userId: null,
  userList: null,
});

const rules = reactive<FormRules<any>>({
  fileList: [
    { required: true, message: t('知识库.请选择文件'), trigger: 'change' },
  ],
});
const onUploadChangeFun: UploadProps['onChange'] = (uploadFile:any, uploadFiles:any[]) => {
  form.value.fileList = uploadFiles;
  form.value.file = uploadFile.raw || uploadFile; // 用于上传
};
const onShowFun = () => {
  resetFun();
  nextTick(() => {
    if (props.detail) {
      Object.assign(form.value, props.detail);
      if (props.detail.originalName) {
        form.value.fileList = [{
          name: props.detail.originalName,
          status: 'success',
        }];
      }
    }
    form.value.dirName = props.folder.originalName;
  });

};
const resetFun = () => {
  if (!formRef.value) {
    return;
  }
  formRef.value.resetFields();
  uploadRef.value?.clearFiles();
};
const onConfirmFun = async () => {
  if (!formRef.value) return;
  await formRef.value.validate((valid) => {
    if (valid) {
      if (form.value.fileList && form.value.fileList.length > 0) {
        form.value.file = form.value.fileList[0];
      }
      emits('ok', form.value);
    }
  });
};
onMounted(async () => {

});
</script>
<style lang="scss" scoped>
.upload {
  width: 100%;
}

</style>
