<template>
  <el-dialog
    v-model="dialogVisible"
    :title="isAdd ? '添加' : '编辑'"
    :width="800"
    center
    align-center
    :close-on-click-modal="false"
    @closed="closed"
  >
    <el-form :model="formData" ref="formRef" label-width="100px" :rules="formRules">
      <el-row :gutter="10">
        <el-col :span="12" style="display: block">
          <el-form-item label="上级部门" prop="parentId">
            <el-tree-select
              style="width: 100%"
              v-model="formData.parentId"
              :data="deptOptions"
              :props="{ value: 'deptId', label: 'deptName', children: 'children' }"
              value-key="deptId"
              placeholder="选择上级部门"
              default-expand-all
              check-strictly
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="部门名称" prop="deptName">
            <el-input v-model="formData.deptName" placeholder="请输入部门名称" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="显示排序" prop="orderNum">
            <el-input-number style="width: 100%" v-model="formData.orderNum" controls-position="right" :min="0" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="负责人" prop="leader">
            <el-input v-model="formData.leader" placeholder="请输入负责人" maxlength="20" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系电话" prop="phone">
            <el-input v-model="formData.phone" placeholder="请输入联系电话" maxlength="11" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="formData.email" placeholder="请输入邮箱" maxlength="50" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="部门状态" prop="status">
            <el-switch v-model="formData.status" active-value="0" inactive-value="1" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" class="ml30" v-throttle="handleSubmit">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup name="editTeamMember">
import { reactive, ref, defineExpose, inject, nextTick, Ref } from "vue";
import { FormInstance, FormRules, ElMessage } from "element-plus";
import { editDept, addDept } from "@/api/modules/system/dept";
import { Dept } from "@/api/interface";

//* 接收注入
const dialogVisible = ref(false);
//* data
//* ref
const formRef = ref<FormInstance>();
const openPromise = ref<any>({});
const deptOptions = inject<Ref>("deptOptions", ref([]));
const isAdd = ref(false);
interface FormData extends Partial<Dept.ResDeptList> {
  [key: string]: any;
}
const formData = reactive<FormData>(getFormDefaultValue());
//* 方法

// 校验规则
let formRules = reactive<FormRules>({
  parentId: [{ required: true, message: "上级部门不能为空", trigger: "blur" }],
  deptName: [{ required: true, message: "部门名称不能为空", trigger: "blur" }],
  orderNum: [{ required: true, message: "显示排序不能为空", trigger: "blur" }],
  email: [{ type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }],
  phone: [{ pattern: /^1[3-9]\d{9}$/, message: "请输入正确的手机号码", trigger: "blur" }]
});

function getFormDefaultValue(): FormData {
  return {
    deptId: undefined,
    parentId: 100,
    deptName: undefined,
    remark: undefined,
    leader: undefined,
    phone: undefined,
    email: undefined,
    status: "0"
  };
}

function closed() {
  dialogVisible.value = false;
  const defaultValue = getFormDefaultValue();
  for (const key of Object.keys(defaultValue)) {
    formData[key] = defaultValue[key];
  }
  nextTick(formRef.value?.clearValidate);
}
// 取消
function handleCancel() {
  dialogVisible.value = false;
}
//提交
function handleSubmit() {
  formRef.value?.validate(async valid => {
    if (!valid) return;
    const params = {
      ...formData
    };
    if (isAdd.value) {
      await addDept(params);
      ElMessage.success("新增成功");
    } else {
      await editDept(params);
      ElMessage.success("编辑成功");
    }
    openPromise.value.resolve();
    dialogVisible.value = false;
  });
}

function open(params?: FormData) {
  isAdd.value = !params?.deptId;
  dialogVisible.value = true;
  if (params) {
    if (params.deptId) {
      for (const key of Object.keys(formData)) {
        formData[key] = params[key];
      }
    } else {
      formData.parentId = params.parentId;
    }
  }
  return new Promise(resolve => {
    openPromise.value.resolve = resolve;
  });
}
defineExpose({
  open
});
</script>

<style lang="scss"></style>
