<script setup lang="ts">
import { ref, reactive, nextTick } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import { postUpdateUserInfo } from "@/api/userSetting";
import type { DrawerProps, FormItemProps, FormProps } from "element-plus";
import { postListTree } from "@/api/department";
import dayjs from "dayjs";
import { selectRank } from "@/api/select";
// const itemLabelPosition = ref<FormItemProps["labelPosition"]>("");
const drawer = ref(false);
const formRef = ref();
const disabledValue = ref(true);
const postOrganizationUserPage = ref();
const direction = ref<DrawerProps["direction"]>("rtl");
const formLabelAlign = reactive({
  realName: "",
  hospitalCode: "",
  userCode: "",
  userName: "",
  phone: "",
  gender: "",
  birth: null,
  remark: "",
  headUrl: "",
  token: "",
  menuRole: "",
  columnRole: "",
  deptCode: "",
  group: "",
  jobTitle: ""
});
const handleClose = (done: () => void) => {
  // ElMessageBox.confirm("配置项未保存，确认关闭", {
  //   type: "warning"
  // }).then(() => {
  // });
  formRef.value.clearValidate(); // 清除验证错误
  formRef.value.resetFields(); // 重置表单字段
  drawer.value = false;
  disabledValue.value = true;
  editShow.value = true;
};
function cancelClick() {
  // formRef.value.validate(valid => {
  //   if (valid) {
  disabledValue.value = true;
  editShow.value = true;
  formRef.value.clearValidate(); // 清除验证错误
  formRef.value.resetFields(); // 重置表单字段
  // }
  // });
}
function confirmClick() {
  formRef.value.validate(valid => {
    if (valid) {
      postUpdateUserInfoApi();
    }
  });
}
const postUpdateUserInfoApi = async () => {
  if (!formLabelAlign.birth) {
    formLabelAlign.birth = 0;
  }
  const { code, msg } = await postUpdateUserInfo(formLabelAlign);
  if (code === 200) {
    ElMessage({
      message: "更新成功",
      type: "success"
    });
    disabledValue.value = true;
    editShow.value = true;
    drawer.value = !drawer.value;
    postOrganizationUserPage.value();
  } else {
    // ElMessage({
    //   message: msg,
    //   type: "error"
    // });
  }
};
const open = (row, postOrganizationUserPageApi) => {
  drawer.value = true;
  postOrganizationUserPage.value = postOrganizationUserPageApi;
  Object.assign(formLabelAlign, row);
  dayBirth.value = row.birth ? dayjs(row.birth).format("YYYY-MM-DD") : "";
  postListTreeApi();
};
const editShow = ref(true);
// 编辑
const editClick = () => {
  editShow.value = false;
  disabledValue.value = false;
};
defineExpose({
  open
});

// 部门
const treeSelectRef = ref(null);
const openTreeFocus = async () => {
  nextTick(() => {
    if (formLabelAlign.deptCode && treeSelectRef.value) {
      const node = treeSelectRef.value.getNode(formLabelAlign.deptCode); // 获取节点
      if (node) {
        treeSelectRef.value.setCurrentKey(formLabelAlign.deptCode); // 选中节点
      }
    }
  });
};
const deptTree = ref([]);
const postListTreeApi = async () => {
  const { code, data } = await postListTree();
  if (code == 200) {
    deptTree.value = data;
  }
};

// 出生日期
const dayBirth = ref("");
const birthChange = day => {
  formLabelAlign.birth = dayjs(day).valueOf();
};

// 校验
const rules = reactive({
  realName: [
    {
      required: true,
      message: "请填写姓名",
      trigger: "blur"
    }
  ],
  hospitalCode: [
    {
      required: true,
      message: "请填写工号",
      trigger: "blur"
    }
  ],
  deptCode: [
    {
      required: true,
      message: "请选择部门",
      trigger: "blur"
    }
  ]
});
</script>

<template>
  <div>
    <el-drawer
      v-model="drawer"
      :direction="direction"
      :before-close="handleClose"
    >
      <template #header>
        <h4>人员详情</h4>
      </template>
      <template #default>
        <div>
          <el-form
            ref="formRef"
            label-position="top"
            label-width="auto"
            :model="formLabelAlign"
            :rules="rules"
          >
            <el-form-item label="姓名" prop="realName" label-position="top">
              <el-input
                v-model="formLabelAlign.realName"
                :disabled="disabledValue"
              />
            </el-form-item>
            <el-form-item label="工号" prop="hospitalCode" label-position="top">
              <el-input
                v-model="formLabelAlign.hospitalCode"
                :disabled="disabledValue"
              />
            </el-form-item>
            <el-form-item label="部门" prop="deptCode" label-position="top">
              <el-tree-select
                ref="treeSelectRef"
                v-model="formLabelAlign.deptCode"
                :data="deptTree"
                :disabled="disabledValue"
                :props="{
                  label: 'deptName',
                  value: 'deptCode',
                  children: 'childrenRes'
                }"
                filterable
                check-strictly
                :render-after-expand="false"
                node-key="deptCode"
                @focus="openTreeFocus"
              />
            </el-form-item>
            <el-form-item label="性别" label-position="top">
              <el-select
                v-model="formLabelAlign.gender"
                placeholder="请选择性别"
                :disabled="disabledValue"
              >
                <el-option label="男" value="男" />
                <el-option label="女" value="女" />
              </el-select>
            </el-form-item>
            <el-form-item label="出生日期" label-position="top">
              <el-date-picker
                v-model="dayBirth"
                type="date"
                :disabled="disabledValue"
                placeholder="请选择出生日期"
                @change="birthChange"
              />
            </el-form-item>
            <el-form-item label="职称" label-position="top">
              <el-select
                v-model="formLabelAlign.jobTitle"
                placeholder="请选择职称"
                :disabled="disabledValue"
              >
                <el-option
                  v-for="(item, index) in selectRank"
                  :key="index"
                  :label="item.dictValue"
                  :value="item.dictValue"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="手机号" label-position="top">
              <el-input
                v-model="formLabelAlign.phone"
                :disabled="disabledValue"
              />
            </el-form-item>
          </el-form>
        </div>
      </template>
      <template #footer>
        <el-button v-if="editShow" type="primary" @click="editClick"
          >编辑</el-button
        >
        <div v-else>
          <el-button @click="cancelClick">取消</el-button>
          <el-button type="primary" @click="confirmClick">保存</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>
