<template>
  <div class="app-container">
    <!-- 添加或修改尽调申请 -->
    <el-dialog
      :title="approveDiligenceTit"
      :visible.sync="approveDiligenceOpen"
      width="700px"
      append-to-body
      class="custom-dialog"
    >
      <el-form
        ref="approveForm"
        :model="approveForm"
        :rules="approveRules"
        label-width="170px"
      >
        <el-form-item label="尽调审核人员" prop="userIds">
          <el-select v-model="approveForm.userIds" placeholder="全部" style="width: 400px;"
                     clearable
                     multiple
                     filterable
                     allow-create
                     :created-text="(input) => input"
          >
            <el-option
              v-for="item in approveList"
              :key="item.userId"
              :label="item.nickName"
              :value="item.userId"
            />
            <el-option
              label="无"
              value="-1"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelApproveForm">取 消</el-button>
        <el-button type="primary" @click="submitApproveForm(true)" v-preventReClick>提 交</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>

import {allUserList,findApproveUser,saveApproveUser} from "@/api/project/investigate/pool";
import projectItem from "./projectItem";
import fileItem from "../../invest/components/fileItem";
import selecDept from "../../invest/components/selecDept";
import selecUser from "../../invest/components/selecUser";
import { mapGetters } from "vuex";

export default {
  props: {
    projectId: {
      type: String,
    },
  },
  dicts: ["up_way", "project_stage"],
  components: { projectItem, fileItem, selecDept, selecUser },
  data() {
    return {
      pageType: null,
      // 人员选择器
      checkType: "multiple",
      // 数据回显
      selectValues: null,
      selectNameValues: null,
      userVisible: false,
      approveList: [],//全部用户列表
      total: null,
      approveDiligenceTit: "",
      approveDiligenceOpen: false,
      approveForm: {
        id: null,
        userId: [],
        loginId: null,
        userIds:null//下拉框绑定值
      },
      approveRules: {
        investigatePerson: [
          { required: true, trigger: "blur", message: "请选择" },
        ],
      },
      showProjectItem: false,
    };
  },
  computed: {
    ...mapGetters(["user"]),
  },
  watch: {
    approveDiligenceOpen: function (newValue, oldValue) {
      if (newValue === false) {
        this.selectValues = null;
        this.selectNameValues = null;
      }
    },
  },
  mounted() {
    // 页面加载时先查询全部用户，再查询已存在用户并回显
    this.fetchAllUsers();
  },
  methods: {
    // 1. 查询全部用户（下拉框选项）
    async fetchAllUsers() {
      allUserList().then((response) => {
        this.approveList = response.rows;
        // 全部用户加载完成后，再查询已存在的用户
        this.fetchExistingUsers();
      })
    },

    // 2. 查询已存在的用户（用于回显）
    async fetchExistingUsers() {
      findApproveUser().then((response) => {
        this.approveForm.userIds=response.rows;
      })
    },
    // 设置背调审批人员
    handleShowApplyPop() {
      let that = this;
      this.resetApproveForm();
      this.approveDiligenceTit = "指定审批人员";
      this.approveDiligenceOpen = true;
      this.fetchAllUsers();
    },
    // 尽调申请-提交
    submitApproveForm(flag) {
      this.$refs["approveForm"].validate((valid) => {
        if (valid) {
          try {
            saveApproveUser(this.approveForm).then((response) => {
              this.$modal.msgSuccess(response.msg);
              this.approveDiligenceOpen = false;
              this.$emit("getList");
            });
          } catch (err) {
            // 捕获重复提交错误
            this.$message.error(err.message);
          }
          //this.getList();
        }
      });
    },
    cancelApproveForm() {
      this.approveDiligenceOpen = false;
      this.resetApproveForm();
    },
    // 表单重置
    resetApproveForm() {
      this.approveForm = {
        id: null,
        userId: null,
        deptName:null,
      };
      this.resetForm("approveForm");
    },
  },
};
</script>
<style lang="scss">
.examineDialog {
  .el-input.is-disabled .el-input__inner,
  .el-textarea.is-disabled .el-textarea__inner {
    background-color: #fff;
    color: #333;
  }
}
/* 控制对话框标题居中 */
.custom-dialog .el-dialog__header {
  text-align: center; /* 使标题文字水平居中 */
}

</style>
