<template>
  <div class="background">
    <div class="tree">
      <TreeChart :json="treeData">
        <template v-slot:node="{ node }">
          <div class="node-info">
            <img :src="node.image_url" alt="image" class="node-image" />
            <div class="info">
              <div class="name">{{ node.name }}</div>
              <button @click="toggleNode(node)">
                {{ node.expanded ? '隐藏下一代' : '显示下一代' }}
              </button>
            </div>
          </div>
          <div v-if="node.expanded" class="children">
            <!-- 子节点展示 -->
            <TreeChart :json="node.children" v-if="node.children && node.children.length"/>
          </div>
        </template>
      </TreeChart>
    </div>
  </div>
</template>

<script>
import TreeChart from "vue-tree-chart-3";

export default {
  components: {
    TreeChart
  },
  data() {
    return {
      treeData: {
        name: '爸爸',
        image_url: require('@/assets/pictures/space/Inbase.png'),
        expanded: true,  // 默认展开
        children: [
          {
            name: 'children1',
            image_url: "https://static.refined-x.com/avat1.jpg",
            expanded: true,
          },
          {
            name: 'children2',
            image_url: "https://static.refined-x.com/avat2.jpg",
            expanded: true,
            mate: [{
              name: 'mate',
              image_url: "https://static.refined-x.com/avat3.jpg"
            }],
            children: [
              {
                name: 'grandchild',
                image_url: "https://static.refined-x.com/avat.jpg"
              },
              {
                name: 'grandchild2',
                image_url: "https://static.refined-x.com/avat1.jpg",
                expanded: true,
                children:[
                  {
                    name:'dd',
                    image_url: "https://static.refined-x.com/avat1.jpg",
                  }
                ]
              },
              {
                name: 'grandchild3',
                image_url: "https://static.refined-x.com/avat2.jpg"
              },
              {
                name:'hh',
                image_url: "https://static.refined-x.com/avat2.jpg"
              }
            ]
          },
          {
            name: 'children3',
            image_url: "https://static.refined-x.com/avat.jpg"
          }
        ]
      }
    };
  },
  methods: {
    toggleNode(node) {
      node.expanded = !node.expanded; // 切换展开/收起
    }
  }
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.background {
  display: flex;
  align-content: center;
  justify-content: center;
  background-image: url("../../assets/pictures/space/Inbase3.png");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  height: 100vh;
  width: 100%;
}
.tree {
  display: flex;
  position: absolute;
  background: rgba(255, 255, 255, 0.8);
  width: 1100px;
  height: 700px;
  border-radius: 30px;
  margin-top: 30px;
  margin-left: 240px;
  padding-top: 100px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.node-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.node-image {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-bottom: 10px;
}

.info {
  font-size: 14px;
}

.children {
  margin-top: 20px;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
}
</style>
