<!--
* @FileDescription: layout
* @Author: 黄琪勇
* @Date:2024-03-20 18:06:33
-->
<template>
   <div class="layout">
      <div class="head">
         <el-dropdown popper-class="headDropdown" class="avatar-con" trigger="click" @visible-change="visibleChange">
            <div class="avatar">
               <div class="imgCon"><el-image class="avatarImg" :src="userInfo.avatar || require('@/img/layout/userImg.png')" /></div>
               <div class="name">
                  <ellipsisScroll :title="userInfo.username || ''" />
               </div>
               <img class="horn" :class="{ isVisible: visible }" src="@/img/layout/horn.png" />
            </div>
            <template #dropdown>
               <div class="dropdown">
                  <div class="avatar-item">
                     <el-image class="avatarImg" :src="userInfo.avatar || require('@/img/layout/userImg.png')" />
                     <div class="userInfo">
                        <div class="realName"><ellipsisScroll :title="userInfo.username || ''" /></div>
                        <div class="phone">{{ userInfo.phone }}</div>
                     </div>
                  </div>
                  <div class="logout-item">
                     <div class="logoutBtn" @click="handleLogout">
                        <img src="@/img/layout/logout.png" />
                        <div class="text">退出登录</div>
                     </div>
                  </div>
               </div>
            </template>
         </el-dropdown>
         <img
            @click="
               () => {
                  handleFullscreen()
               }
            "
            class="fullscreen"
            :src="isFullscreen ? require('@/img/layout/fullscreenClose.png') : require('@/img/layout/fullscreen.png')"
         />
      </div>
      <RouterView />
   </div>
</template>

<script setup lang="ts">
import userStore from "@/store/modules/user"
import { computed, ref } from "vue"
import { ElMessage } from "element-plus"
import { isFullscreen, handleFullscreen } from "@/libs/fullscreen"

const userStoreHook = userStore()

const userInfo = computed(() => {
   return userStoreHook.userInfo
})

const visible = ref(false)
function visibleChange(value: boolean) {
   visible.value = value
}
function handleLogout() {
   userStore()
      .loginOut()
      .then()
      .catch((err: apiResDataType) => {
         ElMessage.error(err.message)
      })
}
</script>

<style lang="scss" scoped>
.layout {
   width: 100%;
   height: 100%;
   background: linear-gradient(180deg, #ffd884 0%, #ffa943 100%);
   box-shadow: 0px 11px 15px 0px #63bd73, inset 0px 1px 14px 0px rgba(255, 255, 255, 0.5);
   .head {
      padding-top: 26px;
      padding-right: 54px;
      display: flex;
      justify-content: flex-end;
      .avatar-con {
         cursor: pointer;
         padding-left: 30px;
         padding-right: 14px;
         height: 46px;
         background: #edeff0;
         border-radius: 23px;
         border: 5px solid #fff8f8;
         position: relative;
         .avatar {
            display: flex;
            align-items: center;
         }
         .imgCon {
            position: absolute;
            top: 50%;
            left: -30px;
            transform: translate(0, -50%);
            width: 62px;
            height: 62px;
            border: 4px solid #ffffff;
            border-radius: 50%;
            .avatarImg {
               border-radius: 50%;
               width: 100%;
               height: 100%;
            }
         }
         .name {
            margin-left: 6px;
            font-size: 18px;
            color: #244b55;
            font-weight: 500;
            width: 56px;
            text-align: center;
            overflow: hidden;
         }
         .horn {
            width: 10px;
            height: 6px;
            margin-left: 8px;
            &.isVisible {
               transform: rotate(180deg);
            }
         }
      }
      .fullscreen {
         margin-left: 17px;
         width: 45px;
         height: 45px;
         cursor: pointer;
         &:active {
            opacity: $opacity-hover;
         }
      }
   }
}
.dropdown {
   width: 300px;
   padding: 20px;
   & > div {
      border-bottom: 1px solid #f2f2f2;
      &:last-child {
         border-bottom: none;
      }
   }
   .avatar-item {
      display: flex;
      padding-bottom: 16px;
      .avatarImg {
         width: 48px;
         height: 48px;
         border-radius: 50%;
         flex-shrink: 0;
      }
      .userInfo {
         margin-left: 16px;
         flex-grow: 1;
         overflow: hidden;
         .realName {
            font-weight: 600;
            font-size: 20px;
            line-height: 28px;
            height: 28px;
            color: #333333;
         }
         .phone {
            font-weight: 400;
            font-size: 16px;
            color: #777777;
            line-height: 22px;
         }
      }
   }
   .logout-item {
      padding-top: 16px;
      .logoutBtn {
         cursor: pointer;
         padding: 0 12px;
         width: 100%;
         height: 50px;
         border-radius: 10px;
         display: flex;
         align-items: center;
         &:hover {
            background: #f5f6fa;
         }
         > img {
            width: 22px;
            height: 23px;
         }
         .text {
            margin-left: 20px;
            font-weight: 500;
            font-size: 18px;
            color: #333333;
         }
      }
   }
}
</style>
<style lang="scss">
.headDropdown.el-dropdown__popper.el-popper {
   box-shadow: 0px 2px 17px 0px rgba(0, 0, 0, 0.08);
   background: #ffffff;
   border-radius: 16px;
   inset: 84px 54px auto auto !important;
   .el-popper__arrow {
      display: none;
   }
}
</style>
