<template>
  <el-form
    :label-position="'right'"
    label-width="120px"
    :model="directoryForm"
    :rules="directoryFormRules"
    ref="directoryRef"
    style="max-width: 80%">
    <el-form-item label="上级目录" prop="p_organization_id" v-if="formType === 'create'">
      <el-tree-select
        v-model="directoryForm.p_organization_id"
        :data="orgData"
        :props="treeProps"
        :render-after-expand="false"
        :check-strictly="true"
        :disabled="directoryForm.level"
        style="width: 80%" />
      <el-form-item label="" style="padding-left: 16px">
        <el-checkbox v-model="directoryForm.level" @change="isTop" label="顶级" />
      </el-form-item>
    </el-form-item>

    <el-form-item label="名称" prop="name">
      <el-input v-model="directoryForm.name" />
    </el-form-item>
  </el-form>
</template>

<script setup>
import { reactive, ref, onMounted, onBeforeMount, nextTick } from "vue";
import axios from "@/request/http.js";
import { ElMessage } from "element-plus";
const props = defineProps({
  formType: {
    type: String,
    default: "create", //false 新增 true 编辑
  },
});

const directoryForm = reactive({
  p_organization_id: "",
  name: "",
  level: false,
});

const directoryFormRules = reactive({
  p_organization_id: [{ required: true, message: "请输入上级目录", trigger: "blur" }],
  name: [{ required: true, message: "请输入名称", trigger: "blur" }],
});
const directoryRef = ref(null);
const emit = defineEmits(["action"]);

const submitForm = async () => {
  if (!directoryRef) return;
  await directoryRef.value.validate((valid, fields) => {
    if (valid) {
      emit("action", directoryForm);
    } else {
      emit("action", null);
    }
  });
};
const clearForm = () => {
  if (!directoryRef) return;
  directoryRef.value.resetFields();
};

const setForm = (data) => {
  Object.assign(directoryForm, data);
};

const orgData = ref([]);
const treeProps = {
  label: "name",
  children: "Child",
  value: "organization_id",
  disabled: "disabled",
};
const getOrgTree = () => {
  axios.get(`/v1/api/org/tree`).then((res) => {
    if (res.data.code == 200) {
      const orgDataTemp = res.data.data || [];
      orgDataTemp.shift();
      orgData.value = filterOrg(orgDataTemp);
    } else {
      ElMessage.error(res.data.data);
    }
  });
};

const filterOrg = (data) => {
  if (data.length > 0) {
    data.forEach((item) => {
      item.disabled = item.data_type === 0 ? false : true;
      if (item.Child) {
        filterOrg(item.Child);
      } else {
        return;
      }
    });
  }
  return data;
};

const isTop = (data) => {
  directoryForm.p_organization_id = data ? " " : ""; //空格绕过表单非空校验
};

onBeforeMount(() => {
  getOrgTree();
});

onMounted(() => {});

defineExpose({ submitForm, clearForm, setForm });
</script>
