<template>
  <div class="family-tree">
    <!-- 工具栏 -->
    <div class="toolbar">
      <el-button @click="zoomIn">放大</el-button>
      <el-button @click="zoomOut">缩小</el-button>
      <el-button @click="resetZoom">重置</el-button>
    </div>
    
    <!-- 树图容器 -->
    <div class="tree-wrapper" ref="treeWrapper">
      <TreeChart 
        :json="treeData"
        :collapse-enabled="true"
        :horizontal-gap="60"
        :vertical-gap="60"
        node-text="name"
        class="tree-chart"
      >
        <template #node="{ node }">
          <div 
            class="custom-node" 
            :class="{ 'is-current': node.isCurrentUser }"
          >
            <!-- 头像区域 -->
            <div class="avatar-wrapper">
              <el-avatar 
                :size="50" 
                :src="node.avatar"
                @error="() => true"
              />
            </div>
            
            <!-- 信息区域 -->
            <div class="info-wrapper">
              <div class="name">{{ node.name }}</div>
              <div class="relation">{{ node.relation }}</div>
              <div class="birth-date">{{ node.birthDate }}</div>
            </div>
          </div>
        </template>
      </TreeChart>
    </div>
  </div>
</template>

<script>
import TreeChart from 'vue-tree-chart-3'
import { ref } from 'vue'

export default {
  components: { TreeChart },
  
  setup() {
    const treeWrapper = ref(null)
    const scale = ref(1)
    
    // 缩放功能
    const zoomIn = () => {
      scale.value = Math.min(scale.value + 0.1, 2)
      updateScale()
    }
    
    const zoomOut = () => {
      scale.value = Math.max(scale.value - 0.1, 0.5)
      updateScale()
    }
    
    const resetZoom = () => {
      scale.value = 1
      updateScale()
    }
    
    const updateScale = () => {
      if (treeWrapper.value) {
        treeWrapper.value.style.transform = `scale(${scale.value})`
      }
    }
    
    return {
      treeWrapper,
      zoomIn,
      zoomOut,
      resetZoom
    }
  },
  
  data() {
    return {
      treeData: {
        name: '爷爷',
        avatar: '../../assets/pictures/space/post1.png',
        relation: '祖父',
        birthDate: '1940-01-01',
        children: [
          {
            name: '父亲',
            avatar: 'https://via.placeholder.com/150',
            relation: '父亲',
            birthDate: '1965-01-01',
            children: [
              {
                name: '我',
                avatar: '/avatars/me.jpg',
                relation: '本人',
                birthDate: '1990-01-01',
                isCurrentUser: true,
                children: []
              }
            ]
          }
        ]
      }
    }
  }
}
</script>

<style scoped>
.family-tree {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.toolbar {
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.tree-wrapper {
  flex: 1;
  overflow: auto;
  padding: 20px;
  transform-origin: center center;
  transition: transform 0.3s;
}

.custom-node {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: white;
  min-width: 150px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.is-current {
  border: 2px solid #409EFF;
  background: #ecf5ff;
}

.avatar-wrapper {
  margin-bottom: 8px;
  text-align: center;
}

.info-wrapper {
  text-align: center;
}

.name {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 4px;
}

.relation {
  color: #666;
  font-size: 14px;
  margin-bottom: 2px;
}

.birth-date {
  color: #999;
  font-size: 12px;
}
</style>