<!-- 顶栏右侧区域 -->
<template>
  <div class="ele-admin-header-tool">
    <div class="ele-admin-header-tool-item">
      <a-tree-select
        show-search
        tree-node-filter-prop="title"
        treeDefaultExpandAll
        :bordered="bordered"
        :tree-data="menuTree"
        :placeholder="`订单管理`"
        :value="parentId || undefined"
        style="width: 180px"
        v-if="menuTree.length"
        :dropdown-style="{ maxHeight: '560px', overflow: 'auto' }"
        @change="onChange"
      >
        <template #suffixIcon><SearchOutlined /></template>
      </a-tree-select>
    </div>
    <!-- 商户名称 -->
    <template v-if="merchants.length > 0">
      <div class="ele-admin-header-tool-item">
        <MerchantSelect
          :merchants="merchants"
          v-model:value="merchantName"
          @done="onMerchant"
        />
      </div>
    </template>

    <!-- 消息通知 -->
    <div class="ele-admin-header-tool-item" @click="openUrl(`/user/notice`)">
      <header-notice />
    </div>
    <!-- 全屏切换 -->
    <div
      :class="[
        'ele-admin-header-tool-item',
        { 'hidden-sm-and-down': styleResponsive }
      ]"
      @click="toggleFullscreen"
    >
      <fullscreen-exit-outlined v-if="fullscreen" />
      <fullscreen-outlined v-else />
    </div>
    <!-- 语言切换 -->
    <!--        <div class="ele-admin-header-tool-item">-->
    <!--          <i18n-icon />-->
    <!--        </div>-->
    <!-- 用户信息 -->
    <div class="ele-admin-header-tool-item">
      <a-dropdown placement="bottom" :overlay-style="{ minWidth: '280px' }">
        <div class="ele-admin-header-avatar">
          <a-avatar :src="loginUser.avatar">
            <template v-if="!loginUser.avatar" #icon>
              <user-outlined />
            </template>
          </a-avatar>
          <span :class="{ 'hidden-sm-and-down': styleResponsive }">
            {{ loginUser.nickname }}
          </span>
          <down-outlined style="margin-left: 6px" />
        </div>
        <template #overlay>
          <a-menu :selectable="false" @click="onUserDropClick">
            <a-card :bordered="false" :body-style="{ padding: '16px' }">
              <div class="user-profile">
                <div class="user-info">
                  <div class="nickname">
                    <span class="ele-text-heading">
                      {{ loginUser.nickname }}
                    </span>
                    <div class="ele-text-placeholder">
                      用户ID：<span class="ele-text-secondary">{{
                        loginUser.userId
                      }}</span>
                      <copy-outlined
                        style="margin-left: 10px"
                        @click="copyText(loginUser.userId)"
                      />
                    </div>
                    <div class="role" style="margin-top: 10px">
                      <template
                        v-for="(item, index) in loginUser.roles"
                        :key="item.roleId"
                      >
                        <a-tag color="blue" v-if="index === 0">
                          <div class="role-name">
                            <span>{{ item.roleName }}</span>
                            <span v-if="index === 1">等</span>
                          </div>
                        </a-tag>
                      </template>
                    </div>
                  </div>
                </div>
              </div>
            </a-card>
            <a-menu-divider />
            <a-menu-item key="profile">
              <div class="ele-cell">
                <div class="ele-cell-content"> 个人中心 </div>
              </div>
            </a-menu-item>
            <a-menu-divider />
            <a-menu-item key="password">
              <div class="ele-cell">
                <div class="ele-cell-content"> 修改密码 </div>
              </div>
            </a-menu-item>
            <template v-if="loginUser.username == 'admin'">
              <a-menu-divider />
              <a-menu-item key="accessKey" v-if="loginUser.username == 'admin'">
                <div class="ele-cell">
                  <div class="ele-cell-content"> 秘钥管理 </div>
                </div>
              </a-menu-item>
              <a-menu-divider />
              <a-menu-item key="skin" v-if="loginUser.username == 'admin'">
                <div class="ele-cell">
                  <div class="ele-cell-content"> 偏好设置 </div>
                </div>
              </a-menu-item>
              <a-menu-divider />
              <a-menu-item key="system" v-if="loginUser.username == 'admin'">
                <div class="ele-cell">
                  <div class="ele-cell-content"> 系统设置 </div>
                </div>
              </a-menu-item>
            </template>
            <a-menu-divider />
            <a-menu-item key="logout">
              <div class="ele-cell" align="center">
                <div class="ele-cell-content">
                  {{ t('layout.header.logout') }}
                </div>
              </div>
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </div>
    <!-- 主题设置 -->
    <!--    <div class="ele-admin-header-tool-item" @click="openSetting">-->
    <!--      <more-outlined />-->
    <!--    </div>-->
  </div>
  <!-- 修改密码弹窗 -->
  <password-modal v-model:visible="passwordVisible" />
  <!-- 主题设置抽屉 -->
  <setting-drawer v-model:visible="settingVisible" />
</template>

<script lang="ts" setup>
  import { computed, createVNode, ref, watch } from 'vue';
  import { useRouter } from 'vue-router';
  import { useI18n } from 'vue-i18n';
  import { Modal } from 'ant-design-vue/es';
  import {
    DownOutlined,
    CopyOutlined,
    ExclamationCircleOutlined,
    FullscreenOutlined,
    FullscreenExitOutlined,
    SearchOutlined
  } from '@ant-design/icons-vue';
  import { storeToRefs } from 'pinia';
  import { copyText, openNew, openUrl } from '@/utils/common';
  import { useThemeStore } from '@/store/modules/theme';
  import HeaderNotice from './header-notice.vue';
  import PasswordModal from './password-modal.vue';
  import SettingDrawer from './setting-drawer.vue';
  import { useUserStore } from '@/store/modules/user';
  import { logout } from '@/utils/page-tab-util';
  import type { Menu } from '@/api/system/menu/model';
  import { listMenus } from '@/api/system/menu';
  import { isExternalLink, toTreeData } from 'ele-admin-pro';
  import { getMerchantName } from '@/utils/merchant';
  import { Merchant } from '@/api/shop/merchant/model';
  import { listMerchant } from '@/api/shop/merchant';
  import MerchantSelect from './merchant-select.vue';

  // 是否开启响应式布局
  const themeStore = useThemeStore();
  const { styleResponsive } = storeToRefs(themeStore);
  // const TENANT_ID = localStorage.getItem('TenantId');
  // const TENANT_NAME = localStorage.getItem('TenantName');
  const emit = defineEmits<{
    (e: 'fullscreen'): void;
  }>();

  defineProps<{
    // 是否是全屏
    fullscreen: boolean;
  }>();

  const { push } = useRouter();
  const { t } = useI18n();
  const userStore = useUserStore();

  // 是否显示修改密码弹窗
  const passwordVisible = ref(false);

  // 是否显示主题设置抽屉
  const settingVisible = ref(false);

  // 当前用户信息
  const loginUser = computed(() => userStore.info ?? {});
  const menuList = ref<Menu[]>([]);
  const menuTree = ref<Menu[]>([]);
  const parentId = ref<number>();
  const bordered = ref<boolean>(false);
  const merchants = ref<Merchant[]>([]);
  const merchantName = ref();

  /* 用户信息下拉点击 */
  const onUserDropClick = ({ key }) => {
    if (key === 'password') {
      passwordVisible.value = true;
    } else if (key === 'profile') {
      push('/user-center');
    } else if (key === 'accessKey') {
      push('/system/access-key');
    } else if (key === 'taskAdd') {
      push('/user/task/add');
    } else if (key === 'myTask') {
      push('/user/task/index');
    } else if (key === 'skin') {
      settingVisible.value = true;
    } else if (key === 'system') {
      push('/system/setting');
    } else if (key === 'logout') {
      // 退出登录
      Modal.confirm({
        title: t('layout.logout.title'),
        content: t('layout.logout.message'),
        icon: createVNode(ExclamationCircleOutlined),
        maskClosable: true,
        onOk: () => {
          logout();
        }
      });
    }
  };

  const myOrder = () => {
    push('/user/my-balance-log');
  };

  const onChange = (index: number) => {
    const item = menuList.value.find((d) => d.menuId == index);
    const isExternal = isExternalLink(item?.path);
    if (isExternal) {
      return openNew(`${item?.path}`);
    }
    if (item?.parentId == 0) {
      return push(item.path);
    }
    if (item?.component) {
      return push(item.path);
    }
  };

  // 选择商户
  const onMerchant = (id: number) => {
    const item = merchants.value.find((d) => d.merchantId == id);
    if (item) {
      merchantName.value = item.merchantName;
      localStorage.setItem('MerchantName', `${item.merchantName}`);
      localStorage.setItem('MerchantId', `${item.merchantId}`);
      window.location.reload();
    }
  };

  /* 切换全屏 */
  const toggleFullscreen = () => {
    emit('fullscreen');
  };

  /* 打开主题设置抽屉 */
  const openSetting = () => {
    settingVisible.value = true;
  };

  const reload = () => {
    if (loginUser.value.username == 'admin') {
      // 查询菜单列表
      listMenus({ menuType: 0, hide: 0 }).then((data) => {
        if (data) {
          menuList.value = data;
          menuTree.value = toTreeData({
            data: data.map((d) => {
              return { ...d, key: d.menuId, value: d.menuId };
            }),
            idField: 'menuId',
            parentIdField: 'parentId'
          });
        }
      });
    }
    merchantName.value = getMerchantName();
    if (loginUser.value.merchants) {
      listMerchant({ merchantIds: loginUser.value.merchants }).then((res) => {
        merchants.value = res.map((d) => {
          d.label = d.merchantName;
          d.value = d.merchantId;
          return d;
        });
      });
    }
  };

  reload();
</script>

<script lang="ts">
  import * as icons from '@/layout/menu-icons';

  export default {
    components: icons,
    data() {
      return {
        iconData: [
          {
            title: '已引入的图标',
            icons: Object.keys(icons)
          }
        ]
      };
    }
  };
</script>

<style lang="less" scoped>
  .ant-select {
    color: #bfbfbf;
  }
  .user-profile {
    display: flex;
    .user-info {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .nickname {
        display: flex;
        flex-direction: column;
      }
    }
  }
  .ele-admin-header-tool-item {
    :deep(.ant-select-tree-switcher) {
      background-color: #ff00fe;
    }
    :deep(.ant-select-tree-indent) {
      display: none;
    }
  }
</style>
