<script setup lang="ts">
import { ref, reactive, defineEmits } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import type { DrawerProps, FormItemProps, FormProps } from "element-plus";
import { postUpdateDept, postListTree } from "@/api/department";
import { postUserList } from "@/api/userSetting";
import { encryption } from "@/utils/encrypt";
// const itemLabelPosition = ref<FormItemProps["labelPosition"]>("");
const drawer = ref(false);
const emit = defineEmits(["handleClick"]);
const disabledValue = ref(true);
const formRef = ref();
const direction = ref<DrawerProps["direction"]>("rtl");
const formLabelAlign = reactive({
  deptName: "",
  deptCode: "",
  type: "",
  parentCode: "",
  hospitalCode: "",
  leader: "",
  leaderCode: ""
});

// 部门负责人
const optiones = reactive({
  leaderOptions: []
});
const userList = ref({
  username: "",
  password: "",
  deptCode: ""
});
const postUserListApi = async () => {
  // // @ts-ignore
  // userList.value.username = encryption(localStorage.getItem("rolesName"));
  // // @ts-ignore
  // userList.value.password = encryption(localStorage.getItem("password"));
  userList.value.deptCode = formLabelAlign.deptCode;
  const { code, data } = await postUserList(userList.value);
  if (code === 200) {
    optiones.leaderOptions = data;
  }
};

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() {
  // drawer.value = false;
  // formRef.value.validate(valid => {
  //   if (valid) {
  disabledValue.value = true;
  editShow.value = true;
  formRef.value.clearValidate(); // 清除验证错误
  formRef.value.resetFields(); // 重置表单字段
  //   }
  // });
}
const postUpdateDeptApi = async () => {
  const res = await postUpdateDept(formLabelAlign);
  if (res.code == 200) {
    ElMessage({
      message: "保存成功",
      type: "success"
    });
    emit("handleClick");
  }
};
function confirmClick() {
  formRef.value.validate(valid => {
    if (valid) {
      postUpdateDeptApi();
      disabledValue.value = true;
      editShow.value = true;
      drawer.value = !drawer.value;
    }
  });
}
const open = row => {
  // formLabelAlign = row.data;
  formLabelAlign.deptName = row.data.deptName;
  formLabelAlign.deptCode = row.data.deptCode;
  formLabelAlign.hospitalCode = row.data.hospitalCode;
  formLabelAlign.parentCode = row.data.parentCode;
  formLabelAlign.leaderCode = row.data.leader;
  console.log("数据", row.data);
  postListTreeApi();
  postUserListApi();
  drawer.value = true;
};

const editShow = ref(true);
// 编辑
const editClick = () => {
  editShow.value = false;
  disabledValue.value = false;
};
const parentOptions = ref([]);
const postListTreeApi = async () => {
  const { code, data } = await postListTree();
  if (code === 200) {
    parentOptions.value = data;
  }
};
const handClickInit = value => {
  if (value) {
    const selectedItem = optiones.leaderOptions.find(
      item => item.userCode === value
    );
    formLabelAlign.leader = selectedItem.realName;
  }
};
defineExpose({
  open
});
const timer = ref("");
</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"
          >
            <el-form-item
              label="部门名称"
              label-position="top"
              prop="deptName"
              :rules="[
                {
                  required: true,
                  message: '请填写部门名称',
                  trigger: 'change'
                }
              ]"
            >
              <el-input
                v-model="formLabelAlign.deptName"
                :disabled="disabledValue"
              />
            </el-form-item>
            <el-form-item label="部门编号" label-position="top">
              <el-input
                v-model="formLabelAlign.hospitalCode"
                :disabled="disabledValue"
              />
            </el-form-item>
            <el-form-item
              v-if="formLabelAlign.parentCode != 0"
              label="上级部门"
              label-position="top"
            >
              <!-- <el-input v-model="formLabelAlign.parentCode" /> -->
              <el-tree-select
                v-model="formLabelAlign.parentCode"
                :data="parentOptions"
                check-strictly
                filterable
                disabled
                :props="{
                  label: 'deptName',
                  value: 'deptCode',
                  children: 'childrenRes'
                }"
                placeholder="请选择部门"
              />
            </el-form-item>
            <el-form-item label="部门负责人" label-position="top">
              <el-select
                v-model="formLabelAlign.leaderCode"
                placeholder="请选择部门负责人"
                :disabled="disabledValue"
                @change="handClickInit"
              >
                <el-option
                  v-for="item in optiones.leaderOptions"
                  :key="item.value"
                  :label="item.realName"
                  :value="item.userCode"
                />
              </el-select>
            </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>
