<template>
  <div class="background">
    <div class="tree">
      <!-- 操作按钮 -->
      <div class="operation-bar">
        <el-button type="primary" @click="showAddDialog()">添加祖辈节点</el-button>
        <el-button type="success" @click="saveTreeData">保存族谱</el-button>
      </div>

      <!-- 族谱树 -->
      <TreeChart :json="treeData">
        <template v-slot:node="{ node }">
          <div class="node-info" :class="{ 'is-current-user': node.isCurrentUser }">
            <img :src="node.image_url" alt="image" class="node-image" @click="handleNodeClick(node)" />
            <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>

      <!-- 节点编辑弹窗 -->
      <el-dialog 
        :title="dialogTitle" 
        v-model="dialogVisible"
        width="500px"
        :destroy-on-close="true"
      >
        <el-form :model="currentNode" label-width="100px">
          <el-form-item label="姓名">
            <el-input v-model="currentNode.name"></el-input>
          </el-form-item>
          <el-form-item label="辈分">
            <el-select v-model="currentNode.generation">
              <el-option label="祖辈" value="grandparent"></el-option>
              <el-option label="父辈" value="parent"></el-option>
              <el-option label="同辈" value="sibling"></el-option>
              <el-option label="子辈" value="child"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="头像">
            <el-upload
              class="avatar-uploader"
              :action="uploadUrl"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
            >
              <img v-if="currentNode.image_url" :src="currentNode.image_url" class="avatar">
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </el-form-item>
          <el-form-item label="是否本人">
            <el-switch v-model="currentNode.isCurrentUser"></el-switch>
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveNode">确定</el-button>
          <el-button type="danger" v-if="currentNode.id" @click="deleteNode">删除</el-button>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import TreeChart from "vue-tree-chart-3";
import { ElMessage } from 'element-plus';
import request from '@/utils/axiosConfig';

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"
          }
        ]
      },
      dialogVisible: false,
      dialogTitle: '',
      currentNode: {
        id: '',
        name: '',
        generation: '',
        image_url: '',
        isCurrentUser: false,
        expanded: true,
        children: []
      },
      uploadUrl: '',
    };
  },
  created() {
    this.fetchTreeData();
  },
  methods: {
    // 获取族谱数据
    async fetchTreeData() {
      try {
        const res = await request.get('/api/family-tree');
        if (res.code === 0 && res.data) {
          this.treeData = res.data;
        }
      } catch (error) {
        ElMessage.error('获取族谱数据失败');
      }
    },

    // 切换节点展开/收起
    toggleNode(node) {
      node.expanded = !node.expanded;
    },

    // 点击节点
    handleNodeClick(node) {
      this.dialogTitle = '编辑成员';
      this.currentNode = { ...node };
      this.dialogVisible = true;
      console.log('Node clicked:', node);
    },

    // 显示添加节点弹窗
    showAddDialog() {
      this.dialogTitle = '添加成员';
      this.currentNode = {
        id: '',
        name: '',
        generation: '',
        image_url: '',
        isCurrentUser: false,
        expanded: true,
        children: []
      };
      this.dialogVisible = true;
    },

    // 头像上传成功回调
    handleAvatarSuccess(response) {
      if (response && response.url) {
        this.currentNode.image_url = response.url; // 更新图片 URL
        console.log('上传头像的url：' + response)
      }
    },

    // 保存节点
    async saveNode() {
      try {
        const url = this.currentNode.id ? 
          `/api/family-tree/node/${this.currentNode.id}` : 
          '/api/family-tree/node';
        const method = this.currentNode.id ? 'put' : 'post';
        
        const res = await request[method](url, this.currentNode);
        if (res.code === 0) {
          ElMessage.success('保存成功');
          this.dialogVisible = false;
          await this.fetchTreeData();
        }
      } catch (error) {
        ElMessage.error('保存失败');
      }
    },

    // 删除节点
    async deleteNode() {
      try {
        const res = await request.delete(`/api/family-tree/node/${this.currentNode.id}`);
        if (res.code === 0) {
          ElMessage.success('删除成功');
          this.dialogVisible = false;
          await this.fetchTreeData();
        }
      } catch (error) {
        ElMessage.error('删除失败');
      }
    },

    // 保存整个族谱
    async saveTreeData() {
      try {
        const res = await request.put('/api/family-tree', this.treeData);
        if (res.code === 0) {
          ElMessage.success('保存成功');
        }
      } catch (error) {
        ElMessage.error('保存失败');
      }
    }
  }
};
</script>

<style scoped>
.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;
  min-height: calc(100vh - 60px);
  width: 100%;
}

.tree {
  display: flex;
  /* position: absolute; */
  flex-direction: column;
  background: rgba(255, 255, 255, 0.8);
  width: 1100px;
  /* height: 700px;  */
  border-radius: 30px;
  margin-top: 30px;
  margin-left: 240px;
  /* padding: 20px; */
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.operation-bar {
  margin-bottom: 20px;
  text-align: center;
}

.node-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  padding: 10px;
  border-radius: 8px;
  transition: all 0.3s;
}

.node-info:hover {
  background: rgba(0, 0, 0, 0.1);
}

.is-current-user {
  background: rgba(64, 158, 255, 0.1);
  border: 2px solid #409EFF;
}

.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;
}

.avatar-uploader {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>
