<template>
  <div class="tw-h-screen tw-flex">
    <div class="tw-bg-white">
      <div class="tw-py-2 tw-flex tw-justify-center">
        <img class="qm-logo-img" />
      </div>
      <a-menu style="width: 240px" mode="inline" :openKeys="['sub1', 'sub2']">
        <a-sub-menu key="sub1">
          <template #icon> <span class="basic-icon"></span> </template>
          <template #title>基础管理</template>
          <a-menu-item v-if="store.isSuperAdmin" key="11">
            <router-link activeClass="active-route" to="/basic/rootOrg">
              学校管理
            </router-link>
          </a-menu-item>
          <a-menu-item v-if="store.isSuperAdmin" key="16">
            <router-link activeClass="active-route" to="/basic/auth">
              授权管理
            </router-link>
          </a-menu-item>
          <!-- <a-menu-item v-if="store.isSuperAdmin" key="12">
            <router-link activeClass="active-route" to="/basic/subOrg">
              机构管理
            </router-link>
          </a-menu-item> -->
          <!-- <a-menu-item v-if="store.isSuperAdmin" key="13">
            <router-link activeClass="active-route" to="/basic/role">
              角色管理
            </router-link>
          </a-menu-item> -->
          <a-menu-item v-if="!store.isCourseAdmin" key="14">
            <router-link activeClass="active-route" to="/basic/user">
              用户管理
            </router-link>
          </a-menu-item>
          <a-menu-item v-if="!store.isSuperAdmin" key="15">
            <router-link activeClass="active-route" to="/basic/course">
              科目管理
            </router-link>
          </a-menu-item>
        </a-sub-menu>
        <a-sub-menu v-if="!store.isSuperAdmin" key="sub2">
          <template #icon> <span class="project-icon"></span> </template>
          <template #title>项目管理</template>
          <a-menu-item key="21">
            <router-link
              activeClass="active-route"
              to="/project/projectManagement"
            >
              项目列表
            </router-link>
          </a-menu-item>
          <a-menu-item key="22">
            <router-link
              activeClass="active-route"
              to="/project/projectCompareManagement"
            >
              关联分析
            </router-link>
          </a-menu-item>
          <a-menu-item key="23">
            <router-link
              activeClass="active-route"
              to="/project/taskManagement"
            >
              任务管理
            </router-link>
          </a-menu-item>
        </a-sub-menu>
      </a-menu>
    </div>
    <div
      class="tw-h-screen"
      style="width: calc(100% - 240px); overflow: scroll; min-width: 960px"
    >
      <div
        class="tw-bg-white tw-flex tw-justify-between tw-items-center"
        style="border-left: 1px solid var(--app-main-bg-color); height: 56px"
      >
        <div>
          <span class="current-location-icon"></span>
          <span style="color: var(--app-secondary-text-color)">
            当前所在位置：<span class="location-teleport">{{
              store.currentLocation
            }}</span></span
          >
        </div>
        <div class="tw-flex tw-items-center tw-cursor-pointer tw-gap-2 tw-mr-2">
          <div class="tw-cursor-pointer" @click="visible = true">
            {{ store.userInfo.displayName }}
          </div>

          <div class="logout-icon" @click="doLogout"></div>
        </div>
      </div>
      <router-view class="tw-m-8"></router-view>
    </div>

    <a-modal
      v-model:visible="visible"
      title="修改密码"
      okText="确定"
      cancelText="取消"
      @ok="handleOk"
    >
      <a-form :labelCol="{ span: 6 }">
        <a-form-item label="新密码">
          <a-input-password v-model:value="newPassword"></a-input-password>
        </a-form-item>
        <a-form-item label="重复输入新密码">
          <a-input-password v-model:value="newPasswordCopy"></a-input-password>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { logout } from "@/api/loginPage";
import { changePassword } from "@/api/userManagementPage";
import { routeLogout } from "@/router";
import { useMainStore } from "@/store";
import { message } from "ant-design-vue";

const store = useMainStore();

async function doLogout() {
  await logout().then(() =>
    routeLogout({ cause: "主动退出", redirectTo: "/" })
  );
}

let visible = $ref(false);
let newPassword = $ref("");
let newPasswordCopy = $ref("");

async function handleOk() {
  if (newPassword.length < 6) {
    void message.error({ content: "密码长度必须至少大于6位" });
    return;
  }
  if (newPassword !== newPasswordCopy) {
    void message.error({ content: "两次输入的密码不一致" });
    return;
  }
  await changePassword(newPassword);
  void message.success("密码修改成功");
  visible = false;
}
</script>

<style scoped>
.active-route {
  color: #4d66fd;
}

.qm-logo-img {
  content: url(@/assets/qm-logo.png);
  height: 80px;
}

.basic-icon {
  background-image: url(./images/基础管理.png);
  margin-right: -2px;
  width: 16px;
  height: 16px;
}

.project-icon {
  background-image: url(./images/项目管理.png);
  margin-right: -2px;
  width: 16px;
  height: 16px;
}

.current-location-icon {
  background-image: url(./images/当前位置.png);
  margin-left: 20px;
  display: inline-block;
  width: 10px;
  height: 10px;
}

.logout-icon {
  background-image: url(./images/退出.png);
  width: 32px;
  height: 32px;
}
</style>
