<template>
  <BaseTable ref="tableRef" showIndex table-name="NODE_TASK_TEAM" :params="{projectNodeId:nodeLevel1Uuid}" :api="getProjectMemberListApi" >
  </BaseTable>
  <div class="organization">
    <!-- <div class="level" v-for="user in tableRef?.tableData" :key="user.id"> -->
    <div class="level">
      <div class="node">
        <div class="role">项目经理</div>
        <img src="./img/user.jpg" alt="头像">
        <div class="name">张三 </div>
        <div class="job-number">39145</div>
      </div>
    </div>
    <div class="level">
      <div class="node">
        <div class="name">仿真科长</div>
        <img src="./img/user.jpg" alt="头像">
        <div class="name">张三</div>
        <div class="job-number">39145</div>
      </div>
      <div class="node">
        <div class="name">仿真科长</div>
        <img src="./img/user.jpg" alt="头像">
        <div class="name">赵武 </div>
        <div class="job-number">19285</div>
      </div>
    </div>
    <div class="level">
      <div class="node">
        <div class="name">仿真工程师</div>
        <img src="./img/user.jpg" alt="头像">
        <div class="name">王五 </div>
        <div class="job-number">08145</div>
      </div>
      <div class="node">
        <div class="name">仿真工程师</div>
        <img src="./img/user.jpg" alt="头像">
        <div class="name">齐四 </div>
        <div class="job-number">08145</div>
      </div>
      <div class="node">
        <div class="name">仿真工程师</div>
        <img src="./img/user.jpg" alt="头像">
        <div class="name">周久 </div>
        <div class="job-number">08145</div>
      </div>
    </div>
  </div>
</template>
<script lang='ts' setup>
import { getProjectMemberListApi } from '@/api/project/node';
import BaseTable from '@/components/common/table/baseTable.vue';
import { ref } from 'vue';

defineProps<{
  nodeLevel1Uuid: string;
}>();

const tableRef = ref();

// NODE_TASK_TEAM
// const headData = ref<any[]>([
//   { title: '用户名', key: 'name', isShow: true, inputMode: 'input', type: 1, inForm: false, required: true, width: 200 },
//   { title: '工号', key: 'identity', isShow: true, inputMode: 'input', type: 1, inForm: false, required: true, width: 150 },
//   { title: '角色', key: 'role', isShow: true, inputMode: 'input', type: 1, inForm: false, required: true, width: 120 },
//   { title: '职位', key: 'position', isShow: true, inputMode: 'input', type: 1, inForm: false, required: true, width: 120 },
//   { title: '部门', key: 'department', isShow: true, inputMode: 'input', type: 1, inForm: false, required: true, width: 150 },
//   { title: '电话', key: 'phone', isShow: true, inputMode: 'input', type: 1, inForm: false, required: true },
//   { title: '邮箱', key: 'email', isShow: true, inputMode: 'input', type: 1, inForm: false, required: true },
// ]);

// const getProjectMemberListFun = async () => {
//   const res:any = await getProjectMemberListApi({
//     projectNodeId: props.nodeLevel1Uuid,
//   });
//   if (res.code === 200) {
//     console.log('res.data', res.data);
//     return res.data;
//   } else {
//     ElMessage.error('获取团队成员失败！');
//   }
// };
</script>
<style lang="scss" scoped>
.organization {
  height: 450px;
  overflow-y: auto;
}
.level {
    display: flex;
    justify-content: center;
    // margin-bottom: 40px;
    position: relative;
    margin-top: 20px;
    padding-bottom: 20px;
    border-bottom: 1px dashed var(--el-text-color-placeholder);
}

.level:last-child::after {
    display: none;
}
.node {
    background-color: var(--el-color-primary);
    color: #fff;
    padding: 10px;
    border-radius: 4px;
    text-align: center;
    width: 90px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin: 0 20px;
}
.node img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-bottom: 5px;
    object-fit: cover;
    /* 实际项目中替换为真实头像路径，这里用占位图 */
    background-color: #fff;
    display: block;
    margin: 0 auto 5px;
}
.node .role {
    font-size: 14px;
    margin-bottom: 2px;
}
.node .name {
    font-size: 12px;
    color: #e6f7ff;
}
.node .job-number {
    font-size: 12px;
    color: #e6f7ff;
}
</style>
