<script setup lang="ts">
import { ref, watch, onMounted } from 'vue';

// --- 搜索功能逻辑 ---
const searchQuery = ref('');
const items = ref<string[]>([]);

async function fetchItems() {
  console.log(`正在以 "${searchQuery.value}" 为关键词搜索...`);
  // 模拟 API 调用
  const response = ['Apple', 'Banana', 'Cherry'].filter(item => 
    item.toLowerCase().includes(searchQuery.value.toLowerCase())
  );
  items.value = response;
}

watch(searchQuery, fetchItems);
onMounted(fetchItems);
// --- 搜索功能逻辑结束 ---

// --- 其他功能逻辑可以写在这里 ---
</script>

<template>
  <div>
    <input type="text" v-model="searchQuery" placeholder="搜索..." />
    <ul>
      <li v-for="item in items" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>

<script setup lang="ts">
// 1. 定义 Props 的类型接口，这是组件的“输入契约”
interface Props {
    modelValue: string; // 用于 v-model
    label: string;
    placeholder?: string;
    // 可以添加更多验证相关的 props
}
// 2. 使用 withDefaults 和 defineProps 声明 Props 并提供默认值
const props = withDefaults(defineProps<Props>(), {
    placeholder: '请输入内容...',
});
// 内部尝试修改 prop 会导致警告，并且在开发模式下会报错
// props.label = 'New Label'; // 错误！
</script>

<template>
    <div class="custom-input-wrapper">
        <label>{{ props.label }}</label>
        <input type="text" :value="props.modelValue" :placeholder="props.placeholder" />
    </div>
</template>

<script setup lang="ts">
interface Props {
    // 我们仍然接收一个 value，但这次不叫 modelValue，以突出通用性
    value: string;
    label: string;
    placeholder?: string;
}

const props = withDefaults(defineProps<Props>(), {
    placeholder: '请输入内容...',
});

// 1. 定义事件签名：组件的“输出契约”
// 声明本组件可以触发一个名为 'input-change' 的事件，
// 并且这个事件会携带一个 string 类型的载荷（payload）。
const emit = defineEmits<{
    (event: 'input-change', value: string): void;
}>();

// 2. 在事件处理函数中，触发类型安全的事件
function onInput(event: Event) {
    const target = event.target as HTMLInputElement;
    // 通过 emit 触发 'input-change' 事件，并将输入框的当前值作为数据传递出去
    emit('input-change', target.value);
}
</script>

<template>
    <div class="custom-input-wrapper">
        <label>{{ props.label }}</label>
        <!--
      注意这里的变化：
      1. Prop 名改为了 :value
      2. 事件监听改为了 @input
    -->
        <input type="text" :value="props.value" :placeholder="props.placeholder" @input="onInput" />
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import CustomInput from '@/components/CustomInput.vue';

const username = ref('');

// 3. 定义一个处理函数，它将接收子组件传递过来的值
function handleUsernameChange(newValue: string) {
  console.log('子组件传来了新值:', newValue);
  username.value = newValue;
}
</script>

<template>
  <p>父组件中的值: {{ username }}</p>

  <!--
    父组件通过 v-on (简写为 @) 来监听子组件的自定义事件。
    @input-change="handleUsernameChange" 的意思是：
    “当 CustomInput 组件触发 'input-change' 事件时，调用我的 handleUsernameChange 方法，
    并把事件附带的数据作为第一个参数传给它。”
  -->
  <CustomInput
    :value="username"
    @input-change="handleUsernameChange"
    label="用户名"
    placeholder="请输入用户名"
  />
</template>

<script setup lang="ts">
interface Props {
    // 1. Prop 名约定为 modelValue
    modelValue: string;
    label: string;
    placeholder?: string;
}
defineProps<Props>();

// 2. 事件名约定为 update:modelValue
const emit = defineEmits<{
    (e: 'update:modelValue', value: string): void;
}>();

function onInput(event: Event) {
    const target = event.target as HTMLInputElement;
    emit('update:modelValue', target.value);
}
</script>

<template>
    <div class="custom-input-wrapper">
        <label>{{ label }}</label>
        <input type="text" :value="modelValue" :placeholder="placeholder" @input="onInput" />
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import CustomInput from '@/components/CustomInput.vue';

const inputValue = ref('');
</script>

<template>
  <p>当前输入值: {{ inputValue }}</p>

  <!--
    现在，这行代码 v-model="inputValue"
    被 Vue 自动展开为:
    :modelValue="inputValue"
    @update:modelValue="newValue => inputValue = newValue"

    它完美地将数据绑定和事件监听合二为一，代码更加简洁和直观。
  -->
  <CustomInput v-model="inputValue" label="用户名" placeholder="请输入用户名" />
</template>

<script setup lang="ts">
const items = ['Vue', 'React', 'Angular'];
</script>

<template>
  <div class="layout">
    <header>
      <!-- 具名插槽: header -->
      <slot name="header">
        <h1>默认标题</h1> <!-- 插槽的后备内容 -->
      </slot>
    </header>
    <main>
      <!-- 默认插槽 -->
      <slot></slot>
    </main>
    <footer>
      <!-- 作用域插槽: footer -->
      <!-- 将组件内部的数据 (items) 暴露给父组件 -->
      <slot name="footer" :items="items" :currentYear="new Date().getFullYear()">
      </slot>
    </footer>
  </div>
</template>

<script setup lang="ts">
import BaseLayout from '@/components/BaseLayout.vue';
</script>

<template>
  <BaseLayout>
    <!-- 填充具名插槽 header -->
    <template #header>
      <h2>我的应用</h2>
    </template>

    <!-- 填充默认插槽 -->
    <p>这是应用的主要内容。</p>

    <!-- 填充作用域插槽 footer, 并接收其暴露的数据 -->
    <template #footer="{ items, currentYear }">
      <p>
        &copy; {{ currentYear }}. 技术栈: {{ items.join(', ') }}
      </p>
    </template>
  </BaseLayout>
</template>

<script setup lang="ts">
const items = ['Vue', 'React', 'Angular'];

// 使用 defineSlots 定义插槽类型
const slots = defineSlots<{
  header?: () => any;
  default?: () => any;
  footer?: (scope: { items: string[]; currentYear: number }) => any;
}>();
</script>

<template>
  <div class="layout">
    <header>
      <!-- 具名插槽: header -->
      <template v-if="slots.header">
        <slot name="header" />
      </template>
      <template v-else>
        <h1>默认标题</h1>
      </template>
    </header>
    <main>
      <!-- 默认插槽 -->
      <slot />
    </main>
    <footer>
      <!-- 作用域插槽: footer -->
      <template v-if="slots.footer">
        <slot name="footer" :items="items" :currentYear="new Date().getFullYear()" />
      </template>
    </footer>
  </div>
</template>

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

const internalValue = ref('');

async function validate() {
  console.log('开始校验...');
  return internalValue.value.length > 0;
}

// 只暴露 validate 方法，隐藏 internalValue
defineExpose({
  validate,
});
</script>

<template>
  <input type="text" v-model="internalValue" />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import ValidationForm from '@/components/ValidationForm.vue';

// 1. 定义一个 ref 来持有组件实例
// 注意类型需要是 InstanceType<typeof ValidationForm>
const formRef = ref<InstanceType<typeof ValidationForm> | null>(null);

async function submitForm() {
  if (formRef.value) {
    const isValid = await formRef.value.validate();
    alert(isValid ? '表单提交成功' : '表单校验失败');
  }
}
</script>

<template>
  <!-- 2. 将 ref 绑定到组件上 -->
  <ValidationForm ref="formRef" />
  <button @click="submitForm">提交</button>
</template>

<template>
  <div class="tab-panel">
    <h3>个人资料</h3>
    <label>用户名: <input type="text" value="TechLead" /></label>
  </div>
</template>

<template>
  <div class="tab-panel">
    <h3>账户安全</h3>
    <label>旧密码: <input type="password" /></label>
    <label>新密码: <input type="password" /></label>
  </div>
</template>

<script setup lang="ts">
import { ref, shallowRef, type Component } from 'vue';
import ProfileSettings from '@/components/tabs/ProfileSettings.vue';
import SecuritySettings from '@/components/tabs/SecuritySettings.vue';

// 定义一个类型安全的标签页数据结构
interface Tab {
  name: string;
  component: Component;
}

const tabs: Tab[] = [
  { name: '个人资料', component: ProfileSettings },
  { name: '账户安全', component: SecuritySettings },
];

// 使用 shallowRef 存储当前激活的组件。
// 对于组件这种不应被深度代理的复杂对象，shallowRef 是性能更优的选择。
const currentTabComponent = shallowRef<Component>(ProfileSettings);
</script>

<template>
  <div class="tabs-container">
    <div class="tab-buttons">
      <button v-for="tab in tabs" :key="tab.name" @click="currentTabComponent = tab.component">
        {{ tab.name }}
      </button>
    </div>

    <!-- 
      <component :is="..."> 是动态组件的核心。
      'is' 属性绑定到一个组件对象或组件名字符串。
      当 currentTabComponent 变化时，Vue 会自动卸载旧组件，挂载新组件。
    -->
    <main class="tab-content">
      <!-- 
         搭配 <KeepAlive> 可以缓存非活动组件的实例，
         而不是销毁它们。这对于保留用户输入或滚动位置非常有用。
       -->
      <KeepAlive>
        <component :is="currentTabComponent" />
      </KeepAlive>
    </main>
  </div>
</template>

<script setup lang="ts">
console.log('UserProfileCard 组件被加载并执行了！');
</script>
<template>
  <div class="user-profile-card">
    <h2>用户资料卡</h2>
    <p>这里包含很多数据和图表...</p>
  </div>
</template>

<template>
  <div class="spinner"></div>
</template>

<style scoped lang="scss">
.spinner {
  width: 32px;
  height: 32px;
  border: 4px solid #eee;
  border-top: 4px solid #409eff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 16px auto;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
</style>

<template><p>组件加载失败！</p></template>

<script setup lang="ts">
import { ref, defineAsyncComponent } from 'vue';
import LoadingSpinner from '@/components/common/LoadingSpinner.vue';
import LoadingError from '@/components/common/LoadingError.vue';

const AsyncComp = defineAsyncComponent({
  // 工厂函数
  // 他只会在第一次加载的时候执行，之后会被缓存
  loader: () => new Promise((resolve) => {
    //  模拟网络延迟
    setTimeout(() => {
      resolve(import('@/components/UserProfileCard.vue'));
    }, 2000);
  }),
  // 加载异步组件时显示的组件
  loadingComponent: LoadingSpinner,
  // 加载失败时显示的组件
  errorComponent: LoadingError,
  // 显示 loading 组件前的延迟（默认 200ms）
  delay: 200,
  // 超时后显示错误组件（默认 Infinity）
  timeout: 3000,
  // 是否支持异步组件（默认 true）
  suspensible: false,
  // 错误处理函数
  onError(error, retry, fail, attempts) {
    if (error.message.match(/fetch/) && attempts <= 3) {
      // 遇到 fetch 错误时重试，最多 3 次
      retry();
    } else {
      // 注意 retry/fail 类似于 promise 的 resolve/reject：
      // 必须调用其中之一以继续错误处理
      fail();
    }
  },
});

const showProfile = ref(false);
</script>

<template>
  <div>
    <button @click="showProfile = !showProfile">
      {{ showProfile ? '隐藏' : '显示' }}用户资料
    </button>
    <hr>

    <div v-if="showProfile" class="profile-container">
      <AsyncComp />
    </div>
  </div>
</template>

<style></style>

<script setup lang="ts">
// 该组件接收一个布尔值 prop 来控制其显示与隐藏
defineProps<{
  show: boolean;
}>();
// 定义一个 emit 事件，用于通知父组件关闭模态框
const emit = defineEmits<{
  (e: "close"): void;
}>();
</script>

<template>
  <!-- v-if 控制模态框的挂载与卸载 -->
  <teleport to="body">
    <div class="modal-mask" v-if="show">
      <div class="modal-container">
        <header>
          <!-- 通过插槽允许父组件自定义头部内容 -->
          <slot name="header">默认标题</slot>
        </header>
        <main>
          <!-- 默认插槽用于放置主体内容 -->
          <slot />
        </main>
        <footer>
          <button @click="emit('close')">关闭</button>
        </footer>
      </div>
    </div>
  </teleport>
</template>

<style lang="scss" scoped>
.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}
.modal-container {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  min-width: 300px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
</style>

<script setup lang="ts">
import { ref } from 'vue';
import BaseModal from '@/components/common/BaseModal.vue';

const showModal = ref(false);
</script>

<template>
  <div class="some-deeply-nested-container">
    <button @click="showModal = true">打开模态框</button>
  </div>
  
  <!-- 
    即使 BaseModal 在这里被调用，它的真实 DOM 也会出现在 <body> 中。
    父组件通过 v-model:show (或 :show 和 @close) 来控制其状态，
    逻辑关系依然清晰。
  -->
  <BaseModal :show="showModal" @close="showModal = false">
    <template #header>
      <h3>来自 App.vue 的标题</h3>
    </template>
    <p>这是一段模态框的内容。</p>
  </BaseModal>
</template>

<style>
/* 模拟一个会裁剪内容的父容器 */
.some-deeply-nested-container {
  overflow: hidden;
  position: relative;
  border: 1px solid red;
  padding: 20px;
}
</style>

<script setup lang="ts">
import { ref, defineAsyncComponent } from 'vue';
import LoadingSpinner from '@/components/common/LoadingSpinner.vue';
import LoadingError from '@/components/common/LoadingError.vue';

const showProfile = ref(false);

// 用于 Suspense 的异步组件，模拟网络延迟，与defineAsyncComponent不同的是，这段代码完全可以放在组建内部，保持主组件的简洁性
const UserProfileCard = defineAsyncComponent(() =>
  new Promise((resolve) => {
    setTimeout(() => {
      resolve(import('@/components/UserProfileCard.vue'));
    }, 2000);
  })
);
</script>

<template>
  <div>
    <button @click="showProfile = !showProfile">
      {{ showProfile ? '隐藏' : '显示' }}用户资料
    </button>
    <hr>

    <div v-if="showProfile" class="profile-container">
      <Suspense>
        <template #default>
          <UserProfileCard />
        </template>
        <template #fallback>
          <LoadingSpinner />
        </template>
        <template #error>
          <LoadingError />
        </template>
      </Suspense>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onActivated, onDeactivated } from 'vue';
const username = ref('');
onActivated(() => console.log('ProfileSettings 已激活'));
onDeactivated(() => console.log('ProfileSettings 已失活'));
</script>
<template>
  <div>
    <h3>个人资料</h3>
    <label>用户名: <input type="text" v-model="username" placeholder="请输入..." /></label>
  </div>
</template>

<script setup lang="ts">
import { ref, onActivated, onDeactivated } from 'vue';
const password = ref('');
onActivated(() => console.log('SecuritySettings 已激活'));
onDeactivated(() => console.log('SecuritySettings 已失活'));
</script>
<template>
  <div>
    <h3>账户安全</h3>
    <label>新密码: <input type="password" v-model="password" placeholder="请输入..." /></label>
  </div>
</template>

<script setup lang="ts">
import { shallowRef, type Component } from 'vue';
import ProfileSettings from '@/components/tabs/ProfileSettings.vue';
import SecuritySettings from '@/components/tabs/SecuritySettings.vue';

const tabs: Record<string, Component> = {
  Profile: ProfileSettings,
  Security: SecuritySettings,
};
const currentTab = shallowRef<string>('Profile');
</script>

<template>
  <div class="tabs">
    <button v-for="(_, tab) in tabs" :key="tab" @click="currentTab = tab">
      {{ tab }}
    </button>
  </div>

  <!-- 将动态组件包裹在 KeepAlive 中 -->
  <KeepAlive>
    <component :is="tabs[currentTab]" />
  </KeepAlive>
</template>