<!--
 * @Author: ysh
 * @Date: 2024-02-27 14:49:15
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-03-19 10:11:01
-->

<template>
  <div class="project-wrapper">

    <el-tabs tabPosition="left" type="card" class="tabs-border" v-model="activeName">
      <el-tab-pane label="项目登记">
        <addproject :disable="taskName != '项目登记'"></addproject>
      </el-tab-pane>
      <el-tab-pane label="项目安排">
        <arrangeProject :disable="false"></arrangeProject>
      </el-tab-pane>
      <el-tab-pane label="技术交底"></el-tab-pane>
      <el-tab-pane label="安全交底"></el-tab-pane>
      <el-tab-pane label="经营审核"></el-tab-pane>
      <el-tab-pane label="分管审核"></el-tab-pane>
      <el-tab-pane label="项目生产"></el-tab-pane>
      <el-tab-pane label="质量检查"></el-tab-pane>
      <el-tab-pane label="成果归档"></el-tab-pane>
    </el-tabs>


  </div>
</template>

<script>
import { listProject, submitProject, modifyProject, delProject } from "@/api/oa/project/project"
import { listDept } from '@/api/system/dept'
import { listUser, getUser } from '@/api/system/user'
import addproject from "./addproject.vue"
import arrangeProject from "./arrangeProject.vue"
export default {
  props: {
    taskName: {
      type: String
    }
  },
  components: {
    addproject,
    arrangeProject
  },
  data() {
    return {
      activeName: taskName,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        projectNumber: '',
        projectLeader: '',
        projectLeaderName: undefined,
        projectName: '',
      },
      projectList: [],
      total: 0,
      loading: true,
      addOpen: false,
      modifyOpen: false,
      title: '',
      addForm: {},
      rules: {
        projectNumber: [{ required: true, message: '请输入项目编号', trigger: 'blur' }],
        projectName: [{ required: true, message: '请输入项目名称', trigger: 'blur' }]
      },
      peopleVisible: false,
      peopleForm: {
        deptId: '',
        deptList: [],
        userId: '',
        userList: []
      },
      workList: [{
        content: '',
        scale: '',
        unit: '',
        workload: '',
        deadline: '',
        remark: ''
      }],
    }
  },
  created() {
    this.getList();
    this.getDeptList();
  },
  methods: {
    // 查询项目列表
    getList() {
      this.loading = true
      listProject(this.queryParams).then(response => {
        this.projectList = [];
        for (let p of response.rows) {
          if (p.projectLeader != null) {
            getUser(Number(p.projectLeader)).then(res => {
              p.projectLeaderName = res.data.nickName;
            })
          }
          this.projectList.push(p);
        }
        this.total = response.total;
        this.loading = false;
      })
    },
    getDeptList() {
      listDept({
        deptName: undefined,
        status: undefined
      }).then(res => {
        this.peopleForm.deptList = res.data
      })
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    handleAdd() {
      this.title = '新增项目'
      this.addOpen = true
    },
    handleUpdate(row) {
      debugger
      this.addForm = row;
      this.title = '修改项目信息';
      this.addOpen = true;
    },
    handleDelete(row) {
      const projectIds = row.projectId || this.ids;
      const projectNumbers = row.projectNumber || this.ids;
      this.$modal.confirm('是否确认删除项目编号为"' + projectNumbers + '"的数据项？').then(function () {
        return delProject(projectIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => { });
    },
    confirmAddForm() {
      this.addForm.workList = this.workList;
      let formData = new FormData();
      let form = JSON.stringify(this.addForm);
      formData.append("form", form);
      console.log(this.title);
      if (this.title == '新增项目')
        submitProject(formData).then(response => {
          this.$modal.msgSuccess("新增成功");
          this.addOpen = false;
          this.getList();
        });
      else
        modifyProject(formData).then(response => {
          this.$modal.msgSuccess("修改成功");
          this.addOpen = false;
          this.getList();
        });
    },
    // 人员选择
    choosePeople() {
      this.peopleVisible = true;
    },
    // 改变部门选择
    handleChangeDept(deptId) {
      this.peopleForm.userId = '';
      listUser({ pageSize: 999999, deptId }).then(res => {
        console.log(res);
        this.peopleForm.userList = res.rows
      })
    },
    // 确定项目负责人
    confirmPeople() {
      this.addForm.projectLeader = this.peopleForm.userId;
      this.addForm.projectLeaderName = this.tagLeader()
      this.peopleVisible = false
    },
    tagLeader() {
      if (this.addForm.projectLeader == '' || this.addForm.projectLeader == undefined || this.addForm.projectLeader == null) {
        return undefined
      } else {
        for (let user of this.peopleForm.userList) {
          if (this.addForm.projectLeader == user.userId) {
            return user.nickName
          }
        }
      }
    },
    cancel() {
      this.peopleForm.deptId = '';
      this.peopleForm.userId = '';
      this.addOpen = false;
      this.addForm = {}
    },
    addWorkList() {
      this.workList.push({
        content: '',
        scale: '',
        unit: '',
        workload: '',
        deadline: '',
        remark: ''
      });
    },
    deletWorkItem(index) {
      let arr = this.workList
      if (arr.length == 1) {
        return
      }
      if (index >= 0 && index < arr.length) {
        arr.splice(index, 1);
      }
    },
    cancelChoosePeople() {
      this.peopleForm.deptId = '';
      this.peopleForm.userId = '';
      this.peopleVisible = false;
    }
  },
}
</script>

<style lang="scss" scoped>
.project-wrapper {
  padding: 25px;
}

.table-header {
  background-color: #f5f5f5;
}

.card-header {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
}

table {
  /*居中*/
  margin: 0 auto;
  /*边框*/
  /* border: 1px solid black; */
  text-align: center;
  border-collapse: collapse;
  /*设置背景颜色*/
  /* background-color: #bfa; */
}

.tabs-border {
  border: 1px solid #DCDFE6;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
}


::v-deep .el-tabs__item {
  line-height: 60px;
  height: 60px;
}
</style>./arrangeProject.vue