<template>
  <div class="user">
    <ComponentSizeDrop
      v-model:value="themeConfig.globalComponentSize"
      @change="handleThemeConfigChange('reload')"
    />

    <I18N
      v-model:value="themeConfig.globalI18n"
      @change="handleThemeConfigChange"
    />

    <div class="user-icon" @click="onOpenMenusSearchModal">
      <i class="el-icon-search" title="菜单搜索"></i>
    </div>

    <div class="user-icon" @click="handleLayoutConfigClick">
      <i class="icon-skin iconfont" title="布局配置"></i>
    </div>

    <div class="user-icon">
      <el-popover
        placement="bottom"
        :width="320"
        trigger="click"
        v-model:visible="isShowUserNewsPopover"
      >
        <template #reference>
          <el-badge
            is-dot
            type="danger"
            @click="isShowUserNewsPopover = !isShowUserNewsPopover"
          >
            <i class="el-icon-bell" title="消息"></i>
          </el-badge>
        </template>
        <UserNews />
      </el-popover>
    </div>

    <div class="user-icon" @click="handleScreenfullClick">
      <i
        class="iconfont"
        :title="isScreenfull ? '关全屏' : '开全屏'"
        :class="!isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'"
      ></i>
    </div>

    <el-dropdown :show-timeout="70" :hide-timeout="50">
      <span class="user-avatar">
        <img :src="userInfo.photo" class="user-avatar-img" />
        {{ userInfo.username === "" ? "test" : userInfo.username }}
        <i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="/home">首页</el-dropdown-item>
          <el-dropdown-item command="wareHouse">代码仓库</el-dropdown-item>
          <el-dropdown-item command="/personal">个人中心</el-dropdown-item>
          <el-dropdown-item command="/404">404</el-dropdown-item>
          <el-dropdown-item command="/401">401</el-dropdown-item>
          <el-dropdown-item divided command="logOut">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <MenusSearch v-model:visible="menusSearchVisible" />
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, ref } from "vue";
import screenfull from "screenfull";
import { ElMessage } from "element-plus";
import ComponentSizeDrop from "../components/component-size-drop.vue";
import I18N from "../components/i18n-drop.vue";
import { useStore } from "@/hooks/useStore";
import { Local } from "@/utils/storage";
import MenusSearch from "../components/menus-search.vue";
import UserNews from "../components/user-news.vue";

export default defineComponent({
  name: "User",

  setup() {
    const menusSearchVisible = ref(false);
    const store = useStore();
    const isShowUserNewsPopover = ref(false);
    const isScreenfull = ref(false);

    const handleScreenfullClick = () => {
      if (!screenfull.isEnabled) {
        ElMessage.error("当前设备不支持全屏");
        return;
      }
      screenfull.toggle();
      isScreenfull.value = !isScreenfull.value;
    };

    const onOpenMenusSearchModal = () => {
      menusSearchVisible.value = true;
    };
    /**
     * 监听全局组件大小的变化
     */
    const handleThemeConfigChange = (text: string) => {
      Local.set("themeConfig", themeConfig.value);
      if (text === "reload") window.location.reload();
    };
    /**
     * 布局配置按钮点击
     */
    const handleLayoutConfigClick = () => {
      themeConfig.value.isDrawer = true;
      Local.set("themeConfig", themeConfig.value);
    };

    const themeConfig = computed(() => {
      return store.state.themeConfig;
    });
    const userInfo = computed(() => {
      return store.state.userInfo;
    });

    return {
      menusSearchVisible,
      themeConfig,
      isShowUserNewsPopover,
      isScreenfull,
      userInfo,
      handleScreenfullClick,
      handleThemeConfigChange,
      handleLayoutConfigClick,
      onOpenMenusSearchModal,
    };
  },

  components: {
    ComponentSizeDrop,
    I18N,
    MenusSearch,
    UserNews,
  },
});
</script>

<style lang="scss">
.user {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-end;

  &-icon {
    height: 50px;
    line-height: 50px;
    padding: 0 10px;
    color: var(--bg-topBarColor);
    cursor: pointer;
    &:hover {
      background: rgba(0, 0, 0, 0.04);
      i {
        display: inline-block;
        animation: logoAnimation 0.3s ease-in-out;
      }
    }
  }

  &-avatar {
    margin-right: 15px;
    color: var(--bg-topBarColor);
    &-img {
      width: 25px;
      height: 25px;
      border-radius: 100%;
    }
  }
}
</style>
