<template>
  <el-dialog v-model="visible" :title="title" width="500px" append-to-body @close="handleClose">
    <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
      <el-form-item :label="t('document.document.submitForm.file')" prop="actualDocument">
        <fileUpload v-model="form.actualDocument" :limit="1" :file-type="['pdf']" :is-show-tip="false" />
        <div style="color: #909399; font-size: 12px; margin-top: 5px">
          {{ t('document.document.documentForm.fileTip') }}
        </div>
      </el-form-item>
      <el-form-item :label="t('document.document.submitForm.effectiveDate')" prop="effectiveDate">
        <el-date-picker
          v-model="form.effectiveDate"
          type="date"
          value-format="YYYY-MM-DD"
          :placeholder="t('document.document.submitForm.effectiveDatePlaceholder')"
          style="width: 100%"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button :loading="loading" type="primary" @click="handleSubmit">
          {{ t('document.document.button.submit') }}
        </el-button>
        <el-button @click="handleClose">{{ t('document.document.button.cancel') }}</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, computed, nextTick, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { ElMessage } from 'element-plus';
import type { FormInstance } from 'element-plus';
import { submitDocument } from '@/api/document/document';
import { DocumentVO, DocumentSubmitForm } from '@/api/document/document/types';
import fileUpload from '@/components/FileUpload/index.vue';

interface Props {
  modelValue: boolean;
  document: DocumentVO | null;
}

const props = defineProps<Props>();
const emit = defineEmits<{
  'update:modelValue': [value: boolean];
  success: [];
}>();

const { t } = useI18n();
const formRef = ref<FormInstance>();
const loading = ref(false);

const visible = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
});

const title = computed(() => t('document.document.dialog.submitDocument'));

const form = ref({
  actualDocument: '',
  effectiveDate: undefined as string | undefined
});

const rules = reactive({
  actualDocument: [
    {
      required: true,
      message: t('document.document.submitRule.fileRequired'),
      trigger: 'blur'
    }
  ]
});

// 监听 document 变化，初始化表单
watch(
  () => props.document,
  (newDoc) => {
    if (newDoc) {
      form.value = {
        actualDocument: '',
        effectiveDate: undefined
      };
      nextTick(() => {
        formRef.value?.clearValidate();
      });
    }
  },
  { immediate: true }
);

const handleClose = () => {
  visible.value = false;
  form.value = {
    actualDocument: '',
    effectiveDate: undefined
  };
};

const handleSubmit = async () => {
  if (!formRef.value || !props.document) return;

  try {
    await formRef.value.validate();
    loading.value = true;

    const submitData: DocumentSubmitForm = {
      documentId: props.document.id,
      ossId: form.value.actualDocument,
      effectiveDate: form.value.effectiveDate
    };

    await submitDocument(submitData);
    ElMessage.success(t('document.document.message.submitSuccess'));
    handleClose();
    emit('success');
  } catch (error) {
    if (error !== false) {
      console.error(t('document.document.message.submitFailed'), error);
    }
  } finally {
    loading.value = false;
  }
};
</script>
