<template>
  <div class="project-list">
    <div class="table-actions mb10" style="text-align: right;">
      <el-button
        type="primary"
        size="mini"
        @click="addProject"
        v-hasPermi="['project:list:add']"
        style="height: 30px;"
        >+ 新建项目</el-button
      >
    </div>
    <div class="search-bar">
      <el-form
        :inline="true"
        :model="searchForm"
        class="demo-form-inline"
        size="small"
      >
        <el-form-item label="项目名称" class="form-item">
          <el-input v-model="searchForm.projectName" placeholder="项目名称" />
        </el-form-item>
        <el-form-item label="负责人" class="form-item">
          <el-input
            v-model="searchForm.projectLeaderName"
            placeholder="负责人"
            readonly
            @click.native="openUserSelectDialog"
            ><el-button slot="append" icon="el-icon-s-custom"></el-button
          ></el-input>
        </el-form-item>
        <el-form-item label="项目状态" class="form-item">
          <el-select
            v-model="searchForm.projectState"
            placeholder="项目状态"
            clearable
          >
            <el-option
              v-for="item in statusList"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item class="formBtn">
          <el-button type="primary" size="medium" @click="onSearch">查询</el-button>
          <el-button @click="onReset" size="medium">重置</el-button>
        </el-form-item>
      </el-form>
    </div>


    <div class="f1 df">
      <CustomTable
        :columns="columns"
        :tableData="tableData"
        :total="total"
        :show-selection="false"
        :show-index="true"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        tableHeight="510px"
        ref="customTableRef"
      >
        <template slot="operation" slot-scope="{ row }">
          <div class="operation-buttons">
            <el-button
              @click="handleDemand(row)"
              type="text"
              size="mini"
              v-hasPermi="['project:list:demand']"
              >需求管理</el-button
            >
            <el-button
              @click="handleEdit(row)"
              type="text"
              size="mini"
              v-hasPermi="['project:list:eidt']"
              >编辑</el-button
            >
            <el-button
              type="text"
              size="mini"
              @click="handleDelete(row)"
              v-hasPermi="['project:list:delete']"
              style="color: #666;"
              >删除</el-button
            >
          </div>
        </template>
      </CustomTable>
    </div>
    <SelectUser
      :dialogVisible="userSelectDialogVisible"
      :multiSelect="false"
      :currentSelectedUser="currentSelectedUser"
      @confirm="handleUserConfirm"
      @close="handleUserClose"
    />
  </div>
</template>

<script>
import CustomTable from "@/components/CustomTable.vue";
import SelectUser from "@/components/SelectUser.vue";
import { projectApi, systemApi } from "@/utils/api";

export default {
  components: {
    CustomTable,
    SelectUser,
  },
  data() {
    return {
      searchForm: {
        projectName: "",
        projectLeaderName: "",
        projectLeader: "",
        projectState: "",
      },
      columns: [
        { prop: "projectName", label: "项目名称", width: 300 },
        { prop: "projectCode", label: "项目编号", width: 200 },
        { prop: "projectLeaderName", label: "负责人" },
        { prop: "budgetDate", label: "预计工时(天)" },
        {
          prop: "startDate",
          label: "开始时间",
          type: "status",
          callback: (data) => data?.split(" ")[0],
        },
        {
          prop: "endDate",
          label: "结束时间",
          type: "status",
          callback: (data) => data?.split(" ")[0],
        },
        {
          prop: "projectState",
          label: "项目状态",
          type: "status",
          callback: (value) => {
            let status = this.statusList.find(
              (ele) => ele.dictValue == value
            )?.dictLabel||'';
            let color = "#333";
            switch (status) {
              case "待启动":
                color = "#999999"; // 橙色
                break;
              case "进行中":
                color = "#FF7D00"; // 红色
                break;
              case "已完成":
                color = "#50B6AA"; // 绿色
                break;
              case "#50B6AA":
                color = "#999999"; // 红色
                break;
              default:
                color = "#333"; // 默认白色
                break;
            }
            return `<span style="color: ${color}">${status}</span>`;
          },
        },
        { prop: "teamNum", label: "参与项目人数", width: 100 },
        { prop: "createByName", label: "项目创建人" },
        {
          prop: "operation",
          label: "操作",
          width: "250",
          fixed: "right",
          className: "operation-column",
        },
      ],
      tableData: [],
      total: 0,
      userSelectDialogVisible: false,
      currentSelectedUser: [],
      pageNum: 1, // 当前页码
      pageSize: 10, // 每页条数
      statusList: [],
    };
  },
  methods: {
    onSearch() {
      this.fetchProjectList();
    },
    onReset() {
      Object.keys(this.searchForm).forEach((key) => {
        this.searchForm[key] = "";
      });
      this.currentSelectedUser = [];
      this.$refs.customTableRef.handleCurrentChange(1);
      this.fetchProjectList();
    },
    addProject() {
      this.$router.push({
        path: "/project/detail",
      });
    },
    handleDemand(row){
      this.$router.push({
        path: "/demandManage",
        query: { id: row.projectId,projectName:row.projectName },
      });
      
    },
    handleEdit(row) {
      this.$router.push({
        path: "/project/detail",
        query: { id: row.projectId },
      });
    },
    handleDelete(row) {
      this.currentDeleteItem = row;
      this.$modal.confirm(`是否确认删项目"${row.projectName}"`).then(() => {
        return this.confirmDelete(row.menuId);
      });
    },
    async confirmDelete() {
      await projectApi.deleteProject(this.currentDeleteItem.projectId);
      this.deleteDialogVisible = false;
      this.currentDeleteItem = null;
      this.$message.success("删除成功");
      this.fetchProjectList();
    },
    fetchProjectList() {
      projectApi
        .listProject({
          ...this.searchForm,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
        })
        .then((res) => {
          this.tableData = res.rows;
          this.total = res.total;
        });
    },
    handleSizeChange(size) {
      this.pageSize = size;
      this.pageNum = 1; // 重置为第一页
      this.fetchProjectList();
    },
    handleCurrentChange(page) {
      this.pageNum = page;
      this.fetchProjectList();
    },
    openUserSelectDialog() {
      this.userSelectDialogVisible = true;
    },
    handleUserConfirm(data) {
      this.searchForm.projectLeaderName = data[0].nickName;
      this.searchForm.projectLeader = data[0].userId;
    },
    handleUserClose() {
      this.userSelectDialogVisible = false;
    },
    async getDictData() {
      const res = await systemApi.getDictData("business_projectstate");
      this.statusList = res.data;
    },
  },
  mounted() {
    this.getDictData();
    this.fetchProjectList();
  },
};
</script>

<style lang="scss" scoped>
.project-list {
  padding: 20px;
  background-color: white;
  height: 88vh;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.search-bar {
  margin-bottom: 20px;
}

.demo-form-inline {
  // display: flex;
  // flex-wrap: nowrap;
  // align-items: flex-start;
}

.demo-form-inline .el-form-item {
  // margin-right: 50px; /* 将间距设置为 30px */
  margin-bottom: 0;
  border: 1px solid #ccc;
  padding-left: 10px;
  border-radius: 4px;
  ::v-deep .el-form-item__label{
    color: #999 !important;
  }
}
.formBtn{
  border: none !important;
}
.demo-form-inline .el-form-item:last-child {
  margin-right: 0; /* 移除最后一个元素的右边距 */
}

.form-item {
  flex: 1;
}

.form-item ::v-deep .el-form-item__content {
  // width: 100%;
}

.form-item ::v-deep .el-input,
.form-item ::v-deep .el-select {
  // width: 100%;
  input,select{
    border: none !important;

  }
}

.search-buttons {
  white-space: nowrap;

}

::v-deep .operation-buttons .el-button {
  padding: 4px 8px;
  margin: 0 2px;
  font-weight: 600;
  font-size: 14px;
}

::v-deep .operation-column {
  background-color: #ffffff;
  box-shadow: -2px 0 5px rgba(241, 112, 6, 0.1);
}

.el-button.is-text {
  min-width: 32px !important;
}

.dialog-footer {
  display: flex;
  justify-content: center;
  align-items: center;
}

.dialog-footer .el-button {
  margin: 0 10px;
}

.delete-content {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.warning-icon {
  font-size: 24px;
  color: #e6a23c;
  margin-right: 10px;
}

/* 添加以下样式来使对话框垂直居中 */
::v-deep .delete-dialog.el-dialog {
  margin-top: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.search-buttons ::v-deep .el-button {
  width: 90px !important;
  height: 36px;
}
</style>
