<template>
  <div class="fast-menu">
    <el-dropdown
      trigger="click"
      @command="menuClick"
      placement="top-end"
      @visible-change="handleVisibleChange"
      append-to-body="true"
    >
      <img class="img" :src="imgsrc" alt="" />
      <!-- <el-icon color="#fff" size="24px">
        <Plus v-if="!showMenu" />
        <Close v-else />
      </el-icon> -->
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item
            v-for="(item, index) in quickStore.quickMenus"
            :key="index"
            :command="item.menuId"
          >
            {{ returnMenuName(item.menuId) }}
          </el-dropdown-item>
          <el-dropdown-item :command="-1">
            <el-icon>
              <Edit color="#4080FF" />
            </el-icon>
            <span style="color: #4080ff">编辑</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>
<script lang="ts" setup>
import { ref, computed } from "vue";
import { useQuickStore, usePermissionStore, useUserStore } from "@/store";
import router from "@/router";

const userStore = useUserStore();
const quickStore = useQuickStore();
const permissionStore = usePermissionStore();
console.log("permissionStore", permissionStore.menus);

function menuClick(menuId: number) {
  console.log("menuId", menuId);
  if (menuId == -1) {
    if (userStore.userInfo.id == 1) {
      return router.push("/system/commonlyUsedMenu");
    } else {
      return router.push("/commonlyUsedMenu");
    }
  }
  permissionStore.menuJump(menuId);
}

function returnMenuName(menuId: number) {
  return permissionStore.returnMenuName(menuId);
}

const imgsrc = computed(() => {
  return showMenu.value
    ? new URL("/src/assets/images/close.png", import.meta.url).href
    : new URL("/src/assets/images/plus.png", import.meta.url).href;
});
const showMenu = ref(false);
function handleVisibleChange(visible: boolean) {
  showMenu.value = visible;
}
</script>
<style lang="scss" scoped>
.fast-menu {
  position: fixed;
  $size: 40px;
  right: 40px;
  bottom: 40px;
  width: $size;
  height: $size;
  .img {
    width: $size;
    height: $size;
  }
  // box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
  // background: linear-gradient(135deg, #409eff, #3a84ff);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  .svg-icon {
    margin-right: 0;
    color: #fff;
  }
}
</style>
