<script setup lang="ts">
import { ref, onMounted } from "vue";
import ProcessList from "./components/process-list.vue";
import { httpSave } from "/@/api/interest/processPermission";
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
import { useUserStoreHook } from "/@/store/modules/user";
import { useCompany } from "/@/hooks/core/useCompany";
import RoleList from "./components/role-list.vue";
import { ElMessage } from "element-plus"

const currentRole = ref<Record<string, string>>({});
const { currentCompany } = useCompany();
const loading = ref(false)
const powers = ref([]);

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 } = await httpSave(params)
  loading.value = false
  if(code === 0){
    ElMessage.success('保存成功')
  }else{
    ElMessage.warning('保存失败')
  }
}

onMounted(() => { powers.value = useUserStoreHook().getMenuActions("action") });
</script>

<template>
  <div class="main role" v-loading="loading">
    <div class="flex bg-white justify-between h-[calc(100vh-85px)]" v-show="powers.some(i => i == '001') && currentCompany.companyNo">
      <role-list
        class="min-w-200px mr-5"
        :current-role="currentRole"
        :companyNo="currentCompany.companyNo"
        @change-current-role="role => (currentRole = role)"
      />
      <process-list flex-1 :current-role="currentRole" @save-btn-click="submit" />
    </div>

    <NoAuth v-show="!powers.some(i => i == '001')" />
      <h1 class="warning-message" v-show="!currentCompany.companyNo">
        <el-button text size="large" :icon="useRenderIcon('warning-filled')" disabled  />
        请在右上角选择一家业务公司
      </h1>
  </div>
</template>

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

.warning-message {
  position: absolute;
  top: 50%;
  left: 50%;
  font-weight: 700;
  transform: translate(-50%, -50%);
  font-size: 16px;

  :deep(.el-button) {
    padding: 0px;
  }
}
</style>
