<template>
  <div>
    <div class="tw-bg-white tw-p-5 tw-rounded-xl tw-mb-5">
      <span class="tw-text-xl">
        <span>{{ theUser.name }}</span>
        <span>({{ theUser.roleName }})</span>
      </span>
      <a-button class="tw-float-right" @click="goBack">返回</a-button>
    </div>

    <a-tabs class="tw-bg-white tw-rounded-xl">
      <a-tab-pane key="1" tab="科目范围"><UserPrivilegeCourse /> </a-tab-pane>
      <a-tab-pane key="2" tab="机构范围"><UserPrivilegeOrg /></a-tab-pane>
    </a-tabs>
  </div>
</template>

<script setup lang="ts">
import { getUser } from "@/api/userManagementPage";
import { useMainStore } from "@/store";
import { goBack } from "@/utils/utils";
import { onMounted, reactive } from "vue";
import { useRoute } from "vue-router";
import UserPrivilegeCourse from "./UserPrivilegeCourse.vue";
import UserPrivilegeOrg from "./UserPrivilegeOrg.vue";

const store = useMainStore();
store.currentLocation = "基础管理 / 用户管理 / 权限管理";

const route = useRoute();
const userId = route.params.userId as string;

let theUser = reactive<{ name: string; roleName: string }>({
  name: "",
  roleName: "",
});

async function search() {
  await fetchData();
}

async function fetchData() {
  const user = await getUser(+userId);
  Object.assign(theUser, user.data);
}

onMounted(async () => {
  await search();
});
</script>
