<template>
  <!-- 添加或修改项目信息对话框 -->
  <el-dialog
    title="员工信息"
    v-model="visible"
    width="400px"
    append-to-body
    draggable
  >
    <div class="form-container">
      <el-form
        ref="userRef"
        class="master-container"
        :model="form"
        :rules="rules"
        label-width="140px"
      >
        <el-form-item label="是否为部门负责人" prop="isLeader">
          <el-select
            v-model="form.isLeader"
            placeholder="请选择是否为部门负责人"
          >
            <el-option
              v-for="item in is_leader"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否为调度人员" prop="isDispatcher">
          <el-select
            v-model="form.isDispatcher"
            placeholder="请选择是否为调度人员"
          >
            <el-option
              v-for="item in is_dispatcher"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否为工段长" prop="isFormman">
          <el-select v-model="form.isFormman" placeholder="请选择是否为工段长">
            <el-option
              v-for="item in is_formman"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否为调机班长" prop="isYardman">
          <el-select
            v-model="form.isYardman"
            placeholder="请选择是否为调机班长"
          >
            <el-option
              v-for="item in is_yardman"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <el-button type="primary" icon="Check" @click="submitForm"
        >确 定</el-button
      >
      <el-button icon="Close" @click="cancel">取 消</el-button>
    </template>
  </el-dialog>
</template>
<script setup>
import { updateDeptUser } from "@/api/system/user";
const { proxy } = getCurrentInstance();
/** 字典数组区 */
const { is_leader } = proxy.useDict("is_leader");
const { is_dispatcher } = proxy.useDict("is_dispatcher");
const { is_yardman } = proxy.useDict("is_yardman");
const { is_formman } = proxy.useDict("is_formman");
/** 表单抽屉 页变量 */
const visible = ref(false);
const data = reactive({
  form: {},
  rules: {},
});
const { form, rules } = toRefs(data);
const emit = defineEmits(["handleSaveSuccess"]);

/***********************  方法区  ****************************/
/** 打开抽屉 */
function open(row) {
  visible.value = true;
  form.value.userId = row.userId;
  form.value.isFormman = row.isFormman;
  form.value.isLeader = row.isLeader;
  form.value.isYardman = row.isYardman;
  form.value.isDispatcher = row.isDispatcher;
  form.value.deptId = row.deptId;
}
/** 取消按钮 */
function cancel() {
  visible.value = false;
}

/** 提交按钮 */
function submitForm() {
  console.log(form.value);
  updateDeptUser(form.value).then((res) => {
    if (res.code === 200) {
      proxy.$modal.msgSuccess("操作成功");
      emit("handleSaveSuccess");
    }
    visible.value = false;
  });
}

/** 暴露给父组件的方法 */
defineExpose({
  open,
});
</script>
