<script setup lang="ts">
import { ref } from "vue";
import ProcessList from "./components/process-list.vue";
import RoleList from "./components/role-list.vue";
import { httpSave } from "/@/api/interest/processPermission";
import { ElMessage } from "element-plus"

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

const loading = ref(false)

async function submit(actions: Array<string>) {
  const action_data = actions.filter(action => !!action)
  const params = {
    action_data,
    roleid: currentRole.value.id
  }
  loading.value = true
  const {code,message} = await httpSave(params)
  loading.value = false
  if(code === 0){
    ElMessage.success('保存成功')
  }else{
    ElMessage.warning('保存失败')
  }
}
</script>

<template>
  <div class="main role" v-loading="loading">
    <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>
