<script setup lang="ts">
import { ref } from "vue";
import ProcessList from "./components/process-list.vue";
import RoleList from "./components/role-list.vue";

const currentRole = ref<Record<string, string>>({});

function submit(actions: Array<string>) {
  console.log(actions);
}
</script>

<template>
  <div class="main role">
    <div class="flex bg-white justify-between h-[calc(100vh-85px)]">
      <RoleList
        class="min-w-200px mr-5"
        :current-role="currentRole"
        @change-current-role="role => (currentRole = role)"
      />
      <ProcessList
        flex-1
        :current-role="currentRole"
        @save-btn-click="submit"
      />
    </div>
  </div>
</template>

<style scoped lang="scss">
:deep(.el-dropdown-menu__item i) {
  margin: 0;
}
</style>
