<template>
  <el-dialog v-model="visible" :title="title" width="600px" append-to-body @close="handleClose">
    <el-form ref="formRef" :model="form" :rules="rules" label-width="200px">
      <el-form-item :label="t('document.document.markForm.specification')" prop="type">
        <el-select
          v-model="form.type"
          :placeholder="t('document.document.markForm.specificationPlaceholder')"
          clearable
          style="width: 100%"
        >
          <el-option
            v-for="dict in specificationDict"
            :key="dict.value"
            :label="parseI18nName(dict.label)"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="t('document.document.specifyForm.language')" prop="language">
        <el-input
          v-model="form.language"
          :placeholder="t('document.document.specifyForm.languagePlaceholder')"
          clearable
        />
      </el-form-item>
      <el-form-item :label="t('document.document.specifyForm.version')" prop="version">
        <el-input
          v-model="form.version"
          :placeholder="t('document.document.specifyForm.versionPlaceholder')"
          clearable
        />
      </el-form-item>
      <el-form-item :label="t('document.document.specifyForm.versionDate')" prop="versionDate">
        <el-date-picker
          v-model="form.versionDate"
          type="date"
          :placeholder="t('document.document.specifyForm.versionDatePlaceholder')"
          style="width: 100%"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item :label="t('document.document.specifyForm.ethicsSubmissionDate')" prop="ethicsSubmissionDate">
        <el-date-picker
          v-model="form.ethicsSubmissionDate"
          type="date"
          :placeholder="t('document.document.specifyForm.ethicsSubmissionDatePlaceholder')"
          style="width: 100%"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item :label="t('document.document.specifyForm.ethicsApprovalDate')" prop="ethicsApprovalDate">
        <el-date-picker
          v-model="form.ethicsApprovalDate"
          type="date"
          :placeholder="t('document.document.specifyForm.ethicsApprovalDatePlaceholder')"
          style="width: 100%"
          value-format="YYYY-MM-DD"
        />
      </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 { markDocument } from '@/api/document/document';
import { DocumentVO, DocumentMarkForm } from '@/api/document/document/types';
import { parseI18nName } from '@/utils/i18n';

interface Props {
  modelValue: boolean;
  document: DocumentVO | null;
  specificationDict: any[];
}

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.markDocument'));

const form = ref<DocumentMarkForm>({
  id: 0,
  type: '',
  language: '',
  version: '',
  versionDate: '',
  ethicsSubmissionDate: '',
  ethicsApprovalDate: ''
});

const rules = reactive({
  type: [{ required: true, message: t('document.document.markRule.typeRequired'), trigger: 'change' }]
});

// 监听 document 变化，初始化表单
watch(
  () => props.document,
  (newDoc) => {
    if (newDoc) {
      form.value = {
        id: newDoc.id,
        type: '',
        language: '',
        version: '',
        versionDate: '',
        ethicsSubmissionDate: '',
        ethicsApprovalDate: ''
      };
      nextTick(() => {
        formRef.value?.clearValidate();
      });
    }
  },
  { immediate: true }
);

const handleClose = () => {
  visible.value = false;
  form.value = {
    id: 0,
    type: '',
    language: '',
    version: '',
    versionDate: '',
    ethicsSubmissionDate: '',
    ethicsApprovalDate: ''
  };
};

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

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

    await markDocument(form.value);
    ElMessage.success(t('document.document.message.markSuccess'));
    handleClose();
    emit('success');
  } catch (error) {
    if (error !== false) {
      console.error(t('document.document.message.markFailed'), error);
    }
  } finally {
    loading.value = false;
  }
};
</script>
