<template>
  <div class="flex mr-5 top-menu">
    <div class="px-3 text-center h-61px cursor-pointer" v-for="(v, index) in menusRef" :key="index"
      style="line-height: 20px;" :class="`${actives === index ? 'active' : 0}`" @click="select(v, index)">
      <Icon :icon="v.icon" class="mt-2" :size="22" />
      <div>{{ v.name }}</div>
    </div>
  </div>

  <Dropdown placement="bottomLeft" :overlayClassName="`${prefixCls}-dropdown-overlay`">
    <span :class="[prefixCls, `${prefixCls}--${theme}`]" class="flex">
      <img :class="`${prefixCls}__header`" :src="getAvatarUrl" />
      <span :class="`${prefixCls}__info hidden md:block`">
        <span :class="`${prefixCls}__name  `" class="truncate">
          {{ getUserInfo.realname }}
        </span>
      </span>
    </span>

    <template #overlay>
      <Menu @click="handleMenuClick">
        <!-- <MenuItem key="doc" :text="t('layout.header.dropdownItemDoc')" icon="ion:document-text-outline" v-if="getShowDoc" /> -->
        <MenuDivider v-if="getShowDoc" />
        <!-- <MenuItem key="account" :text="t('layout.header.dropdownItemSwitchAccount')" icon="ant-design:setting-outlined" /> -->
        <MenuItem key="password" :text="t('layout.header.dropdownItemSwitchPassword')" icon="ant-design:edit-outlined" />
        <!-- <MenuItem key="depart" :text="t('layout.header.dropdownItemSwitchDepart')" icon="ant-design:cluster-outlined" /> -->
        <!-- <MenuItem key="cache" :text="t('layout.header.dropdownItemRefreshCache')" icon="ion:sync-outline" /> -->
        <!-- <MenuItem
            v-if="getUseLockPage"
            key="lock"
            :text="t('layout.header.tooltipLock')"
            icon="ion:lock-closed-outline"
        />-->
        <MenuItem key="logout" :text="t('layout.header.dropdownItemLoginOut')" icon="ion:power-outline" />
      </Menu>
    </template>
  </Dropdown>
  <LockAction @register="register" />
  <DepartSelect ref="loginSelectRef" />
  <UpdatePassword ref="updatePasswordRef" />
</template>
<script lang="ts">
// components
import { useSplitMenu } from '/@/layouts/default/menu/useLayoutMenu';
import { Dropdown, Menu } from 'ant-design-vue';
import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum';
import { defineComponent, computed, ref, toRef, watch, watchEffect } from 'vue';
import { Icon } from '/@/components/Icon';
import { SITE_URL } from '/@/settings/siteSetting';
import { useUserStore } from '/@/store/modules/user';
import menusStore from '/@/store/menu'
import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
import { useI18n } from '/@/hooks/web/useI18n';
import { useDesign } from '/@/hooks/web/useDesign';
import { useModal } from '/@/components/Modal';
import { useMessage } from '/src/hooks/web/useMessage';
import { useGo } from '/@/hooks/web/usePage';
import headerImg from '/@/assets/images/header.jpg';
import { propTypes } from '/@/utils/propTypes';
import { openWindow } from '/@/utils';
import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
import { refreshCache, queryAllDictItems } from '/@/views/system/dict/dict.api';
import { DB_DICT_DATA_KEY } from '/src/enums/cacheEnum';
import { removeAuthCache, setAuthCache } from '/src/utils/auth';
import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
import { useRouter } from 'vue-router';

type MenuEvent = 'logout' | 'doc' | 'lock' | 'cache' | 'depart';
const { createMessage } = useMessage();
export default defineComponent({
  name: 'UserDropdown',
  components: {
    Dropdown,
    Icon,
    Menu,
    MenuItem: createAsyncComponent(() => import('./DropMenuItem.vue')),
    MenuDivider: Menu.Divider,
    LockAction: createAsyncComponent(() => import('../lock/LockModal.vue')),
    DepartSelect: createAsyncComponent(() => import('./DepartSelect.vue')),
    UpdatePassword: createAsyncComponent(() => import('./UpdatePassword.vue')),
  },
  props: {
    theme: propTypes.oneOf(['dark', 'light']),
    splitType: {
      type: Number as PropType<MenuSplitTyeEnum>,
      default: MenuSplitTyeEnum.NONE,
    },

    isHorizontal: propTypes.bool,
    // menu Mode
    menuMode: {
      type: [String] as PropType<Nullable<MenuModeEnum>>,
      default: '',
    },
  },
  setup(props) {
    const actives = ref(0)
    // 一级路由
    const { menusRef } = useSplitMenu(toRef(props, 'splitType'));
    let router = useRouter();
    const { prefixCls } = useDesign('header-user-dropdown');
    const { t } = useI18n();
    const { getShowDoc, getUseLockPage } = useHeaderSetting();
    const userStore = useUserStore();
    const go = useGo();
    const menus = menusStore()

    watchEffect(() => {
      menusRef.value.forEach((v: any, index) => {

        if (menus.menus.title == v.title)
          actives.value = index
      })
    });

    const getUserInfo = computed(() => {
      const { realname = '', avatar, desc } = userStore.getUserInfo || {};
      return { realname, avatar: avatar || headerImg, desc };
    });

    const getAvatarUrl = computed(() => {
      let { avatar } = getUserInfo.value;
      if (avatar == headerImg) {
        return avatar;
      } else {
        return getFileAccessHttpUrl(avatar);
      }
    });

    const [register, { openModal }] = useModal();

    function select(v, index) {
      // 存起来
      actives.value = index
      console.log(v, 'v')
      menus.setMenus(v)
      if (v?.children) {
        console.log(v?.children, '22')
        if (v?.children[0]?.children) {
          if (v?.children[0]?.children[0].hideTab) {
            go(v?.children[0].path)
          } else {
            go(v?.children[0].children[0]?.path)
          }

        } else {
          go(v?.children[0]?.path)
        }

      } else {
        go(v.path)
      }


    }
    /**
     * 多部门弹窗逻辑
     */
    const loginSelectRef = ref();
    function handleLock() {
      openModal(true);
    }

    //  login out
    function handleLoginOut() {
      userStore.confirmLoginOut();
    }

    // open doc
    function openDoc() {
      openWindow(SITE_URL);
    }

    // 清除缓存
    async function clearCache() {
      const result = await refreshCache();
      if (result.success) {
        const res = await queryAllDictItems();
        removeAuthCache(DB_DICT_DATA_KEY);
        setAuthCache(DB_DICT_DATA_KEY, res.result);
        createMessage.success('刷新缓存完成！');
      } else {
        createMessage.error('刷新缓存失败！');
      }
    }
    // 切换部门
    function updateCurrentDepart() {
      loginSelectRef.value.show();
    }
    // 修改密码
    const updatePasswordRef = ref();
    function updatePassword() {
      updatePasswordRef.value.show(userStore.getUserInfo.username);
    }

    function handleMenuClick(e: { key: MenuEvent }) {
      switch (e.key) {
        case 'logout':
          handleLoginOut();
          break;
        case 'doc':
          openDoc();
          break;
        case 'lock':
          handleLock();
          break;
        case 'cache':
          clearCache();
          break;
        case 'depart':
          updateCurrentDepart();
          break;
        case 'password':
          updatePassword();
          break;
        case 'account':
          //update-begin---author:wangshuai ---date:20221125  for：进入用户设置页面------------
          go(`/system/usersetting`);
          //update-end---author:wangshuai ---date:20221125  for：进入用户设置页面--------------
          break;
      }
    }

    return {
      prefixCls,
      t,
      actives,
      getUserInfo,
      getAvatarUrl,
      handleMenuClick,
      getShowDoc,
      select,
      register,
      menusRef,
      getUseLockPage,
      loginSelectRef,
      updatePasswordRef,
    };
  },
});
</script>
<style lang="less">
@prefix-cls: ~'@{namespace}-header-user-dropdown';

.@{prefix-cls} {
  height: @header-height;
  padding: 0 0 0 10px;
  padding-right: 10px;
  overflow: hidden;
  font-size: 12px;
  cursor: pointer;
  align-items: center;

  img {
    width: 24px;
    height: 24px;
    margin-right: 12px;
  }

  &__header {
    border-radius: 50%;
  }

  &__name {
    font-size: 14px;
  }

  &--dark {
    &:hover {
      background-color: @header-dark-bg-hover-color;
    }
  }

  &--light {
    &:hover {
      background-color: #438EB9;
    }

    .@{prefix-cls}__name {
      color: #fff;
    }

    .@{prefix-cls}__desc {
      color: @header-light-desc-color;
    }
  }

  &-dropdown-overlay {
    .ant-dropdown-menu-item {
      min-width: 160px;
    }
  }
}

.top-menu {
  >div {
    padding-bottom: 5px;
  }

  .active {
    background-color: #62A8D1;
    border-bottom: 3px solid #FFBD04;
    font-weight: bold;
  }
}
</style>
