<!-- 顶栏右侧区域 -->
<template>
  <div class="ele-admin-header-tool">
    <!--    <div class="ele-admin-header-tool-item">-->
    <!--      <a-select-->
    <!--        placeholder="请选择主体"-->
    <!--        :default-active-first-option="false"-->
    <!--        :show-arrow="false"-->
    <!--        :filter-option="false"-->
    <!--        :not-found-content="null"-->
    <!--        style="width: 260px"-->
    <!--        allowClear-->
    <!--        show-search-->
    <!--        @search="onSearch"-->
    <!--        @change="onChange"-->
    <!--        v-if="loginUser.username === 'admin' || loginUser.tenantId === 5"-->
    <!--      >-->
    <!--        <a-select-option-->
    <!--          v-for="(select, selectIndex) in tenantList"-->
    <!--          :key="selectIndex"-->
    <!--          :value="select.tenantId"-->
    <!--          >{{ select.tenantName }}</a-select-option-->
    <!--        >-->
    <!--      </a-select>-->
    <!--    </div>-->
<!--    <div class="ele-admin-header-tool-item" @click="myOrder"> 费用 </div>-->
    <!-- 工单系统 -->
    <div class="ele-admin-header-tool-item">
      <a-dropdown placement="bottom" :overlay-style="{ minWidth: '100px' }">
<!--        <div class="ele-admin-header-avatar">-->
<!--          <span :class="{ 'hidden-sm-and-down': styleResponsive }"> 工单 </span>-->
<!--        </div>-->
        <template #overlay>
          <a-menu :selectable="false" @click="onUserDropClick">
            <a-menu-item key="taskAdd">
              <div class="ele-cell">
                <div class="ele-cell-content"> 提交工单 </div>
              </div>
            </a-menu-item>
            <a-menu-item key="myTask">
              <div class="ele-cell">
                <div class="ele-cell-content"> 我的工单 </div>
              </div>
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </div>
    <!-- 消息通知 -->
    <div class="ele-admin-header-tool-item">
      <header-notice />
    </div>
    <!-- 小程序版 -->
    <!--    <header-wechat />-->
    <!-- 全屏切换 -->
    <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>
                    <span class="ele-text-placeholder">
                      用户ID：{{ loginUser.userId }}
                      <copy-outlined
                        style="padding-left: 4px"
                        @click="copyText(loginUser.userId)"
                      />
                    </span>
                  </div>
                  <div class="role">
                    <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>
            </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>
            <a-menu-divider />
            <a-menu-item key="accessKey">
              <div class="ele-cell">
                <div class="ele-cell-content"> 秘钥管理 </div>
              </div>
            </a-menu-item>
            <a-menu-divider />
            <a-menu-item key="skin">
              <div class="ele-cell">
                <div class="ele-cell-content"> 偏好设置 </div>
              </div>
            </a-menu-item>
            <a-menu-divider />
            <a-menu-item key="logout">
              <div class="ele-cell" align="center">
                <div class="ele-cell-content">
                  <logout-outlined />
                  退出登录
                </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 } from 'vue';
  import { useRouter } from 'vue-router';
  import { useI18n } from 'vue-i18n';
  import { Modal } from 'ant-design-vue/es';
  import {
    DownOutlined,
    MoreOutlined,
    ShopOutlined,
    CopyOutlined,
    ControlOutlined,
    UserOutlined,
    SkinOutlined,
    KeyOutlined,
    WechatOutlined,
    LogoutOutlined,
    ExclamationCircleOutlined,
    FullscreenOutlined,
    FullscreenExitOutlined
  } from '@ant-design/icons-vue';
  import { storeToRefs } from 'pinia';
  import { copyText } from '@/utils/common';
  import { useThemeStore } from '@/store/modules/theme';
  import HeaderNotice from './header-notice.vue';
  // import HeaderWechat from './header-wechat.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 { listTenant } from '@/api/oa/tennat';
  // import { Tenant } from '@/api/oa/tennat/model';
  // import { login } from '@/api/passport/login';
  // import { message } from 'ant-design-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 onUserDropClick = ({ key }) => {
    if (key === 'password') {
      passwordVisible.value = true;
    } else if (key === 'profile') {
      push('/user/profile');
    } 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 === 'logout') {
      // 退出登录
      Modal.confirm({
        title: '提示',
        content: '确认退出吗',
        icon: createVNode(ExclamationCircleOutlined),
        maskClosable: true,
        onOk: () => {
          logout();
        }
      });
    }
  };

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

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

  // 查询租户列表
  // const tenantList = ref<Tenant[]>([]);
  // const reload = (tenantName?: any) => {
  //   if (Number(TENANT_ID) === 5) {
  //     listTenant({ tenantName }).then((result) => {
  //       tenantList.value = result;
  //     });
  //   }
  // };

  // const onSearch = (tenantName) => {
    // reload(tenantName);
  // };

  // const onChange = (tenantId) => {
  //   login({
  //     username: 'admin',
  //     password: '$2a$10$iMsEmh.rPlzwy/SVe6KW3.62vlwqMJpibhCF9jYN.fMqxdqymzMzu',
  //     remember: true,
  //     tenantId: tenantId
  //   })
  //     .then(() => {
  //       message.success('切换成功');
  //       setTimeout(() => {
  //         history.go(0);
  //         location.reload();
  //       }, 500);
  //     })
  //     .catch((e: Error) => {
  //       message.error(e.message);
  //     });
  // };

  // reload();

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

<style lang="less" scoped>
  .user-profile {
    display: flex;
    .user-info {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .nickname {
        display: flex;
        flex-direction: column;
      }
    }
  }
</style>
