<template>
  <div class="header">
    <div class="left">
      <div class="logo">管理平台</div>
      <div class="menu">
        <ul>
          <template v-for="(item, index) in MENU" :key="index">
            <li
              @click="switchMenu(item.model)"
              :class="{ active: item.model === menuStore.getModel }"
            >
              <div v-for="item1 in 4" :key="item1" :class="'horn' + item1" />
              <div class="title">{{ item.title }}</div>
            </li>
          </template>
        </ul>
      </div>
    </div>
    <div class="user">
      <el-dropdown
        trigger="click"
        placement="bottom-end"
        @command="dropdownCommand"
      >
        <div class="user_info">
          <el-avatar :size="23" fit="fill" :src="data.avatar" />
          <span>{{ userStore.getUserInfo.NAME }}</span>
          <icon-down theme="filled" size="16" fill="#a2c2d3" :strokeWidth="3" />
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="modifyInformation">
              修改信息
            </el-dropdown-item>
            <el-dropdown-item command="modifyAvatar">
              修改头像
            </el-dropdown-item>
            <el-dropdown-item command="signOut">退出</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <update-info
      v-model:visible="data.userDialog.visible"
      v-model:form="data.userDialog.form"
    />
    <update-avatar
      v-model:visible="data.avatarDialog.visible"
      v-model:form="data.avatarDialog.form"
    />
  </div>
</template>

<script setup>
import { onBeforeUnmount, reactive } from "vue";
import { useRouter } from "vue-router";
import { useMenuStore } from "@/pinia/menu";
import { useUserStore } from "@/pinia/user";
import { MENU } from "@/assets/js/constant";
import { getInfo, getUserInfo, logout } from "@/request/api";
import { useMiscellaneousStore } from "@/pinia/miscellaneous.js";
import UpdateInfo from "./components/update_info.vue";
import UpdateAvatar from "./components/update_avatar.vue";
import { checkImgExists, addingPrefixToFile } from "@/assets/js/utils.js";

defineOptions({
  name: "LayoutHeader",
});
const FILE_URL = import.meta.env.VITE_FILE_URL;
let webSocket;
const router = useRouter();
const menuStore = useMenuStore();
const userStore = useUserStore();
const miscellaneousStore = useMiscellaneousStore();
const data = reactive({
  avatar: "",
  userDialog: {
    visible: false,
    form: {},
  },
  avatarDialog: {
    visible: false,
    form: {},
  },
});
const dropdownCommand = async (command) => {
  if (command === "signOut") {
    await fnSignOut();
  }
  if (command === "modifyInformation") {
    await fnGetUserInfo();
  }
  if (command === "modifyAvatar") {
    data.avatarDialog.visible = true;
    data.avatarDialog.form.file = addingPrefixToFile([
      { FILEPATH: userStore.getUserInfo.userPhoto },
    ]);
  }
};
const fnGetUserInfo = async () => {
  const resData = await getUserInfo({
    USER_ID: userStore.getUserInfo.USER_ID,
  });
  data.userDialog.visible = true;
  data.userDialog.form = resData.pd;
};
const switchMenu = (model) => {
  menuStore.setModel(model);
};
const fnGetInfo = async () => {
  const resData = await getInfo();
  try {
    await checkImgExists(FILE_URL + resData.userPhoto);
    data.avatar = FILE_URL + resData.userPhoto;
  } catch {
    data.avatar = new URL(
      "../../../assets/images/public/tx.png",
      import.meta.url
    ).href;
  }
  userStore.setUserInfo({
    ...userStore.getUserInfo,
    ...resData,
  });
  miscellaneousStore.setOnlineAddress(resData.onlineAdress);
  webSocket = new WebSocket(encodeURI("ws://" + resData.onlineAdress));
  webSocket.onopen = () => {
    webSocket.send("[join]" + resData.USERNAME);
  };
  webSocket.onmessage = (message) => {
    const messageMsg = JSON.parse(message.data);
    if (messageMsg.type === "goOut") {
      fnSignOut();
    } else if (messageMsg.type === "thegoout") {
      fnSignOut();
    }
  };
};
fnGetInfo();
const fnSignOut = async () => {
  await logout();
  webSocket && webSocket.close();
  userStore.$reset();
  await router.replace("/login");
};
onBeforeUnmount(() => {
  webSocket && webSocket.close();
  webSocket = null;
});
</script>

<style lang="scss" scoped>
.header {
  background-image: url("/src/assets/images/public/headerbg.png");
  background-repeat: no-repeat;
  background-size: 660px 70px;
  background-color: #030f2f;
  border-bottom: 1px solid #1f3869;
  position: relative;

  .left {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 99;
    width: max-content;

    .logo {
      width: 500px;
      height: var(--el-header-height);
      line-height: var(--el-header-height);
      padding-left: 20px;
      color: #fff;
      font-size: 20px;
      font-weight: 700;
      font-family: cursive;
    }

    .menu {
      ul {
        display: flex;

        li {
          width: 120px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          cursor: pointer;
          background-color: #051748;
          clip-path: polygon(0% 0%, 80% 0%, 100% 100%, 20% 100%);
          position: relative;
          box-shadow: rgba(11, 62, 110, 0.7) 0 0 13px inset;
          color: #fff;

          &.active {
            background-image: url("/src/assets/images/public/tguang.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
          }

          @for $i from 1 through 4 {
            .horn#{$i} {
              width: 8px;
              height: 8px;
              background-image: url("/src/assets/images/public/menu_horn#{$i}.png");
              background-repeat: no-repeat;
              background-size: 100% 100%;
              position: absolute;
              z-index: 2;
              @if $i == 1 {
                top: 0;
                left: 2px;
              }
              @if $i == 2 {
                top: 0;
                right: 21px;
              }
              @if $i == 3 {
                bottom: 0;
                left: 21px;
              }
              @if $i == 4 {
                bottom: 0;
                right: 2px;
              }
            }
          }

          .title {
            padding-left: 3px;
            font-size: 14px;
          }
        }
      }
    }
  }

  .user {
    width: 500px;
    height: 70px;
    background-image: url("/src/assets/images/public/userbg.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: absolute;
    right: 0;
    top: 0;
    border-bottom: 1px solid #1f3869;

    .el-dropdown {
      margin-right: 55px;
      cursor: pointer;
      position: absolute;
      z-index: 999;
    }

    .user_info {
      display: flex;
      align-items: center;

      span:nth-child(2) {
        color: #ece8e8;
        margin-left: 10px;
        margin-right: 10px;
      }
    }
  }
}
</style>
