// src/utils/http.ts
import axios, { AxiosError, type AxiosRequestConfig } from 'axios'
import { ElMessage } from 'element-plus'

// 后端统一响应格式：{ code: 0, data: T, message: 'ok' }
interface ApiResponse<T = unknown> {
  code: number
  data: T
  message: string
}

const http = axios.create({
  baseURL: import.meta.env.VITE_API_BASE ?? '/api',
  timeout: 15000,
})

// 请求拦截：带 token
http.interceptors.request.use((config) => {
  const token = localStorage.getItem('token')
  if (token) config.headers.Authorization = `Bearer ${token}`
  return config
})

// 响应拦截：统一解包 + 统一错误提示
http.interceptors.response.use(
  (res) => {
    const body = res.data as ApiResponse
    if (body.code === 0) return body.data          // 成功：直接把 data 交出去
    if (body.code === 401) {
      // token 过期：清登录态，跳登录页
      localStorage.removeItem('token')
      location.href = '/login'
      return Promise.reject(new Error(body.message))
    }
    ElMessage.error(body.message || '请求失败')
    return Promise.reject(new Error(body.message))
  },
  (err: AxiosError) => {
    // 网络层错误：超时、断网、5xx
    if (err.code === 'ECONNABORTED') ElMessage.error('请求超时，请重试')
    else ElMessage.error(err.response ? `服务异常(${err.response.status})` : '网络异常')
    return Promise.reject(err)
  },
)

export function get<T>(url: string, config?: AxiosRequestConfig) {
  return http.get<unknown, T>(url, config)
}
export function post<T>(url: string, data?: unknown, config?: AxiosRequestConfig) {
  return http.post<unknown, T>(url, data, config)
}

import { get } from '@/utils/http'

interface User { id: number; name: string; email: string }

const users = await get<User[]>('/users')   // 拿到的就是解包后的 data

import { refDebounced } from '@vueuse/core'  // 或者手写防抖

// 方案 1：防抖，减少请求次数（300ms 内不重复触发）
const keyword = ref('')
const debouncedKeyword = refDebounced(keyword, 300)

// 方案 2：竞态防护，只接受最后一次请求的结果
let seq = 0
watch(debouncedKeyword, async (kw) => {
  const mySeq = ++seq
  const list = await get<Suggestion[]>('/suggest', { params: { kw } })
  if (mySeq !== seq) return    // 这期间又发了新请求，丢弃旧结果
  suggestions.value = list
})

// 方案 3：AbortController 直接取消旧请求（axios 支持 signal）

*, *::before, *::after {
  box-sizing: border-box;
}

.toolbar {
  display: flex;
  align-items: center;      /* 交叉轴居中（垂直居中） */
  justify-content: space-between; /* 主轴两端对齐 */
  gap: 12px;                /* 元素间距，别再给子元素写 margin-right 了 */
}

.toolbar .spacer {
  flex: 1;                  /* 占满剩余空间，把后面的元素顶到最右 */
  min-width: 0;             /* ⚠️ 踩坑点，见 2.5 */
}

.admin-layout {
  display: grid;
  height: 100vh;
  grid-template:
    "header header" 56px
    "aside  main"   1fr
    / 220px 1fr;
}
.admin-layout > header { grid-area: header; }
.admin-layout > aside  { grid-area: aside; }
.admin-layout > main   { grid-area: main; overflow: auto; }

:root {
  --primary: #409eff;
  --radius: 6px;
}
[data-theme='dark'] {
  --primary: #79bbff;
}

.btn {
  background: var(--primary);
  border-radius: var(--radius);
}

/* :has() —— 终于可以「父选子」了 */
.form-item:has(.el-input.is-error) {
  border-color: red;
}

<template>
  <section :style="{ '--card-color': themeColor }">
    <slot />
  </section>
</template>

.main { flex: 1; min-width: 0; overflow: auto; }

// src/constants/z-index.ts —— 全项目只允许用这几个值
export const Z_INDEX = {
  dropdown: 1000,
  sticky: 1020,
  overlay: 1030,
  modal: 1040,
  toast: 1050,
} as const

<style scoped>
/* ✅ 正确：穿透 scoped，作用到子组件内部 DOM */
.my-page :deep(.el-button) {
  border-radius: 20px;
}

/* 注意：前面最好带一个自己页面的类名，避免穿透后污染全局 */
</style>

<template>
  <div class="card-grid">
    <article v-for="item in list" :key="item.id" class="card">
      <h3>{{ item.title }}</h3>
      <p>{{ item.desc }}</p>
    </article>
  </div>
</template>

<style scoped>
.card-grid {
  /* 自动填充：每列至少 260px，剩下的均分。不需要媒体查询！ */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  padding: 16px;
}
.card {
  border: 1px solid var(--border-color, #e4e7ed);
  border-radius: 8px;
  padding: 16px;
  transition: box-shadow 0.2s;
}
.card:hover {
  box-shadow: 0 4px 16px rgb(0 0 0 / 10%);
}
</style>

// styles/element-theme.scss —— 官方推荐的定制方式
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: ('primary': ('base': #6c5ce7)),
  $border-radius: ('base': 8px),
);

<template>
  <el-form ref="formRef" :model="form" :rules="rules">
    <!-- prop 必须等于 form 里的字段名，一字不差 -->
    <el-form-item label="邮箱" prop="email">
      <el-input v-model="form.email" />
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import type { FormInstance, FormRules } from 'element-plus'

const formRef = ref<FormInstance>()
const form = reactive({ email: '' })
const rules: FormRules = {
  email: [
    { required: true, message: '邮箱必填', trigger: 'blur' },
    { type: 'email', message: '邮箱格式不对', trigger: 'blur' },
  ],
}

async function submit() {
  // ✅ 校验不过直接 return，永远不要让请求绕过校验
  const valid = await formRef.value?.validate().catch(() => false)
  if (!valid) return
  await post('/users', form)
}
</script>

<template>
  <div class="user-page">
    <!-- 工具栏：Flex 布局，左侧搜索，右侧操作 -->
    <div class="toolbar">
      <el-input
        v-model="keyword"
        placeholder="搜索用户名"
        clearable
        style="width: 240px"
        @input="onSearch"
      />
      <el-button type="primary" @click="openCreate">新建用户</el-button>
    </div>

    <!-- 表格：服务端分页 -->
    <el-table v-loading="loading" :data="users" stripe>
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="email" label="email" show-overflow-tooltip />
      <el-table-column label="操作" width="160">
        <template #default="{ row }">
          <el-button link type="primary" @click="openEdit(row)">编辑</el-button>
          <el-button link type="danger" @click="remove(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      v-model:current-page="page"
      v-model:page-size="pageSize"
      :total="total"
      layout="total, prev, pager, next"
      @current-change="fetchUsers"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import { get, post } from '@/utils/http'

interface User { id: number; name: string; email: string }

const users = ref<User[]>([])
const total = ref(0)
const page = ref(1)
const pageSize = ref(20)
const keyword = ref('')
const loading = ref(false)

let seq = 0   // 竞态防护：只认最后一次请求
async function fetchUsers() {
  const mySeq = ++seq
  loading.value = true
  try {
    const res = await get<{ list: User[]; total: number }>('/users', {
      params: { page: page.value, size: pageSize.value, kw: keyword.value },
    })
    if (mySeq !== seq) return
    users.value = res.list
    total.value = res.total
  } finally {
    if (mySeq === seq) loading.value = false
  }
}

let timer: ReturnType<typeof setTimeout>
function onSearch() {
  clearTimeout(timer)
  timer = setTimeout(() => { page.value = 1; fetchUsers() }, 300)  // 防抖
}

async function remove(row: User) {
  await ElMessageBox.confirm(`确认删除 ${row.name}？`, '警告', { type: 'warning' })
  await post(`/users/${row.id}/delete`)
  ElMessage.success('已删除')
  fetchUsers()
}

onMounted(fetchUsers)
</script>

<style scoped>
.user-page {
  padding: 16px;
}
.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
</style>