<template>
  <div class="project-list flex-row jcsb">
    <div class="left">
      <div style="margin-bottom: 20px; font-weight: bold">组织架构</div>
      <el-tree
        :data="deptOptions"
        :expand-on-click-node="false"
        ref="treeRef"
        node-key="id"
        default-expand-all
        highlight-current
        @node-click="handleNodeClick"
        style="margin-left: 50px"
      />
    </div>
    <div class="right f1">
      <div class="search-bar">
        <el-form
          :inline="true"
          :model="searchForm"
          class="demo-form-inline"
          size="small"
        >
          <el-form-item label="统计任务" class="form-item">
            <el-select
              v-model="taskId"
              placeholder="选择任务"
              @change="getTaskUserList"
            >
              <el-option
                v-for="item in taskList"
                :key="item.id"
                :label="item.taskName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item class="search-buttons">
            <el-button @click="onReset">重置</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="495px"
          @sortChange="sortChange"
        >
          <template slot="operation" slot-scope="{ row }">
            <div class="operation-buttons">
              <el-button type="text" size="mini" @click="handleEdit(row, 0)"
                >查看详情</el-button
              >
            </div>
          </template>
        </CustomTable>
      </div>
    </div>
  </div>
</template>

<script>
import CustomTable from "@/components/CustomTable.vue";
import SelectUser from "@/components/SelectUser.vue";
import { taskApi } from "@/utils/api";
import { deptTreeSelect } from "@/api/system/user";

export default {
  components: {
    CustomTable,
    SelectUser,
  },
  data() {
    return {
      deptOptions: undefined,
      taskId: "",
      searchForm: {
        userIdList: [],
        userName: "",
        isAsc: "",
      },
      columns: [
        { prop: "userName", label: "考核人员" },
        { prop: "manageScore", label: "考核评分", sortable: "custom" },
        {
          prop: "examineStatus",
          label: "状态",
          type: "status",
          callback: (value, row) => {
            if (row.examineStatusSelf != 0 && row.examineStatus != 0)
              var color = "#333";
            else var color = "#FF7D00";

            if (row.examineStatusSelf == 0 && row.examineStatus == 0) {
              return `<span style="color: ${color}">待个人自评/组长评分</span>`;
            } else if (row.examineStatusSelf == 0) {
              return `<span style="color: ${color}">待个人自评</span>`;
            } else {
              return `<span style="color: ${color}">待组长评分评</span>`;
            }
          },
        },
        {
          prop: "operation",
          label: "操作",
          width: "250",
          className: "operation-column",
        },
      ],
      tableData: [],
      total: 0,
      currentSelectedUser: [],
      pageNum: 1, // 当前页码
      pageSize: 10, // 每页条数
      taskList: [],
    };
  },
  methods: {
    onSearch() {
      this.getTaskUserList();
    },
    onReset() {
      Object.keys(this.searchForm).forEach((key) => {
        this.searchForm[key] = "";
      });
      this.$refs.treeRef.setCurrentKey(null);
      // this.searchForm.taskId = this.taskList[0]?.id;

      this.getTaskUserList();
    },
    handleNodeClick(data) {
      this.searchForm.deptId = data.id;
      this.getTaskUserList();
    },
    handleEdit(row, edit) {
      this.$router.push({
        path: "/projectBank/userScoreDetail",
        query: { taskId: row.taskId, examineId: row.id },
      });
    },
    getTaskUserList() {
      if (!this.taskId) return;
      taskApi
        .getTaskUserList({
          ...this.searchForm,
          taskId: this.taskId,

          pageNum: this.pageNum,
          pageSize: this.pageSize,
        })
        .then((res) => {
          this.tableData = res.rows;
          this.total = res.total;
        });
    },
    getTaskList() {
      taskApi
        .getTaskList({
          pageNum: 1,
          pageSize: 100000,
        })
        .then((res) => {
          this.taskList = res.rows;
          this.taskId = res.rows[0]?.id;
          this.getTaskUserList();
        });
    },
    handleSizeChange(size) {
      this.pageSize = size;
      this.pageNum = 1; // 重置为第一页
      this.getTaskUserList();
    },
    handleCurrentChange(page) {
      this.pageNum = page;
      this.getTaskUserList();
    },
    getDeptTree() {
      deptTreeSelect().then((response) => {
        this.deptOptions = response.data;
      });
    },
    sortChange({ order }) {
      this.searchForm.isAsc =
        order == "descending" ? "desc" : order == "ascending" ? "asc" : "";
      this.getTaskUserList();
    },
  },
  mounted() {
    this.getDeptTree();
    this.getTaskList();
  },
};
</script>

<style lang="scss" scoped>
.project-list {
  padding: 0 20px;
  background-color: white;
  height: 88vh;
  box-sizing: border-box;
  overflow: hidden;
  align-items: flex-start;
  gap: 20px;
  .left {
    padding-top: 20px;
    width: 300px;
    height: 100%;
    // box-shadow: 5px 0 5px rgba(0, 0, 0, 0.5); /* 阴影效果 */
    border-right: 1px solid #eeeeee;
    margin-right: 10px;
  }
  .right {
    padding-top: 20px;
  }
}

.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;
}

.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%;
}

.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%);
}
::v-deep .el-table th {
  text-align: center;
}

::v-deep .el-table .cell {
  text-align: center;
}
.search-buttons ::v-deep .el-button {
  width: 90px !important;
  height: 36px;
}

::v-deep .el-table {
  border: 1px solid #eee;
  border-bottom: none;
}
::v-deep .el-tree-node__content {
  font-weight: bold;
}
::v-deep .is-current>.el-tree-node__content:first-child .el-tree-node__label {
  color: #4096ff !important;
}
::v-deep .el-tree-node__content {
  height: 36px;
}
</style>
