<template>
  <div class="layout">
    <div class="layout-left">
      <div class="layout-logo">
        <img :class="['small','logo',isCollapse?'show':'hide']" src="/static/image/logo_small.png" alt="">
        <img :class="['big','logo',isCollapse?'hide':'show']" src="/static/image/logo_big.png" alt="">
      </div>
      <div class="layout-menu">
        <el-menu :unique-opened="true" class="layout-menu-inner" :collapse="isCollapse" :default-active="menuActive+''">
          <template v-for="(route,index) in menuRouter">
            <template v-if="!route.meta.hidden">
              <el-submenu :index="index+''" v-if="route.children" :key="route.path">
                <template slot="title">
                  <i :class="[route.meta.icon,'icon']"></i>
                  <span slot="title">{{ route.meta.title }}</span>
                </template>
                <template v-for="(item,subIndex) in route.children">
                  <el-menu-item v-if="!item.meta.hidden" :index="index+'-'+subIndex" @click="goto(item)" :key="item.path">
                    <i :class="[item.meta.icon,'icon']"></i>
                    <span slot="title">{{ item.meta.title }}</span>
                  </el-menu-item>
                </template>
              </el-submenu>
              <el-menu-item v-else :index="index+''" @click="goto(route)" :key="route.path">
                <i :class="[route.meta.icon,'icon']"></i>
                <span slot="title">{{ route.meta.title }}</span>
              </el-menu-item>
            </template>
          </template>
        </el-menu>
      </div>
    </div>
    <div class="layout-right">
      <div class="layout-breadcrumb">
        <div :class="['icon',isCollapse?'collapse':'']" @click="$emit('changeCollapse')">
          <div class="icon-1"></div>
          <div class="icon-2"></div>
          <div class="icon-3"></div>
        </div>
        <el-breadcrumb class="breadcrumb" separator="/">
          <el-breadcrumb-item v-for="item in breadcrumb" :key="item.path">
            <router-link :to="item.path||'/'">{{ item.meta.title }}</router-link>
          </el-breadcrumb-item>
        </el-breadcrumb>
        <div class="packet">
          <div class="item" @click="$bus.$emit('showPacket',true)" v-if="user.permission.includes('expo_invitation_management')">
            <span class="el-icon-star-off"></span>
            邀请函
          </div>
          <div class="item lock" @click="$bus.$emit('showPacket',true)" v-else>
            <span class="el-icon-lock"></span>
            邀请函
          </div>

          <div class="item" @click="$bus.$emit('showPacket',true)" v-if="user.permission.includes('expo_management')">
            <span class="el-icon-star-off"></span>
            预登记
          </div>
          <div class="item lock" @click="$bus.$emit('showPacket',true)" v-else>
            <span class="el-icon-lock"></span>
            预登记
          </div>
        </div>
        <div class="user-info">
          <div class="avatar">
            <img :src="this.user.avatar?this.user.avatar:'/static/image/avatar.webp'" alt="">
          </div>
          <div class="info-box">
            <div class="nick-name">
              {{ this.user.nickname }}
            </div>
            <div @click="goto({name:'systemSetting'})" class="button">
              <span class="el-icon-setting"></span>
              系统设置
            </div>
            <div @click="logout" class="button">
              <span class="el-icon-switch-button"></span>
              退出登录
            </div>
          </div>
        </div>
      </div>
      <div class="layout-body">
        <div class="body-inner" :class="{'animation':isAnimation}">
          <router-view @completion-init="$emit('completionInit')" :is-completion-init="isCompletionInit" class="view-inner" />
        </div>
        <div class="body-inner trans" :class="{'animation':isAnimation}" />
      </div>
    </div>
  </div>
</template>

<script>
import { canIShow } from '@/permission'
export default {
  name: 'Layout',
  props: [
    'isAnimation',
    'menuRouter',
    'menuActive',
    'breadcrumb',
    'isCollapse',
    'isCompletionInit'
  ],
  data() {
    return {
      packet: {}
    }
  },
  computed: {
    user() { return this.$store.state.user.user }
  },
  mounted() {
    this.getPacket()
  },
  methods: {
    getPacket() {
      let appList = this.user.app_list
      console.log(appList)
      appList.forEach(item => {
        if (item.app_code === 'EXPOREG') {
          this.packet = item
        }
      })
    },
    logout() {
      this.$confirm('确定要退出吗？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        callback: action => {
          if (action === 'confirm') {
            this.$store.dispatch('logout').then(() => {
              this.$router.push({
                name: 'login'
              })
            })
          }
        }
      })
    },
    changeCollapse() {
      this.$emit('changeCollapse')
    },
    goto(route) {
      if ('/' + route.path === this.$route.path) { return }
      this.$router.push({
        name: route.name
      })
    }
  }
}
</script>

<style scoped lang="scss">
@use '@/styles/variables.scss' as *;
.layout{
    background: #F9FAFB;
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr;
    .layout-left,.layout-right{
      display: grid;
      grid-template-rows: 80px 1fr;
    }
    .layout-left{
      height: 100%;
      position: relative;
      z-index: 1;
      box-shadow: 0 2px 6px -4px #00000022,0 10px 10px -3px #00000022;
      background: white;
      .layout-logo{
        border-bottom: 1px solid #E5E7EB;
        height: 80px;
        position: relative;
        .logo{
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          top: 16px;
          object-fit: contain;
          max-width: calc(100% - 32px);
          height: calc(100% - 32px);
          opacity: 1;
          transition-duration: 300ms;
          &.hide{
            opacity: 0;
          }
        }
      }
      .layout-menu{
        .layout-menu-inner{
          border-right: unset;
          .el-menu-item,.el-submenu{
            transition-duration: 300ms;
            color: $menuText;
            position: relative;
            border-right: 0px solid transparent;
            ::v-deep .el-menu{
              background-color: unset;
            }
            .icon{
              color: inherit;
              font-size: 22px;
              font-weight: bold;
            }
            &.is-active{
              color: $menuActiveText;
              background: $menuActiveBg;
              border-right: 4px solid $menuActive;
              &.el-submenu{
                padding-right: 4px;
                padding-bottom: 6px;
              }
            }
            &.hover{
              background: $menuHover;
            }
          }
          &:not(.el-menu--collapse) {
            width: 300px;
            min-height: 400px;
          }
        }
      }
    }
    .layout-right{
      height: 100%;
      .layout-breadcrumb{
        grid-gap: 24px;
        padding: 0 24px;
        display: flex;
        align-items: center;
        background: white;
        border-bottom: 1px solid #E5E7EB;
        height: 80px;
        .packet{
          margin-left: auto;
          display: flex;
          gap: 6px;
          .item{
            border: 1px solid #C4A793;
            cursor: pointer;
            font-size: 14px;
            background-image: linear-gradient(60deg,#EAD5C3,#C7A088);
            padding: 4px 10px;
            font-weight: bold;
            color: #543317;
            border-radius: 8px;
            &.lock{
              color: #3E4B60;
              border: 1px solid #D5DAE0;
              background-image: linear-gradient(60deg,#EFF2F6,#E1E6EE);
            }
          }
        }
        .user-info{
          position: relative;
          display: flex;
          justify-content: center;
          align-items: center;
          grid-gap: 16px;
          .avatar{
            cursor: pointer;
            transition-duration: 300ms;
            border-radius: 50%;
            height: 42px;
            aspect-ratio: 1;
            background: #b0b2b6;
            z-index: 5;
            overflow: hidden;
            img{
              width: 100%;
              height: 100%;
            }
          }
          .info-box{
            backdrop-filter: blur(16px);
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            padding: 16px;
            position: absolute;
            transform-origin: 100% 0;
            right: 0;
            z-index: 4;
            top: 0;
            width: 220px;
            height: 200px;
            background: #ffffff88;
            border-radius: 8px;
            box-shadow: 0 1px 4px 0 #00000022;
            opacity: 0;
            pointer-events: none;
            transition-duration: 300ms;
            scale: 0.9;
            .nick-name{
              text-align: right;
              width: 100%;
              overflow: hidden;
              font-size: 20px;
              font-weight: bold;
              color: $menuText;
              padding-right: 48px;
              padding-bottom: 16px;
            }
            .button{
              text-align: right;
              border-radius: 4px;
              width: 100%;
              transition-duration: 300ms;
              cursor: pointer;
              padding: 8px 24px;
              color: $menuText;
              border: 1px solid transparent;
              &:hover{
                border-left-color: #ffffff88;
                border-top-color: #ffffff88;
                border-bottom-color: #2563EB11;
                border-right-color: #2563EB11;
                color: $menuActiveText;
                background: $menuActiveBg;
              }
            }
          }
          &:hover{
            .avatar{
              scale: 1.4;
              box-shadow: 0 0 6px 2px #00000022;
            }
            .info-box{
              scale: 1;
              opacity: 1;
              pointer-events: auto;
            }
          }
        }
        .icon{
          transition-duration: 300ms;
          cursor: pointer;
          box-sizing: border-box;
          padding: 10px 8px;
          width: 36px;
          height: 36px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          grid-gap: 3px;
          border-radius: 6px;
          .icon-1,.icon-2,.icon-3{
            transition-duration: 300ms;
            width: 20px;
            height: 3px;
            background: $menuText;
            border-radius: 1.5px;
          }
          &:hover{
            grid-gap: 0;
            .icon-1,.icon-2,.icon-3{
              transform-origin: 1.5px 50%;
            }
            .icon-1{
              margin-bottom: -3px;
              transform: rotate(45deg);
              width: 16px;
            }
            .icon-2{
              transform: scaleX(0);
            }
            .icon-3{
              width: 16px;
              margin-top: -3px;
              transform: rotate(-45deg);
            }
            &.collapse{
              .icon-1,.icon-2,.icon-3{
                transform-origin: calc(100% - 1.5px) 50%;
              }
              .icon-1{
                transform: rotate(-45deg);
              }
              .icon-3{
                transform: rotate(45deg);
              }
            }
          }
        }
      }
      .layout-body{
        position: relative;
        height: 100%;
        padding: 24px;
        .body-inner{
          position: relative;
          border-radius: 16px;
          width: 100%;
          background: white;
          height: 100%;
          box-shadow: 0 1px 4px 0 #00000022;
          transition-duration: 0ms;
          opacity: 1;
          transform: scale(1);
          .view-inner{
            padding: 16px;
            animation: viewIn 200ms;
          }
          &.animation{
            transition-duration: 400ms;
            opacity: 0;
            transform: scale(0.9);
          }
          &.trans{
            pointer-events: none;
            position: absolute;
            top: 24px;
            left: 24px;
            width: calc(100% - 48px);
            height: calc(100% - 48px);
            transform: translateY(820px) scale(1);
            opacity: 0;
            &.animation{
              opacity: 1;
              transform: translateY(0) scale(1);
            }
          }
          @keyframes viewIn {
            from{opacity: 0}
            to{opacity: 1}
          }
        }
      }
    }
  }
</style>
