<template>
  <el-dialog v-model="dialogVisible" :title="t('document.document.archiveDialog.title')" width="500px" append-to-body>
    <div class="archive-confirm-content">
      <el-alert :title="t('document.document.archiveDialog.confirmMessage')" type="warning" show-icon
        :closable="false" />
      <div class="document-info" v-if="document">
        <el-descriptions :column="1" size="small" border>
          <el-descriptions-item :label="t('document.document.documentList.name')">
            {{ document.name }}
          </el-descriptions-item>
          <el-descriptions-item :label="t('document.document.documentList.specification')"
            v-if="document.specification">
            {{ document.specification }}
          </el-descriptions-item>
          <el-descriptions-item :label="t('document.document.documentList.fileName')" v-if="document.fileName">
            {{ document.fileName }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCancel">{{ t('document.document.button.cancel') }}</el-button>
        <el-button type="primary" @click="handleConfirm" :loading="loading">
          {{ t('document.document.button.confirm') }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { DocumentVO } from '@/api/document/document/types';

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

interface Emits {
  (e: 'update:modelValue', value: boolean): void;
  (e: 'confirm', document: DocumentVO): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

const { t } = useI18n();

const dialogVisible = ref(false);
const loading = ref(false);

// 监听modelValue变化
watch(
  () => props.modelValue,
  (val) => {
    dialogVisible.value = val;
  }
);

// 监听dialogVisible变化
watch(dialogVisible, (val) => {
  emit('update:modelValue', val);
});

// 取消操作
const handleCancel = () => {
  dialogVisible.value = false;
};

// 确认操作
const handleConfirm = () => {
  if (props.document) {
    loading.value = true;
    emit('confirm', props.document);
    // 注意：这里不需要手动关闭弹窗，应该在父组件处理完归档逻辑后再关闭
  }
};
</script>

<style scoped lang="scss">
.archive-confirm-content {
  .el-alert {
    margin-bottom: 20px;
  }

  .document-info {
    margin-top: 15px;
  }
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style>