<template>
  <div class="container">
    <h1>项目结项报告</h1>
    <p><strong>项目名称：</strong> {{ project.projectName }}</p>
    <p><strong>项目总成本：</strong> ¥{{ project.funds }}</p>
    <p><strong>项目用时：</strong> {{ (new Date(project.postponeTime)-new Date(project.beginTime))/1000/60/60/24 }}天</p>

    <div v-for="(item,index) in stepsList" :key="index">
      <h2>{{item.dictLabel}}-人员情况</h2>
      <div v-for="(task,index) in item.taskList" :key="index">
        <h3>负责人-{{task.collaborator}}</h3>

        <table>
          <tr>
            <th>姓名</th>

            <th>工作时长 (天)</th>
            <th>人力成本 (元/天)</th>
            <th>总成本 (元)</th>
          </tr>
          <tr v-for="member in task.workerList" :key="member.name">
            <td>{{ member.nickName }}</td>

            <td>{{ member.workTime }}</td>
            <td>{{ member.laborCost }}</td>
            <td>{{ (member.workTime * member.laborCost).toLocaleString() }}</td>
          </tr>
          <tr class="summary">
            <td colspan="3">总计</td>
            <td>¥{{ task.projectCostTotal }}</td>
          </tr>
        </table>
      </div>

    </div>


    <div class="footer">
      <p>© 2024 项目结项报告 | 由项目团队生成</p>
    </div>
  </div>
</template>
<script>

import {getProject} from "@/api/oa/project";
import {getTaskByDictType} from "@/api/oa/task";

export default {
  name: "closure",
  data() {
    return {
      // 项目名
      projectName: "AI 数据分析系统开发",

      // 项目涉及人员
      teamMembers: [
        {name: '李某某', role: '项目经理', hours: 160, rate: 300, completed: '已完成'},
        {name: '王某', role: '前端开发', hours: 150, rate: 250, completed: '已完成'},
        {name: '张某', role: '后端开发', hours: 170, rate: 280, completed: '进行中'},
        {name: '陈某', role: '测试工程师', hours: 140, rate: 220, completed: '已完成'},
        {name: '赵某', role: '产品经理', hours: 130, rate: 350, completed: '已完成'}
      ],

      // 项目花费
      projectCost: 990000,
      totalHumanCost: 10000,
      project:{},
      stepsList:[],
      active:{}
    }
  },
  created() {

    this.projectId = this.$route.params.projectId;

    this.getProject()
    // this.getTaskByDictType(this.projectId);
  },
  methods:{
    getProject(){
      getProject(this.projectId).then(response => {
        this.project = response.data;
      })
    },

    // /**new-工作类型进度**/
    // getTaskByDictType(pid) {
    //   getTaskByDictType(pid).then(res => {
    //     //排序
    //     this.stepsList = res.data.data.taskList.sort((a, b) => parseInt(a.dictValue) - parseInt(b.dictValue));
    //     this.active = res.data.data.active;
    //   })
    // },
  }
}
</script>

<style scoped lang="scss">
* {
  margin: 15px auto;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
  padding: 20px;
}

.container {
  max-width: 800px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin: auto;
}

h1 {
  text-align: center;
  color: #333;
  margin-bottom: 30px;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

th, td {
  padding: 12px;
  border: 1px solid #ddd;
  text-align: center;
}

th {
  background-color: #007bff;
  color: #fff;
}

tr:nth-child(even) {
  background-color: #f9f9f9;
}

.summary {
  font-weight: bold;
  color: #007bff;
}

.footer {
  text-align: center;
  margin-top: 30px;
  font-size: 14px;
  color: #666;
}

</style>
