<template>
  <div class="page">
    <section class="page-hero">
      <div>
        <h1>区域管理</h1>
        <p>区域是路灯、报警、地图和角色数据权限的基础维度。</p>
      </div>
      <el-tag type="primary" effect="light">区域树</el-tag>
    </section>
    <div class="usage-grid">
      <el-card class="usage-card" shadow="never">
        <strong>1. 绑定路灯资产</strong>
        <span>每盏路灯归属到一个区县，地图点位、资产列表和报警都继承这个区域。</span>
      </el-card>
      <el-card class="usage-card" shadow="never">
        <strong>2. 控制角色数据范围</strong>
        <span>在角色权限页勾选区域后，该角色只能查看对应区域及下级区域的数据。</span>
      </el-card>
      <el-card class="usage-card" shadow="never">
        <strong>3. 支撑地图筛选和统计</strong>
        <span>看板区域排行、地图聚合、报警统计都会按区域树汇总。</span>
      </el-card>
    </div>
    <el-card class="modern-card" shadow="never">
      <template #header>行政区域树</template>
      <el-tree :data="regions" node-key="id" default-expand-all :props="{ label: 'name', children: 'children' }">
        <template #default="{ data }">
          <span class="tree-node">
            <strong>{{ data.name }}</strong>
            <small class="muted">ID: {{ data.id }} / code: {{ data.code }}</small>
          </span>
        </template>
      </el-tree>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { regionApi } from '../../api/modules';

const regions = ref<any[]>([]);

onMounted(async () => {
  regions.value = (await regionApi.tree()) as any[];
});
</script>

<style scoped>
.muted {
  margin-left: 8px;
  color: #9ca3af;
}

.tree-node {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.usage-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.usage-card {
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 18px;
}

.usage-card strong,
.usage-card span {
  display: block;
}

.usage-card strong {
  color: #0f172a;
}

.usage-card span {
  margin-top: 8px;
  color: #64748b;
  line-height: 1.7;
}

@media (max-width: 960px) {
  .usage-grid {
    grid-template-columns: 1fr;
  }
}
</style>
