<template>
  <div class="info-grid">
    <table class="info-table">
      <tbody>
        <tr>
          <td>项目名称</td>
          <td>{{ nodeInfo.nodeName }}</td>
        </tr>
        <tr>
          <td>项目经理</td>
          <td>{{ nodeInfo.pMemberNames }}</td>
        </tr>
        <tr>
          <td>项目状态</td>
          <td>
            <span :class="['status-badge', 'status-' + nodeInfo.exeStatus]">
              {{ PROJECT_EXE_STATUS.O[nodeInfo.exeStatus] }}
            </span>
          </td>
        </tr>
        <tr>
          <td>计划开始时间</td>
          <td>{{ nodeInfo.beginTime }}</td>
        </tr>
        <tr>
          <td>当前阶段</td>
          <td :class="{ 'empty-value': !nodeInfo.currentStage }">
            {{ nodeInfo.currentStage || '未设置' }}
          </td>
        </tr>
      </tbody>
    </table>

    <table class="info-table">
      <tbody>
        <tr>
          <td>项目代号</td>
          <td>{{ nodeInfo.nodeCode }}</td>
        </tr>
        <tr>
          <td>创建人</td>
          <td>{{ nodeInfo?.creatorObj?.nickname }}</td>
        </tr>
        <tr>
          <td>创建时间</td>
          <td>{{ nodeInfo.createTime }}</td>
        </tr>
        <tr>
          <td>计划结束时间</td>
          <td>{{ nodeInfo.endTime }}</td>
        </tr>
        <tr>
          <td>备注</td>
          <td>{{ nodeInfo.description }}</td>
        </tr>
      </tbody>
    </table>
  </div>
  <!-- <el-descriptions title="" :column="2" border>
    <el-descriptions-item label="项目名称">{{ nodeInfo.nodeName }}</el-descriptions-item>
    <el-descriptions-item label="项目代号">{{ nodeInfo.nodeCode }}</el-descriptions-item>
    <el-descriptions-item label="项目经理">{{ nodeInfo.pMemberNames }}</el-descriptions-item>
    <el-descriptions-item label="创建人">{{ nodeInfo.creator }}</el-descriptions-item>
    <el-descriptions-item label="项目状态">{{ nodeInfo.status }}</el-descriptions-item>
    <el-descriptions-item label="创建时间">{{ nodeInfo.createTime }}</el-descriptions-item>
    <el-descriptions-item label="计划开始时间">{{ nodeInfo.beginTime }}</el-descriptions-item>
    <el-descriptions-item label="计划结束时间">{{ nodeInfo.endTime }}</el-descriptions-item>
    <el-descriptions-item label="当前阶段">{{ nodeInfo.currentPhase }}</el-descriptions-item>
    <el-descriptions-item label="备注">{{ nodeInfo.description }}</el-descriptions-item>
  </el-descriptions> -->
</template>

<script lang="ts" setup>
import { getNodeDetailApi } from '@/api/project/node';
import { onMounted, reactive, watch } from 'vue';
import { useDict } from '@/utils/useDict';

const props = defineProps(
  {
    nodeId: {
      type: String,
      default: '',
    },
  }
);

const { PROJECT_EXE_STATUS } = useDict('PROJECT_EXE_STATUS');

const emits = defineEmits(['update:projectInfo']);
const nodeInfo = reactive<any>({
  nodeName: '',
  creator: '',
  creatorObj: '',
  exeStatusName: '',
  exeStatus: '',
  nodeCode: '',
  createTime: '',
  description: '',
  memberList: [],
  pMemberNames: '',
  beginTime: '',
  currentPhase: '',
  endTime: '',
});

const getNodeDetailFun = async() => {
  const res:any = await getNodeDetailApi({ projectNodeId: props.nodeId });
  if (res.code === 200) {
    for (const key in nodeInfo) {
      // if (key === 'exeStatus') {
      //   nodeInfo[key] = res.data[key];
      //   nodeInfo.exeStatusName = res.data[key];
      // } else {
      nodeInfo[key] = res.data[key];
      // }
    }
    if (Array.isArray(res.data.memberList)) {
      nodeInfo.pMemberNames = res.data.memberList.map((item:any) => {
        return item.nickname || item.name || item.realName;
      }).join();
    }
    emits('update:projectInfo', res.data);
  }
};

const updateBaseInfo = (info:any) => {
  for (const key in nodeInfo) {
    if (info[key]) {
      nodeInfo[key] = info[key];
    }
  }
};

const refresh = () => {
  getNodeDetailFun();
};

onMounted(() => {
  // getNodeDetailFun();

});
defineExpose({
  updateBaseInfo,
  refresh,
});
watch(
  () => props.nodeId,
  () => {
    getNodeDetailFun();
  },
  { immediate: true }
);
</script>

<style scoped>
       .info-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 24px;
            margin-top: 20px;
        }

        .info-table {
            width: 100%;
            border-collapse: collapse;
        }

        .info-table tr {
            border-bottom: 1px solid #e9ecef;
            transition: background-color 0.2s;
        }

        .info-table tr:last-child {
            border-bottom: none;
        }

        .info-table tr:hover {
            background-color: rgba(0, 0, 0, 0.02);
        }

        .info-table td {
            padding: 12px 8px;
            vertical-align: middle;
        }

        .info-table td:first-child {
            width: 120px;
            color: #8d99ae;
            font-weight: 500;
            font-size: 14px;
        }

        .info-table td:nth-child(2) {
            color: #2b2d42;
            font-weight: 500;
            font-size: 14px;
        }

        .status-badge {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 500;
        }

        .status-3 {
            background-color: rgba(76, 201, 240, 0.1);
            color: #4cc9f0;
        }

        .status-1 {
            background-color: rgba(67, 97, 238, 0.1);
            color: #4361ee;
        }

        .status-5 {
            background-color: rgba(248, 37, 133, 0.1);
            color: #f72585;
        }

        .status-2 {
            background-color: rgba(248, 150, 30, 0.1);
            color: #f8961e;
        }
        .status-0 {
            background-color: rgba(248, 150, 30, 0.1);
            color: #8d99ae;
        }

        .empty-value {
            color: #8d99ae !important;
            font-style: italic;
        }
</style>
