<template>
  <div>
    <div class="tw-bg-white tw-p-5 tw-rounded-xl tw-mb-5">
      <a-input
        v-model:value="code"
        style="width: 178px"
        placeholder="学校代码"
        allowClear
      ></a-input>
      <span class="tw-mr-4"></span>
      <a-input
        v-model:value="name"
        class="tw-mr-4"
        style="width: 178px"
        placeholder="学校名称"
        allowClear
      ></a-input>
      <span class="tw-mr-4"></span>
      <StateSelect v-model:value="enable" />
      <span class="tw-mr-4"></span>
      <a-button class="query-btn" @click="clickSearch">查询</a-button>

      <a-button style="float: right" @click="handleRootOrgSync">同步</a-button>
    </div>

    <div class="tw-bg-white tw-p-5 tw-rounded-xl">
      <a-table
        rowKey="code"
        :columns="columns"
        :data-source="data"
        :pagination="{
          pageSize: pageSize,
          current: pageNo,
          total: totalElements,
          showTotal: () => ``,
          onChange: (pageNoChanged, pageSizeChanged) => {
            pageNo = pageNoChanged;
            pageSize = pageSizeChanged;
          },
        }"
      >
        <template #enable="{ text }">
          <a>{{ $filters.booleanEnableDisableFilter(text) }}</a>
        </template>
        <template #action="{ record }">
          <span>
            <a-button @click="showModal(record)">编辑</a-button>
            <a-button @click="editRootOrgSettings(record.id)"
              >特殊设置</a-button
            >
          </span>
        </template>
      </a-table>
    </div>
    <a-modal
      v-model:visible="visible"
      title="学校信息页"
      okText="确定"
      cancelText="取消"
      @ok="handleOk"
    >
      <a-form :labelCol="{ span: 5 }">
        <a-form-item label="学校代码">
          <a-input v-model:value="rootOrgObj.code" disabled></a-input>
        </a-form-item>
        <a-form-item label="学校名称">
          <a-input v-model:value="rootOrgObj.name" disabled></a-input>
        </a-form-item>
        <a-form-item label="状态">
          <a-radio-group v-model:value="rootOrgObj.enable" disabled>
            <a-radio :value="true">启用</a-radio>
            <a-radio :value="false">禁用</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="学校域名">
          <a-input v-model:value="rootOrgObj.domainName"></a-input>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { getRootOrgList, syncRootOrg, updateRootOrg } from "@/api/rootOrgPage";
import router from "@/router";
import { useMainStore } from "@/store";
import { RootOrg } from "@/types";
import { message } from "ant-design-vue";
import { ref, onMounted, reactive } from "vue";

const store = useMainStore();
store.currentLocation = "基础管理 / 学校管理";

let code = $ref("");
let name = $ref("");
let enable = $ref(undefined as undefined | boolean);

let data = $ref<RootOrg[]>([]);
let pageSize = $ref(10);
let pageNo = $ref(1);
let totalElements = $ref(0);

async function search() {
  const res = await getRootOrgList({ code, name, enable, pageSize, pageNo });
  // console.log(res);
  data = res.data.content;
  pageNo = res.data.pageNo;
  pageSize = res.data.pageSize;
  totalElements = res.data.totalElements;
}

async function clickSearch() {
  pageNo = 1;
  await search();
}

const columns = [
  {
    title: "学校代码",
    dataIndex: "code",
    width: 150,
  },
  {
    title: "学校名称",
    dataIndex: "name",
    width: 150,
  },
  {
    title: "状态",
    dataIndex: "enable",
    slots: { customRender: "enable" },
  },
  {
    title: "学校域名",
    dataIndex: "domainName",
  },
  {
    title: "更新时间",
    dataIndex: "updateTime",
  },
  {
    title: "操作",
    key: "action",
    slots: { customRender: "action" },
  },
];

onMounted(async () => {
  await search();
});

const visible = ref<boolean>(false);

const showModal = (record: RootOrg) => {
  Object.assign(rootOrgObj, record);
  visible.value = true;
};

const editRootOrgSettings = (orgId: number) => {
  void router.push("/basic/rootOrg/edit/" + orgId);
};

const handleOk = async () => {
  await updateRootOrg({ domainName: rootOrgObj.domainName, id: rootOrgObj.id });
  visible.value = false;
  await search();
  void message.success({ content: "操作成功" });
};

const rootOrgObj = reactive({
  code: "",
  name: "",
  enable: true,
  domainName: "",
});

async function handleRootOrgSync() {
  await syncRootOrg();
  void message.success("操作成功");
  await search();
}
</script>
