<template>
  <div class="categories-page">
    <div class="page-header">
      <el-button type="primary" @click="openAdd">创建分类</el-button>
    </div>
    <div class="table-card">
      <el-table :data="paginatedCategories" row-key="id" default-expand-all>
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="name" label="分类名称" />
        <el-table-column prop="description" label="描述" />
        <el-table-column label="金额限制" width="200">
          <template #default="{ row }">
            <span v-if="row.min_amount || row.max_amount">¥{{ row.min_amount || 0 }}~{{ row.max_amount || '∞' }}</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template #default="{ row }">
            <el-button link type="primary" size="small" @click="editCat(row)">编辑</el-button>
            <el-button link type="danger" size="small" @click="deleteCat(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-wrap">
        <el-pagination
          v-model:current-page="page"
          :page-size="pageSize"
          :total="total"
          layout="total, prev, pager, next"
          @current-change="handlePageChange"
        />
      </div>
    </div>
    <el-dialog v-model="showAdd" :title="editing ? '编辑分类' : '创建分类'" width="500px">
      <el-form :model="form" label-width="100px">
        <el-form-item label="名称"><el-input v-model="form.name" /></el-form-item>
        <el-form-item label="描述"><el-input v-model="form.description" type="textarea" /></el-form-item>
        <el-form-item label="最小金额"><el-input-number v-model="form.min_amount" :precision="2" /></el-form-item>
        <el-form-item label="最大金额"><el-input-number v-model="form.max_amount" :precision="2" /></el-form-item>
        <el-form-item label="最小数量"><el-input-number v-model="form.min_quantity" /></el-form-item>
        <el-form-item label="最大数量"><el-input-number v-model="form.max_quantity" /></el-form-item>
        <el-form-item label="最小重量"><el-input-number v-model="form.min_weight" :precision="2" /></el-form-item>
        <el-form-item label="最大重量"><el-input-number v-model="form.max_weight" :precision="2" /></el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showAdd = false">取消</el-button>
        <el-button type="primary" @click="saveCat">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { adminApi, categoryApi } from '../../api'

const categories = ref<any[]>([])
const showAdd = ref(false)
const editing = ref<any>(null)
const page = ref(1)
const pageSize = 20
const total = computed(() => categories.value.length)
const paginatedCategories = computed(() => {
  const start = (page.value - 1) * pageSize
  return categories.value.slice(start, start + pageSize)
})
const form = reactive({ name: '', description: '', min_amount: undefined as number | undefined, max_amount: undefined as number | undefined, min_quantity: undefined as number | undefined, max_quantity: undefined as number | undefined, min_weight: undefined as number | undefined, max_weight: undefined as number | undefined })

function handlePageChange() {
  window.scrollTo({ top: 0, behavior: 'smooth' })
}

async function fetchCategories() {
  const res: any = await categoryApi.list()
  categories.value = res.data || []
}

function openAdd() {
  editing.value = null
  Object.assign(form, { name: '', description: '', min_amount: undefined, max_amount: undefined, min_quantity: undefined, max_quantity: undefined, min_weight: undefined, max_weight: undefined })
  showAdd.value = true
}

function editCat(row: any) {
  editing.value = row
  Object.assign(form, { name: row.name, description: row.description || '', min_amount: row.min_amount, max_amount: row.max_amount, min_quantity: row.min_quantity, max_quantity: row.max_quantity, min_weight: row.min_weight, max_weight: row.max_weight })
  showAdd.value = true
}

async function saveCat() {
  try {
    if (editing.value) {
      await adminApi.updateCategory(editing.value.id, form)
    } else {
      await adminApi.createCategory(form)
    }
    ElMessage.success('保存成功')
    showAdd.value = false
    editing.value = null
    await fetchCategories()
  } catch (error: any) {
    const msg = error.response?.data?.error || '保存失败'
    ElMessage.error(msg)
  }
}

async function deleteCat(id: number) {
  await ElMessageBox.confirm('确定删除此分类？', '确认')
  await adminApi.deleteCategory(id)
  ElMessage.success('删除成功')
  await fetchCategories()
}

onMounted(fetchCategories)
</script>

<style scoped lang="scss">
.categories-page { padding: 0; }
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.table-card { background: #2d2d44; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 12px; padding: 20px; }

.pagination-wrap {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.pagination-wrap :deep(.el-pagination) {
  --el-pagination-bg-color: rgba(255, 255, 255, 0.06);
  --el-pagination-text-color: rgba(255, 255, 255, 0.6);
  --el-pagination-button-disabled-bg-color: rgba(255, 255, 255, 0.04);
  --el-pagination-button-bg-color: rgba(255, 255, 255, 0.06);
  --el-pagination-hover-color: #4e6ef2;
}

.pagination-wrap :deep(.el-pagination .el-pager li) {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.6);
  border-radius: 6px;
  margin: 0 4px;
}

.pagination-wrap :deep(.el-pagination .el-pager li:hover),
.pagination-wrap :deep(.el-pagination .el-pager li.is-active) {
  background: #4e6ef2;
  color: #fff;
}

.pagination-wrap :deep(.el-pagination .btn-prev),
.pagination-wrap :deep(.el-pagination .btn-next) {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.6);
  border-radius: 6px;
}

.pagination-wrap :deep(.el-pagination .btn-prev:hover),
.pagination-wrap :deep(.el-pagination .btn-next:hover) {
  background: rgba(78, 110, 242, 0.2);
  color: #4e6ef2;
}

.pagination-wrap :deep(.el-pagination__total) {
  color: rgba(255, 255, 255, 0.5);
}
</style>
