<script setup lang="ts">
import { computed } from 'vue';
import { useUserStore } from '@/store/modules/user';
import { storeToRefs } from 'pinia';

// 获取用户存储
const userStore = useUserStore();

// 使 selectedProject 保持响应式
const { selectedProject } = storeToRefs(userStore);

// 模拟不同项目的施工人员数据
const projectWorkers = [
  {
    projectId: '1897160897167638529',
    workers: [
      { id: 1, name: '张三', role: '工头', phone: '13800000001' },
      { id: 2, name: '李四', role: '电工', phone: '13800000002' },
      { id: 3, name: '王五', role: '焊工', phone: '13800000003' }
    ]
  },
  {
    projectId: '1897161054676336641',
    workers: [
      { id: 4, name: '赵六', role: '木工', phone: '13800000004' },
      { id: 5, name: '孙七', role: '油漆工', phone: '13800000005' },
      { id: 6, name: '周八', role: '瓦工', phone: '13800000006' }
    ]
  },
  {
    projectId: '1897161104060071938',
    workers: [
      { id: 7, name: '吴九', role: '钢筋工', phone: '13800000007' },
      { id: 8, name: '郑十', role: '施工员', phone: '13800000008' },
      { id: 9, name: '冯十一', role: '安全员', phone: '13800000009' }
    ]
  }
];

// 计算当前项目的施工人员
const workers = computed(() => {
  const project = projectWorkers.find((p) => p.projectId === selectedProject.value?.id);
  return project ? project.workers : [];
});
</script>
<template>
  <div class="container">
    <h1>施工人员列表</h1>
    <div class="project-info">
      <span class="label">当前选中的项目：</span>
      <span class="project-name">{{ selectedProject?.name || '未选择项目' }}</span>
    </div>

    <div class="workers-list">
      <h2>施工人员</h2>
      <ul v-if="workers.length > 0">
        <li v-for="worker in workers" :key="worker.id">
          <span class="worker-name">{{ worker.name }}</span>
          <span class="worker-role">（{{ worker.role }}）</span>
          <span class="worker-phone">{{ worker.phone }}</span>
        </li>
      </ul>
      <p v-else class="no-workers">暂无施工人员数据</p>
    </div>
  </div>
</template>
<style scoped lang="scss">
.container {
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  text-align: center;
}

h1 {
  font-size: 24px;
  color: #333;
  margin-bottom: 15px;
}

.project-info {
  padding: 10px;
  background: #fff;
  border-radius: 8px;
  display: inline-block;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.label {
  font-size: 16px;
  color: #666;
}

.project-name {
  font-size: 18px;
  font-weight: bold;
  color: #007bff;
  margin-left: 5px;
}

.workers-list {
  margin-top: 20px;
  background: #fff;
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  text-align: left;
}

h2 {
  font-size: 20px;
  color: #444;
  margin-bottom: 10px;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  padding: 8px 0;
  border-bottom: 1px solid #ddd;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.worker-name {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.worker-role {
  font-size: 14px;
  color: #666;
}

.worker-phone {
  font-size: 14px;
  color: #888;
}

.no-workers {
  font-size: 16px;
  color: #999;
  margin-top: 10px;
}
</style>
