<script setup lang="ts">
import { ref } from "vue";
import { useAsync } from "/@/hooks/useAsync";

import {
  httpRoleProcess,
  httpProcessAll
} from "/@/api/interest/processPermission";

const actionMap = ref<Record<string, string[]>>({});

const { data, loading, run } = useAsync<ProcessNode[]>({
  initalData: [],
  success: onRequesetActionSuccess
});

const { loading: roleLoading, run: roleActionRun } = useAsync<RoleProcess>({
  success: onRequesetRoleActionSuccess
});

function onRequesetRoleActionSuccess({ action_data }: RoleProcess) {}

function onRequesetActionSuccess(actions: ProcessNode[]) {
  const filterActions = actions.filter(({ child }) => child);
  data.value = filterActions;
}

run(httpProcessAll());

defineExpose({
  onSearch: (roleid: string) => roleActionRun(httpRoleProcess({ roleid }))
});
</script>

<template>
  <ElScrollbar height="100%" v-loading="loading || roleLoading">
    <div class="px-[10px]" v-for="action in data" :key="action.value">
      <p>{{ action.process_name }}</p>
      <ElDivider border-style="dashed" />
      <ElCheckboxGroup v-model="actionMap[action.value]">
        <ElCheckbox label="全选" />

        <ElCheckbox
          v-for="child in action.child"
          :key="child.value"
          :label="child.value"
          >{{ child.status_name }}</ElCheckbox
        >
      </ElCheckboxGroup>

      <ElDivider />
    </div>
  </ElScrollbar>
</template>
