<template>
  <div class="project-management">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="rules"
      label-width="120px"
      class="custom-form"
    >
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="项目名称" prop="projectName">
            <div>
              <el-input
                v-model="formData.projectName"
                placeholder="请输入项目名称"
                :disabled="isEditing"
                class="full-width longInput"
              />
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="项目编码" prop="projectCode">
            <el-input
              v-model="formData.projectCode"
              class="full-width"
              :disabled="isEditing"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="项目负责人" prop="projectLeader">
            <el-input
              v-model="formData.projectLeaderName"
              placeholder="选择项目负责人"
              readonly
              :disabled="isEditing"
              @click.native="openProjectManagerSelect"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="项目状态" prop="projectState">
            <el-select
              v-model="formData.projectState"
              placeholder="根据时间自动生成"
              disabled
              class="full-width"
            >
              <el-option label="未启动" value="0" />
              <el-option label="进行中" value="1" />
              <el-option label="已完成" value="2" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="预计人天" prop="budgetDate">
            <el-input
              v-model.number="formData.budgetDate"
              :min="0"
              :disabled="isEditing"
              class="full-width"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="开始日期" prop="startDate">
            <el-date-picker
              v-model="formData.startDate"
              type="date"
              placeholder="选择开始日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              class="full-width"
              :disabled="isEditing"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="结束日期" prop="endDate">
            <el-date-picker
              v-model="formData.endDate"
              type="date"
              placeholder="选择结束日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              class="full-width"
              :disabled="isEditing"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="form-actions jcc" v-show="!isEditing">
      <el-button
        type="primary"
        @click="saveProject"
        v-hasPermi="['project:detail:save']"
        >保存</el-button
      >
      <el-button @click="cancelEdit">取消</el-button>
    </div>
    <div class="userBox">
      <div class="table-actions">
        <el-button
          type="primary"
          @click="addUser"
          v-hasPermi="['project:detail:addUser']"
          >新增成员</el-button
        >
      </div>
      <div class="f1">
        <CustomTable
          :columns="columns"
          :tableData="tableData"
          :show-selection="false"
          :show-index="true"
          :show-pagination="false"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          style="height: 100%;"
        >
          <template slot="userName" slot-scope="{ row }">
            <el-input
              v-if="row.isNew"
              v-model="row.userName"
              placeholder="选择人员"
              readonly
              @click.native="openSelectUser(row)"
            />
            <span v-else>{{ row.userName }}</span>
          </template>
          <template slot="post" slot-scope="{ row }">
            <el-select
              v-if="
                (row.isEditing === true && row.teamId == row.teamId) ||
                row.isNew
              "
              v-model="row.postId"
              placeholder="请选择职位"
            >
              <el-option
                v-for="post in postOptions"
                :key="post.dictValue"
                :label="post.dictLabel"
                :value="post.dictValue"
              />
            </el-select>
            <span v-else>{{
              postOptions.find((post) => post.dictValue === row.postId)
                ? postOptions.find((post) => post.dictValue === row.postId)
                    .dictLabel
                : ""
            }}</span>
          </template>
          <template slot="operation" slot-scope="{ row }">
            <div class="operation-buttons">
              <template v-if="row.isNew">
                <el-button
                  text
                  type="text"
                  size="mini"
                  @click="confirmAddUser(row)"
                  >确认</el-button
                >
                <el-button
                  text
                  type="text"
                  size="mini"
                  @click="cancelAddUser(row)"
                  >取消</el-button
                >
              </template>
              <template v-else-if="row.isEditing && row.teamId == row.teamId">
                <el-button
                  text
                  type="text"
                  size="mini"
                  @click="saveUserEdit(row)"
                  >保存</el-button
                >
                <el-button
                  text
                  type="text"
                  size="mini"
                  @click="cancelUserEdit(row)"
                  >取消</el-button
                >
              </template>
              <template v-else>
                <el-button
                  type="text"
                  size="mini"
                  v-hasPermi="['project:detail:editUser']"
                  @click="editUser(row)"
                  >编辑</el-button
                >
                <el-button
                  type="text"
                  size="mini"
                  v-hasPermi="['project:detail:workLog']"
                  @click="showTimesheet(row)"
                  >工作日志</el-button
                >
                <el-button
                  type="text"
                  size="mini"
                  v-hasPermi="['project:detail:deleteUser']"
                  @click="confirmDelete(row)"
                  >删除</el-button
                >
              </template>
            </div>
          </template>
        </CustomTable>
      </div>
    </div>

    <SelectUser
      :dialogVisible="showSelectUser"
      :multi-select="false"
      :currentSelectedUser="currentSelectedUser"
      @confirm="handleUserConfirm"
      @close="closeSelectUser"
    />

    <SelectUser
      v-if="showProjectManagerSelect"
      :dialogVisible="showProjectManagerSelect"
      :multi-select="false"
      :selected-users="projectManagerSelectedUser"
      @confirm="handleProjectManagerConfirm"
      @close="closeProjectManagerSelect"
    />
  </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 {
      formRef: null,
      isEditing: false,
      originalPost: "",
      showSelectUser: false,
      showProjectManagerSelect: false,
      formData: {
        projectId: null,
        projectName: "",
        projectCode: "",
        projectLeaderName: "",
        projectLeader: "",
        projectState: "",
        startDate: "",
        endDate: "",
        budgetDate: 0,
        state: 0,
      },
      postOptions: [],
      columns: [
        { prop: "userName", label: "姓名" },
        { prop: "post", label: "项目职位" },
        { prop: "workTime", label: "工作天数" },
        { prop: "operation", label: "操作", width: "250px" },
      ],
      tableData: [],
      currentEditingRow: {},
      currentSelectedUser: [],
      projectManagerSelectedUser: [],
      rules: {
        projectName: [
          { required: true, message: "项目名称为必填", trigger: "blur" },
        ],
        projectLeader: [
          { required: true, message: "项目负责人为必填", trigger: "change" },
        ],
        startDate: [
          { required: true, message: "开始日期为必填", trigger: "change" },
        ],
        endDate: [
          { required: true, message: "结束日期为必填", trigger: "change" },
          { validator: this.validateDates, trigger: "change" },
        ],
        budgetDate: [
          { required: true, message: "预算天数为必填", trigger: "blur" },
          { validator: this.validateDates, trigger: "change" },
        ],
      },
    };
  },
  watch: {
    // 自动更新项目状态
    "formData.startDate": "updateProjectState",
    "formData.endDate": "updateProjectState",
    "formData.projectId": "updateIsEdit",
  },
  methods: {
    updateProjectState() {
      const now = new Date().getTime();
      const start = this.formData.startDate
        ? new Date(this.formData.startDate).getTime()
        : null;
      const end = this.formData.endDate
        ? new Date(this.formData.endDate).getTime()
        : null;

      if (start && end) {
        if (now < start) {
          this.formData.projectState = "0"; // 未开始
        } else if (now >= start && now <= end) {
          this.formData.projectState = "1"; // 进行中
        } else {
          this.formData.projectState = "2"; // 已结束
        }
      }
    },
    updateIsEdit() {
      // if (this.formData.projectId) this.isEditing = true;
      // else this.isEditing = false;
    },
    validateDates(rule, value, callback) {
      if (this.formData.startDate && this.formData.endDate) {
        const start = new Date(this.formData.startDate);
        const end = new Date(this.formData.endDate);
        if (start > end) {
          callback(new Error("开始日期不能晚于结束日期"));
        } else {
          callback();
        }
      } else {
        callback();
      }
    },
    saveProject() {
      if (!this.$refs.formRef) return;
      this.$refs.formRef.validate(async (valid) => {
        if (valid) {
          const projectDataToSave = {
            ...this.formData,
            startDate: this.formData.startDate
              ? new Date(this.formData.startDate+' 00:00:00').getTime()
              : null,
            endDate: this.formData.endDate
              ? new Date(this.formData.endDate+' 23:59:59').getTime()
              : null,
          };

          if (!this.formData.projectId) {
            const res = await projectApi.addProject(projectDataToSave);
            this.formData.projectId = res.data.projectId;
            this.formData.projectCode = res.data.projectCode;
            this.$modal.msgSuccess("操作成功");
          } else {
            const hasLog = await projectApi.projectHasLogData({
              projectId: this.formData.projectId,
              startDate: this.formData.startDate + " 00:00:00",
              endDate: this.formData.endDate + " 23:59:59",
            });
            if (!hasLog.data) {
              this.$modal
                .confirm(
                  `检测到项目时间范围外的日志记录，修改项目时间将导致这些日志被删除。请确认是否继续修改？`
                )
                .then(async () => {
                  await projectApi.updateProject(projectDataToSave);
                });
            } else {
              await projectApi.updateProject(projectDataToSave);
              this.$modal.msgSuccess("操作成功");
            }
          }
        } else {
          this.$modal.msgError("请检查表单填写是否正确");
          this.$modal.msgSuccess("操作成功");
        }
      });
    },
    cancelEdit() {
      this.$router.back();
    },
    addUser() {
      if (!this.formData.projectId) {
        this.$modal.msgWarning("请先保存项目信息后再添加用户");
        return;
      }

      let newUser = {
        userName: "",
        post: "",
        postId: "",
        workTime: 0,
        isNew: true,
        userId: "",
        isEditing: true,
        index: this.tableData.length,
      };
      this.currentEditingRow = newUser;
      this.tableData.push(newUser);
    },
    confirmAddUser(row) {
      if (!this.formData.projectId) {
        this.$modal.msgWarning("请先保存项目信息后再添加用户");
        return;
      }

      if (!row.userId || !row.postId) {
        this.$modal.msgWarning("请选择用户并指定职位");
        return;
      }

      const params = {
        projectId: this.formData.projectId,
        userId: row.userId,
        postId: row.postId,
      };
      if (row.teamId) params.teamId = row.teamId;
      projectApi
        .updateProjectUser(params)
        .then(() => {
          this.$modal.msgSuccess("成员添加成功");
          this.getProjectUser();
        })
        .catch((error) => {
          console.error("添加成员失败", error);
          this.$modal.msgError("添加成员失败");
        });
    },
    cancelAddUser(row) {
      const index = this.tableData.findIndex(
        (item) => item.userId === row.userId
      );
      if (index !== -1) {
        this.tableData.splice(index, 1);
      } else {
        this.tableData.splice(row.index, 1);
      }
    },
    cancelUserEdit(row) {
      row.isEditing = false;
      row.postId = row.originalPost;
    },
    openSelectUser(row) {
      this.currentEditingRow = row;
      this.currentSelectedUser = row.userId
        ? [{ userId: row.userId, userName: row.userName }]
        : [];
      this.showSelectUser = true;
    },
    handleUserConfirm(selectedUsers) {
      if (selectedUsers.length > 0) {
        const selectedUser = selectedUsers[0];
        this.currentEditingRow.userName = selectedUser.nickName;
        this.currentEditingRow.userId = selectedUser.userId;
      } else {
        this.currentEditingRow.userName = "";
        this.currentEditingRow.userId = "";
      }
      this.showSelectUser = false;
    },
    closeSelectUser() {
      this.showSelectUser = false;
      // this.currentSelectedUser = [];
    },
    openProjectManagerSelect() {
      this.projectManagerSelectedUser = this.formData.projectLeader
        ? [
            {
              id: this.formData.projectLeaderId,
              name: this.formData.projectLeader,
            },
          ]
        : [];
      this.showProjectManagerSelect = true;
    },
    handleProjectManagerConfirm(users) {
      if (users.length > 0) {
        const selectedUser = users[0];
        this.formData.projectLeaderName = selectedUser.nickName;
        this.formData.projectLeader = selectedUser.userId;
      } else {
        this.formData.projectLeaderName = "";
        this.formData.projectLeader = null;
      }
      this.showProjectManagerSelect = false;
    },
    closeProjectManagerSelect() {
      this.showProjectManagerSelect = false;
    },
    handleSizeChange(val) {
      console.log("每页显示条数:", val);
    },
    handleCurrentChange(val) {
      console.log("当前页:", val);
    },
    showTimesheet(row) {
      this.$router.push({
        path: "/",
        query: {
          userId: row.userId,
          projectId: this.formData.projectId,
          nickName: row.userName,
        },
      });
    },
    confirmDelete(row) {
      this.$modal.confirm(`确定要删除该成员吗？`).then(() => {
        return this.deleteUser(row);
      });
    },
    deleteUser: async function (row) {
      try {
        await projectApi.deleteProjectUser(row.teamId);
        this.$modal.msgSuccess("成员删除成功");
        this.getProjectUser();
      } catch (error) {
        console.error("删除成员失败", error);
        this.$modal.msgError("删除成员失败");
      }
    },
    async fetchProjectData(id) {
      try {
        const response = await projectApi.getProjectDetail(id);
        const projectData = response.data;
        let {
          projectId,
          projectName,
          projectCode,
          projectLeaderName,
          projectLeader,
          projectState,
          budgetDate,
          state,
        } = response.data;
        let startDate = projectData.startDate.split(" ")[0];
        let endDate = projectData.endDate.split(" ")[0];
        this.formData = {
          projectId,
          projectName,
          projectCode,
          projectLeaderName,
          projectLeader,
          projectState,
          startDate,
          endDate,
          budgetDate,
          state,
        };
        this.updateProjectState(); // 更新项目状态
      } catch (error) {
        console.error("获取项目数据失败", error);
        this.$modal.msgError("获取项目数据失败");
      }
    },
    async getDictData() {
      const res = await systemApi.getDictData("business_positions");
      this.postOptions = res.data;
    },
    async getProjectUser() {
      const res = await projectApi.getProjectUser(this.formData.projectId);
      this.tableData = res.data.map((ele) => {
        ele.isEditing = false;
        return ele;
      });
    },
    editUser(row) {
      this.currentEditingRow = row;
      this.currentEditingRow.isEditing = true;
      this.currentEditingRow.originalPost = row.postId; // 保存原始职位，以便取消时恢复
    },
    async saveUserEdit(row) {
      try {
        await projectApi.updateProjectUser({
          projectId: this.formData.projectId,
          userId: this.currentEditingRow.userId,
          postId: this.currentEditingRow.postId,
          teamId: this.currentEditingRow.teamId,
        });
        this.currentEditingRow.isEditing = false;
        delete this.currentEditingRow.originalPost;
        this.$modal.msgSuccess("用户信息更新成功");
        this.getProjectUser();
      } catch (error) {
        console.error("更新用户信息失败", error);
        this.$modal.msgError("更新用户信息失败");
      }
    },
  },
  mounted() {
    const projectId = this.$route.params.id || this.$route.query.id;
    this.formData.projectId = projectId;
    this.getDictData();
    if (projectId) {
      this.fetchProjectData(projectId);
      this.getProjectUser();
    } else {
      this.updateProjectState(); // 对于新项目，也要初始化状态
    }
  },
};
</script>

<style lang="scss" scoped>
.project-management {
  padding: 30px;
  background-color: white;
  height: 88vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.custom-form {
  width: 100%;
  margin-bottom: 20px;
}

.form-container {
  width: 100%;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
  margin-bottom: 20px;
}

.custom-form ::v-deep .el-form-item {
  margin-bottom: 25px; /* 增加表单行间距 */
}

.custom-form ::v-deep .el-form-item__content {
  // margin-left: auto !important;
  width: 100%;
}

.custom-form ::v-deep .el-input {
  height: 42px; /* 调高输入框高度 */
  width: 80%;
}

::v-deep .el-form-item__label {
  height: 42px; /* 调高输入框高度 */
  line-height: 42px;
}

.custom-form ::v-deep .el-input__wrapper,
.custom-form ::v-deep .el-date-editor.el-input,
.custom-form ::v-deep .el-input-number {
  height: 42px; /* 调高输入框高度 */
  width: 80%;
}

.custom-form ::v-deep .el-select {
  width: 100%;
}

//

.content-container {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.userBox {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.table-actions {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.form-actions {
  display: flex;
  gap: 10px;
}

::v-deep .el-table {
  width: 100%;
}

.operation-buttons {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

::v-deep .operation-buttons .el-button {
  padding: 4px 8px;
  margin: 0 2px;
}

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

/* 添加以下样式以使日期选择器宽度一致 */
::v-deep .el-date-editor.el-input {
  width: 80%;
}

::v-deep .el-date-editor.el-input .el-input__wrapper {
  width: 80%;
}

::v-deep .longInput {
  width: 90% !important;
}

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

::v-deep .el-select .el-input__wrapper {
  height: 32px;
}

.delete-confirm {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.warning-icon {
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
}
</style>
