<template>
  <div v-if="isOpen" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
    <div class="bg-white rounded-lg p-6 max-w-md w-full mx-4 relative">
      <!-- Close button -->
      <button
          @click="close"
          class="absolute right-4 top-4 text-gray-500 hover:text-gray-700"
      >
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M18 6L6 18M6 6l12 12" />
        </svg>
      </button>

      <!-- Warning icon and title -->
      <div class="flex items-center gap-3 mb-4">
        <div class="w-8 h-8 rounded-full bg-amber-100 flex items-center justify-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-amber-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M12 9v4m0 4h.01M12 3c-1.857 0-3.637.74-4.95 2.05a7 7 0 1 0 9.9 0C15.638 3.74 13.857 3 12 3Z" />
          </svg>
        </div>
        <h3 class="text-lg font-medium">信息未保存</h3>
      </div>

      <!-- Message -->
      <p class="text-gray-600 mb-6">
        您的表单内容还未保存，直接离开当前页面可能会丢失已填入的信息哦。
      </p>

      <!-- Buttons -->
      <div class="flex gap-4 justify-end">
        <button
            @click="close"
            class="px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-50 text-gray-700"
        >
          确认离开
        </button>
        <button
            @click="continueEditing"
            class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600"
        >
          继续填写
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const isOpen = ref(true)

const close = () => {
  isOpen.value = false
}

const continueEditing = () => {
  isOpen.value = false
  // Add any additional logic for continuing the edit
}
</script>

<style scoped>
/* Optional: Add animation */
.fixed {
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
</style>