<template>
  <el-card shadow="never" class="tree-card" v-loading="loading">
    <template #header>
      <div class="tree-header">
        <div class="tree-title">位移设备树</div>
        <div class="tree-subtitle">点击设备组查看位移横向对比，点击单台设备查看位移趋势与异常。</div>
      </div>
    </template>
    <el-scrollbar class="device-tree-scroll">
      <el-tree
        :data="treeData"
        :props="treeProps"
        default-expand-all
        highlight-current
        :expand-on-click-node="false"
        @node-click="emit('nodeClick', $event)"
      />
    </el-scrollbar>
  </el-card>
</template>

<script setup lang="ts">
defineProps<{
  loading: boolean;
  treeData: any[];
  treeProps: { label: string; children: string };
}>();

const emit = defineEmits<{
  nodeClick: [any];
}>();
</script>

<style scoped lang="scss">
.tree-card {
  height: 100%;
  border-radius: 16px;
}

.tree-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tree-title {
  font-size: 16px;
  font-weight: 700;
  color: #1f2329;
}

.tree-subtitle {
  font-size: 12px;
  line-height: 1.5;
  color: #86909c;
}

.device-tree-scroll {
  max-height: clamp(320px, 60vh, 760px);
  padding-right: 4px;
}

@media (max-width: 992px) {
  .device-tree-scroll {
    max-height: 320px;
  }
}
</style>
