<template>
  <Dialog
    showFooter
    v-model="visible"
    show-cancel-button
    show-confirm-button
    :diaTitle="mode === 'add' ? $t('知识库.新增') : $t('知识库.编辑')"
    :confirm-closable="false"
    @show="onShowFun"
  >
    <template #default>
      <el-form ref='formRef' :rules="rules" :model="form" labelWidth="80">
        <el-form-item :label="$t('知识库.名称')" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="对象名称" prop="objectName">
          <el-input v-model="form.objectName" />
        </el-form-item>
        <el-form-item label="所属库" prop="belongBase">
          <el-input v-model="form.belongBase" />
        </el-form-item>
        <el-form-item label="所属分类" prop="belongClassification">
          <el-input v-model="form.belongClassification" />
        </el-form-item>
        <el-form-item label="描述信息" prop="descriptionInformation">
          <el-input v-model="form.descriptionInformation" />
        </el-form-item>
        <el-form-item label="参数文件" 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>
    </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, watchEffect } from 'vue';
import Dialog from '@/components/common/dialog/index.vue';
import type { FormInstance, FormRules, UploadProps } from 'element-plus';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();
interface Props {
  modelValue: boolean;
  detail: any,
  mode: 'add' | 'edit'
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  detail: null,
  mode: 'add',
});

const emits = defineEmits(['update:modelValue', 'ok']);
const form = ref<any>({
  name: '',
  objectName: '',
  belongBase: '',
  belongClassification: '',
  descriptionInformation: '',
  fileList: [],
});

const visible = computed({
  get: () => props.modelValue,
  set: (val) => emits('update:modelValue', val),
});
watchEffect(() => {
  if (props.detail && props.mode === 'edit') {
    form.value.name = props.detail.originalName;
  } else {
    form.value.name = '';
  }
});
const onShowFun = () => {
  resetFun();
  if (props.detail && props.mode === 'edit') {
    form.value.name = props.detail.originalName;
  } else {
    form.value.name = '';
  }
};
const resetFun = () => {
  if (!formRef.value) {
    return;
  }
  formRef.value.resetFields();
};
const formRef = ref<FormInstance>();
interface RuleForm {
  name: string,
  objectName: string,
  belongBase: string,
  belongClassification: string,
}
const rules = reactive<FormRules<RuleForm>>({
  name: [
    { required: true, message: t('知识库.请输入名称'), trigger: 'blur' },
  ],
  objectName: [
    { required: true, message: '请输入对象名称', trigger: 'blur' },
  ],
  belongBase: [
    { required: true, message: '请输入所属库', trigger: 'blur' },
  ],
  belongClassification: [
    { required: true, message: '请输入所属分类', trigger: 'blur' },
  ],
});
const onConfirmFun = async () => {
  if (!formRef.value) {
    return;
  }
  await formRef.value.validate((valid) => {
    if (valid) {
      emits('ok', form.value);
    }
  });
};
const onUploadChangeFun: UploadProps['onChange'] = (uploadFile:any, uploadFiles:any[]) => {
  form.value.fileList = uploadFiles;
  form.value.file = uploadFile.raw || uploadFile; // 用于上传
};

onMounted(async () => {

});
</script>
