<script setup lang="ts">
import { nextTick, ref, watch } from "vue";
import { useUserInfo } from "/@/hooks/core/useUser";
import NormalUser from "./normal-user.vue";
import SuperAdmin from "./super-admin.vue";

const SuperAdminRef = ref<InstanceType<typeof SuperAdmin> | null>(null);
const NormalUserRef = ref<InstanceType<typeof NormalUser> | null>(null);

const { isSuperUser } = useUserInfo();
const emit = defineEmits(["change", "update:modelValue"]);

function handleChange(value) {
  emit("update:modelValue", value);
  nextTick(() => emit("change", value));
}

watch(
  () => isSuperUser.value,
  () => {
    nextTick(() => {
      isSuperUser.value
        ? SuperAdminRef.value?.intialData()
        : NormalUserRef.value?.intialData();
    });
  },
  {
    immediate: true
  }
);
</script>

<template>
  <div class="business-permission" style="width: 100%">
    <template v-if="isSuperUser">
      <super-admin @change="handleChange" ref="SuperAdminRef" />
    </template>
    <template v-else>
      <normal-user @change="handleChange" ref="NormalUserRef" />
    </template>
  </div>
</template>
