<template>
  <div class="desktop">
    <div class="loginOut" @click="logout">退出</div>
    <div class="box">
        <div class="item" v-for="item in menu" @click="openMenu(item)">

          <div class="bg" :style="{ background: item.remark }"></div>
          <div class="itmeName">{{ item.menuName }}</div>
        <!-- <svg-icon :icon-class="item.icon" class="img" /> -->
    </div>

    </div>

  </div>
</template>

<script setup lang="ts">
import {isHttp} from '@/utils/validate'
import { ElMessageBox } from 'element-plus'
import Cookies from 'js-cookie'
import useUserStore from '@/store/modules/user'
const userStore = useUserStore()
import {getDesktopRouters} from '@index/api/menu'
const {proxy} = getCurrentInstance();
const openMenu =(item)=>{
debugger
   if(item.path){

     if(isHttp(item.path)){
        window.open(item.path);
     }else if(item.isFrame=='1'){

        Cookies.set('menu', JSON.stringify(item))
        window.open(window.window.location.origin+'/'+item.path);
     }


   }else{
      proxy.$modal.msgWarning("暂无数据");
   }
}
const menu = ref();
function logout() {
  ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    userStore.logOut().then(() => {
      location.href = import.meta.env.VITE_APP_CONTEXT_PATH;
    })
  }).catch(() => { });
}
onMounted(()=>{
  getDesktopRouters().then(res=>{
   menu.value = res.data

  })
})


</script>

<style lang="scss" scoped>
.desktop {

  height: 100%;
  background-image: url("../assets/desktop.jpg");
  background-size: cover;

  .box{
    display:flex;
    flex-wrap:wrap;
    width:80%;
    justify-content: center;
    margin:0 auto;
    align-items: center;
position:absolute;       top:50%;       left:50%;
transform: translate(-50%,-50%);
   .item {
    margin-bottom:50px;
    margin-left:2%;
    cursor: pointer;
    width: 18%;
    height: 160px;
    justify-content: right;
    position: relative;
    font-size: 1.5rem;
    color: #fff;
    display: flex;
    flex-direction: column;
    transition: .5s;
    position: relative;
	  transform: scale(1);
    &:after {
    content: "";
    display: block;
    position: absolute;
    top: -2px;
    left: -2px;
    height: 2px;
    width: 0;
    background-color: linear-gradient(to right, #ff6699, #ffcc99, #ffff99);
    animation: flow 2s infinite;
    transform-origin: left;
    }
    @keyframes flow {
      0% {
      width: 0;
      }
      50% {
      width: 100%;
      }
      100% {
      width: 0;
      }
  }
    &:hover{
      transform: scale(1.1) ;
       transition: all 0.5s;

    }
    .itmeName {
      padding: 10px;
      color: #fff;
      text-align: center;
      position: absolute;
      width: 100%;
      height: 100%;
      align-items: center;
      display: flex;
      letter-spacing:5px;
      justify-content: center;
      font-size: 3.5rem;
      font-weight: bold;
    }
    .bg {
      position: absolute;
      width: 100%;
      border-radius: 5px;
      height: 100%;
      opacity: 0.5;
    }
    .img {
      width: 20%;
      transform: scale(1.5);
      position: absolute;
      right: 0;
      margin: 10px;
      bottom: 5px;
    }
  }

  }
  .loginOut{
    position: absolute;
    right: 0;
    color: #00FFFF;
    border: 1px solid #00FFFF;
    padding: 5px 15px ;
    border-radius: 5px;
    margin: 10px;
    cursor: pointer;

  }

}
</style>
