<template>
  <div class="app-container">
    <el-card v-loading="loading" class="detail-card">
      <template #header>
        <div class="card-header">
          <span>路口详情</span>
          <el-button @click="goBack" type="primary" size="small">返回</el-button>
        </div>
      </template>
      
      <el-descriptions :column="1" border>
        <el-descriptions-item label="路口ID">{{ detailData.id }}</el-descriptions-item>
        <el-descriptions-item label="路口名称">{{ detailData.intersectionName }}</el-descriptions-item>
        <el-descriptions-item label="路口编号">{{ detailData.intersectionId }}</el-descriptions-item>
        <el-descriptions-item label="经度">{{ detailData.longitude }}</el-descriptions-item>
        <el-descriptions-item label="纬度">{{ detailData.latitude }}</el-descriptions-item>
        <el-descriptions-item label="区域编码">{{ detailData.areaCode }}</el-descriptions-item>
        <el-descriptions-item label="描述">{{ detailData.description }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="detailData.isActive ? 'success' : 'info'">
            {{ detailData.isActive ? '已激活' : '未激活' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ detailData.createdTime }}</el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getIntersection } from '@/api/road/intersection'

const route = useRoute()
const router = useRouter()

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

// 返回上一页
function goBack() {
  router.go(-1)
}

// 获取路口详情
function getDetail() {
  const intersectionId = route.params.id || route.query.id
  if (!intersectionId) {
    console.error('未找到路口ID')
    return
  }
  
  loading.value = true
  getIntersection(intersectionId)
    .then(response => {
      console.log('获取路口详情数据:', response)
      detailData.value = response.data || response
      loading.value = false
    })
    .catch(error => {
      console.error('获取路口详情失败:', error)
      loading.value = false
    })
}

onMounted(() => {
  getDetail()
})
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
  background-color: #292c38;
  color: #ffffff;
  min-height: 100%;
  border-radius: 10px;
}

.detail-card {
  min-height: calc(100vh - 150px);
  background-color: #292c38;
  border: 1px solid #4c4f5f;
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    span {
      color: #ffffff;
      font-size: 16px;
      font-weight: 500;
    }
    
    .el-button {
      border-radius: 8px;
      font-size: 15px;
      height: 36px;
      min-width: 80px;
      background: #347ae2;
      color: #fff;
      border: none;
      
      &:hover {
        background: #2968c7;
      }
    }
  }
  
  :deep(.el-card__header) {
    background-color: #343744;
    border-bottom: 1px solid #4c4f5f;
    color: #ffffff;
  }
  
  :deep(.el-card__body) {
    background-color: #292c38;
    color: #ffffff;
  }
  
  :deep(.el-descriptions) {
    background-color: #292c38;
    
    .el-descriptions__header {
      background-color: #343744;
      color: #ffffff;
    }
    
    .el-descriptions__body {
      background-color: #292c38;
    }
    
    .el-descriptions__table {
      border-color: #4c4f5f;
    }
    
    .el-descriptions__cell {
      border-color: #4c4f5f;
    }
  }
  
  :deep(.el-descriptions__label) {
    width: 120px;
    font-weight: bold;
    background-color: #343744 !important;
    color: #96a0b5 !important;
    border-color: #4c4f5f !important;
  }
  
  :deep(.el-descriptions__content) {
    background-color: #292c38 !important;
    color: #ffffff !important;
    border-color: #4c4f5f !important;
  }
  
  :deep(.el-tag) {
    &.el-tag--success {
      background-color: #1f7a1f;
      border-color: #1f7a1f;
      color: #ffffff;
    }
    
    &.el-tag--info {
      background-color: #606266;
      border-color: #606266;
      color: #ffffff;
    }
  }
}
</style>