<template>
  <el-form :label-position="'right'" label-width="120px" :model="orgForm" :rules="formRules" ref="orgRef">
    <el-form-item label="上级目录" prop="p_organization_id" v-if="formType === 'create'">
      <el-tree-select
        v-model="orgForm.p_organization_id"
        :data="orgData"
        :props="treeProps"
        :render-after-expand="false"
        :check-strictly="true"
        :disabled="orgForm.level"
        style="width: 80%" />
      <el-form-item label="" style="padding-left: 16px">
        <el-checkbox v-model="orgForm.level" @change="isTop" label="顶级" />
      </el-form-item>
    </el-form-item>
    <el-form-item label="政务组织名称" prop="name">
      <el-input v-model="orgForm.name" />
    </el-form-item>
    <el-form-item label="组织代码" prop="organization_code">
      <el-input v-model="orgForm.organization_code" />
    </el-form-item>
    <el-form-item label="组织介绍" prop="description">
      <el-input type="textarea" :rows="3" v-model="orgForm.description" maxlength="300" show-word-limit />
    </el-form-item>
  </el-form>
</template>

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

const checkCode = (rule, value, callback) => {
  var reg = /^[a-zA-Z0-9]+$/;
  if (!reg.test(value)) {
    callback(new Error("只能输入字母和数字"));
  } else {
    callback();
  }
};

const checkName = (rule, value, callback) => {
  var reg = /^[a-zA-Z\u4e00-\u9fa5]+$/;
  if (!reg.test(value)) {
    callback(new Error("只能输入字母和汉字"));
  } else {
    callback();
  }
};

const formRules = reactive({
  p_organization_id: [{ required: true, message: "输入上级目录", trigger: "blur" }],
  name: [
    { required: true, message: "请输入组织名称", trigger: "blur" },
    { max: 50, message: "组织名称最大长度为50位", trigger: "blur" },
    { validator: checkName, trigger: "blur" },
  ],
  organization_code: [
    { required: true, message: "请输入组织代码", trigger: "blur" },
    { max: 18, message: "组织代码最大长度为18位", trigger: "blur" },
    { validator: checkCode, trigger: "blur" },
  ],
});

const orgRef = ref(null);
const emit = defineEmits(["action"]);

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

const clearForm = () => {
  if (!orgRef) return;
  orgRef.value.resetFields();
};
const setForm = (data) => {
  Object.assign(orgForm, 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) => {
  orgForm.p_organization_id = data ? " " : ""; //空格绕过表单非空校验
};
onBeforeMount(() => {
  getOrgTree();
});
onMounted(() => {});

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