// vite.config.ts
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) }  // @ 指向 src, 告别 ../../..
  },
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',   // 开发时 /api 请求转发给本地 Spring Boot
        changeOrigin: true
      }
    }
  }
})

export interface Task {                 // 后端实体的前端镜像
  id: number
  title: string
  status: 'todo' | 'doing' | 'done'     // 字面量联合: 比 String 更严的枚举
  assigneeId: number | null
  dueAt: string | null
  version: number
}

export interface TaskQuery {            // 查询参数 DTO
  page: number
  pageSize: number
  keyword?: string
  status?: Task['status']
}

export interface PageResult<T> {        // 分页包装, 泛型和 Java 一个意思
  items: T[]
  total: number
}

export type TaskInput = Pick<Task, 'title' | 'status' | 'assigneeId' | 'dueAt'>  // 从 Task 挑字段拼出表单类型

export interface AppError extends Error {
  kind: 'network' | 'timeout' | 'unauthorized' | 'validation' | 'server'
  status?: number
  fieldErrors?: Record<string, string>   // 后端字段校验错误, 表单要用
  requestId?: string                     // 排查问题时和后端对暗号用
}

export function useRequest<T, A extends unknown[]>(request: (...args: A) => Promise<T>) {
  const data = shallowRef<T>()        // shallowRef: 大数据不做深层响应式, 省性能
  const loading = ref(false)
  const error = shallowRef<unknown>()
  let sequence = 0                    // 04 篇的版本号防乱序, 又见面了

  async function run(...args: A) {
    const current = ++sequence
    loading.value = true
    error.value = undefined
    try {
      const result = await request(...args)
      if (current === sequence) data.value = result
      return result
    } catch (e) {
      if (current === sequence) error.value = e
      throw e
    } finally {
      if (current === sequence) loading.value = false
    }
  }

  return { data, loading, error, run }
}

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

const props = defineProps<{ initial?: Task }>()      // 传了就是编辑, 没传就是新建
const emit = defineEmits<{ saved: [task: Task] }>()

const formRef = ref<FormInstance>()
const submitting = ref(false)
const form = reactive<TaskInput>({
  title: '', status: 'todo', assigneeId: null, dueAt: null
})

const rules: FormRules<TaskInput> = {
  title: [
    { required: true, message: '请输入标题', trigger: 'blur' },
    { min: 2, max: 100, message: '长度为 2 到 100 个字符', trigger: 'blur' }
  ],
  status: [{ required: true, message: '请选择状态', trigger: 'change' }]
}

async function submit() {
  if (submitting.value) return              // 入口防重
  await formRef.value?.validate()           // 不过直接抛, 走不到提交
  submitting.value = true
  try {
    const saved = props.initial
      ? await taskApi.update(props.initial.id, { ...form, version: props.initial.version })
      : await taskApi.create({ ...form })
    emit('saved', saved)
  } catch (error) {
    applyServerFieldErrors(formRef.value, error)   // 后端字段错误映射回具体表单项
    throw error
  } finally {
    submitting.value = false
  }
}
</script>

<template>
  <el-form ref="formRef" :model="form" :rules="rules" label-width="88px">
    <el-form-item label="标题" prop="title">    <!-- prop 必须对上 model 字段名, 校验才生效 -->
      <el-input v-model.trim="form.title" maxlength="100" show-word-limit />
    </el-form-item>
    <el-form-item label="状态" prop="status">
      <el-select v-model="form.status">
        <el-option label="待处理" value="todo" />
        <el-option label="进行中" value="doing" />
        <el-option label="已完成" value="done" />
      </el-select>
    </el-form-item>
    <el-button type="primary" :loading="submitting" @click="submit">保存</el-button>
  </el-form>
</template>

<el-table
  v-loading="loading"
  :data="rows"
  row-key="id"
  @selection-change="selection = $event"
>
  <el-table-column type="selection" width="48" reserve-selection />
  <el-table-column prop="title" label="标题" min-width="220" show-overflow-tooltip />
  <el-table-column prop="status" label="状态" width="110">
    <template #default="{ row }"><TaskStatusTag :status="row.status" /></template>  <!-- 02 篇的作用域插槽 -->
  </el-table-column>
  <el-table-column label="操作" width="150" fixed="right">
    <template #default="{ row }">
      <el-button link type="primary" @click="openEdit(row)">编辑</el-button>
      <el-button link type="danger" @click="removeTask(row)">删除</el-button>
    </template>
  </el-table-column>
</el-table>

<el-pagination
  v-model:current-page="query.page"
  v-model:page-size="query.pageSize"
  :total="total"
  :page-sizes="[10, 20, 50, 100]"
  layout="total, sizes, prev, pager, next"
  @change="loadTasks"
/>

<el-dialog
  v-model="visible"
  :title="editingTask ? '编辑任务' : '新建任务'"
  width="min(560px, calc(100vw - 32px))"
  :close-on-click-modal="!dirty"     
  destroy-on-close                   
>
  <TaskForm :initial="editingTask" @saved="handleSaved" />
</el-dialog>

it('emits normalized query', async () => {
  const wrapper = mount(TaskFilters)
  await wrapper.get('[data-test=keyword]').setValue('  vue  ')
  await wrapper.get('form').trigger('submit')
  expect(wrapper.emitted('search')?.[0]).toEqual([{ keyword: 'vue' }])   // 断言用户可见行为, 不抠内部变量
})

npm run lint && npm run type-check && npm run test && npm run build