<script setup lang="ts">
import { ref, watchEffect } from "vue";
import { useAsync } from "/@/hooks/useAsync";
import { httpRoleAll } from "/@/api/interest/processPermission";
import PageAuth from "/@/components/PageAuth";
import Actions from "./cpns/actions.vue";

const pageName = "processPermission";

const current = ref("");

const actionsRef = ref<InstanceType<typeof Actions> | null>(null);

const { run, data, loading } = useAsync<RoleNode[]>({
  initalData: [],
  success: () => (current.value = data.value[0].value)
});

watchEffect(() => {
  if (!actionsRef.value) return;
  actionsRef.value.onSearch(current.value);
});

run(httpRoleAll());
</script>

<template>
  <PageAuth :pageName="pageName" :margin="false">
    <div class="flex h-[calc(100vh-60px)] bg-white" v-loading="loading">
      <div
        class="h-full mt-[5px] px-[10px] border-[#b4b6c0] border-r flex flex-col"
      >
        <h1 class="px-[10px] text-[#b4b6c0]">角色列表</h1>
        <ElScrollbar class="min-w-[198px] leading-[30px] cursor-pointer flex-1">
          <p
            :class="{
              'bg-[#f7f7f7]': current === item.value,
              'px-[10px]': true
            }"
            v-for="item in data"
            :key="item.value"
            @click="() => (current = item.value)"
          >
            {{ item.role_name }}
          </p>
        </ElScrollbar>
      </div>

      <div class="flex-1 h-full">
        <Actions ref="actionsRef" />
      </div>
    </div>
  </PageAuth>
</template>
