<template>
  <div>
    <div
      v-if="store.isSuperAdmin"
      class="tw-bg-white tw-p-5 tw-rounded-xl tw-mb-5"
    >
      <RootOrgSelect v-model:value="rootOrgId" />
      <span class="tw-mr-4"></span>
      <a-button class="query-btn" @click="search">查询</a-button>
    </div>

    <div class="tw-bg-white tw-p-5 tw-rounded-xl">
      <a-table rowKey="id" :columns="columns" :data-source="data">
        <template #enable="{ text }">
          <a>{{ $filters.booleanEnableDisableFilter(text) }}</a>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getRoleList } from "@/api/roleManagementPage";
import { useMainStore } from "@/store";
import { message } from "ant-design-vue";
import { watch, onMounted } from "vue";

const store = useMainStore();
store.currentLocation = "基础管理 / 角色管理";

let rootOrgId = $ref(undefined as unknown as number);

let data = $ref([]);
let pageSize = $ref(10);
let pageNo = $ref(1);

async function search() {
  if (typeof rootOrgId !== "number") {
    void message.warn("请先选择学校。");
    return;
  }
  await fetchData();
}

watch(() => [pageNo, pageSize], fetchData);

async function fetchData() {
  const res = await getRoleList(rootOrgId);
  // console.log(res);
  data = res.data;
}

const columns = [
  {
    title: "角色代码",
    dataIndex: "code",
    width: 150,
  },
  {
    title: "角色名称",
    dataIndex: "name",
    width: 150,
  },
];

onMounted(async () => {
  rootOrgId = store.userInfo.rootOrgId;
  await search();
});
</script>
