<script setup>
defineProps({
  node: {
    type: Object,
    required: true,
  },
})

const emits = defineEmits(['navClick'])

const onClick = (node) => emits('navClick', node)
</script>

<template>
  <li class="footer-nav__item">
    <div class="item-label" @click="onClick(node)">
      {{ node.label }}
    </div>

    <!-- 递归渲染子节点 -->
    <ul v-if="node.children?.length" class="footer-nav__sub">
      <NavNode
        class="sub-item"
        v-for="child in node.children"
        :key="child.id"
        :node="child"
        @nav-click="onClick"
      />
    </ul>
  </li>
</template>

<style lang="scss" scoped>
.footer-nav__item {
  .item-label {
    font-family: 'PingFang SC';
    font-weight: 400;
    font-size: $nav_font_size;
    color: $white;
    user-select: auto;
    cursor: pointer;
    transition: all 0.3s ease;
    &:hover {
      -webkit-transform: translateY(-2px);
      transform: translateY(-2px);
    }
  }
}
.footer-nav__sub {
  list-style: none;
  padding: 0;
  margin-top: 40px;
  .sub-item {
    margin-bottom: 24px;
    .item-label {
      font-family: 'PingFang SC';
      font-weight: 400;
      font-size: 14px;
      color: #999999;
    }
  }
}
</style>
