 <!-- src/components/Modal.vue -->
<template>
    <div v-if="visible" class="modal-overlay" @click="closeModal">
      <div class="modal-content" @click.stop>
        <h2>{{ title }}</h2>
        <div v-if="step === 1">
          <button @click="selectType('blog')">查询博客</button>
          <button @click="selectType('comment')">查询评论</button>
        </div>
        <div v-else-if="step === 2">
          <div v-if="selectedType === 'blog'">
            <button @click="selectCriteria('author')">根据作者名称查询</button>
            <button @click="selectCriteria('title')">根据文章名称查询</button>
          </div>
          <div v-else-if="selectedType === 'comment'">
            <button @click="selectCriteria('user')">根据用户名称查询</button>
            <button @click="selectCriteria('content')">根据评论内容查询</button>
          </div>
        </div>
        <div v-else-if="step === 3">
          <input v-model="searchQuery" type="text" placeholder="请输入查询内容" />
          <button @click="performSearch">确认</button>
          <button @click="closeModal">取消</button>
        </div>
      </div>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref } from 'vue';
  
  const props = defineProps<{
    title: string;
    visible: boolean;
  }>();
  
  const emit = defineEmits<{
    (e: 'update:visible', value: boolean): void;
    (e: 'select', type: string, criteria: string, query: string): void;
  }>();
  
  const step = ref(1);
  const selectedType = ref('');
  const selectedCriteria = ref('');
  const searchQuery = ref('');
  
  const closeModal = () => {
    emit('update:visible', false);
    step.value = 1;
    selectedType.value = '';
    selectedCriteria.value = '';
    searchQuery.value = '';
  };
  
  const selectType = (type: string) => {
    selectedType.value = type;
    step.value = 2;
  };
  
  const selectCriteria = (criteria: string) => {
    selectedCriteria.value = criteria;
    step.value = 3;
  };
  
  const performSearch = () => {
    emit('select', selectedType.value, selectedCriteria.value, searchQuery.value);
    closeModal();
  };
  </script>
  
  <style scoped>
  .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .modal-content {
    background: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    width: 300px;
    text-align: center;
  }
  
  .modal-content button {
    margin: 10px;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
  
  .modal-content button:hover {
    background-color: #0056b3;
  }
  
  .modal-content input {
    margin: 10px;
    padding: 10px;
    width: calc(100% - 20px);
    border: 1px solid #ccc;
    border-radius: 5px;
  }
  </style>