<template>
  <div>
    <div class="flex items-center justify-between mb-4">
      <h1 class="text-xl font-bold text-gray-800">到访区域管理</h1>
      <el-button type="primary" size="small" @click="openAdd">+ 新增区域</el-button>
    </div>

    <div class="bg-white rounded-xl shadow-sm border overflow-hidden">
      <el-table :data="areas" stripe class="w-full" v-loading="loading">
        <el-table-column prop="id" label="ID" width="60" />
        <el-table-column prop="name" label="区域名称" min-width="160" />
        <el-table-column prop="sort" label="排序" width="80" />
        <el-table-column label="状态" width="80">
          <template #default="{ row }">
            <el-tag :type="row.status === 1 ? 'success' : 'danger'" size="small">
              {{ row.status === 1 ? '启用' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="160" fixed="right">
          <template #default="{ row }">
            <el-button size="small" type="primary" link @click="openEdit(row)">编辑</el-button>
            <el-button size="small" type="danger" link @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div v-if="!areas.length && !loading" class="text-center text-gray-400 py-12">暂无到访区域</div>
    </div>

    <!-- 新增/编辑对话框 -->
    <el-dialog v-model="dialogVisible" :title="editId ? '编辑区域' : '新增区域'" width="420px" :close-on-click-modal="false">
      <el-form :model="form" label-width="100px">
        <el-form-item label="区域名称">
          <el-input v-model="form.name" placeholder="如：A区域" />
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number v-model="form.sort" :min="0" />
        </el-form-item>
        <el-form-item v-if="editId" label="状态">
          <el-switch v-model="form.status" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="禁用" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" :loading="saving" @click="handleSave">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

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

const areas = ref<any[]>([])
const loading = ref(false)
const dialogVisible = ref(false)
const saving = ref(false)
const editId = ref<number | null>(null)
const form = ref({ name: '', sort: 0, status: 1 })

async function loadData() {
  loading.value = true
  try {
    const res: any = await request.Get('/v1/admin/visitor-areas')
    areas.value = res?.data || []
  } catch {
    ElMessage.error('加载失败')
  } finally {
    loading.value = false
  }
}

function openAdd() {
  editId.value = null
  form.value = { name: '', sort: 0, status: 1 }
  dialogVisible.value = true
}

function openEdit(row: any) {
  editId.value = row.id
  form.value = { name: row.name, sort: row.sort, status: row.status }
  dialogVisible.value = true
}

async function handleSave() {
  if (!form.value.name.trim()) {
    ElMessage.warning('请输入区域名称')
    return
  }
  saving.value = true
  try {
    if (editId.value) {
      await request.Put(`/v1/admin/visitor-areas/${editId.value}`, form.value)
      ElMessage.success('更新成功')
    } else {
      await request.Post('/v1/admin/visitor-areas', form.value)
      ElMessage.success('创建成功')
    }
    dialogVisible.value = false
    await loadData()
  } catch (err: any) {
    ElMessage.error(err.message || '操作失败')
  } finally {
    saving.value = false
  }
}

async function handleDelete(row: any) {
  try {
    await ElMessageBox.confirm(`确定删除区域「${row.name}」？`, '确认')
    await request.Delete(`/v1/admin/visitor-areas/${row.id}`)
    ElMessage.success('删除成功')
    await loadData()
  } catch {
    // 取消
  }
}

onMounted(loadData)
</script>
