<template>
  <div v-loading="loading">
    <el-descriptions
      v-if="detail.id"
      :column="2"
      border
    >
      <el-descriptions-item label="ID" :span="2">{{ detail.id }}</el-descriptions-item>
      <el-descriptions-item label="区域编码">{{ detail.lot_code }}</el-descriptions-item>
      <el-descriptions-item label="区域名称">{{ detail.lot_name }}</el-descriptions-item>
      <el-descriptions-item label="容量">{{ detail.capacity }}</el-descriptions-item>
      <el-descriptions-item label="备注">{{ detail.description || '-' }}</el-descriptions-item>
      <el-descriptions-item label="创建时间" :span="2">{{ detail.CreatedAt || '-' }}</el-descriptions-item>
      <el-descriptions-item label="更新时间" :span="2">{{ detail.UpdatedAt || '-' }}</el-descriptions-item>
    </el-descriptions>

    <div v-if="!detail.id && !loading" style="text-align: center; color: #999; margin-top: 40px;">
      请从左侧选择一个停车场
    </div>

    <div v-if="detail.id" class="action-bar">
      <el-button type="primary" icon="Edit" @click="handleEdit">编辑</el-button>
      <el-button type="danger" icon="Delete" @click="handleDelete">删除</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { obtainPullOverId } from '@/api/pullOver'

const props = defineProps({
  parkId: {
    type: Number,
    default: 0,
  },
})

const emit = defineEmits(['edit', 'delete'])

const loading = ref(false)
const detail = ref({})

const fetchDetail = async (id) => {
  if (!id || id === 0) {
    detail.value = {}
    return
  }
  loading.value = true
  try {
    const res = await obtainPullOverId(id)
    if (res.code === 0) {
      detail.value = res.data || {}
    }
  } finally {
    loading.value = false
  }
}

const handleEdit = () => {
  emit('edit', detail.value)
}

const handleDelete = () => {
  emit('delete', detail.value.id || detail.value.ID)
}

watch(
  () => props.parkId,
  (val) => {
    fetchDetail(val)
  },
  { immediate: true }
)
</script>

<style scoped lang="scss">
.action-bar {
  margin-top: 20px;
  display: flex;
  gap: 10px;
}
</style>
