<template>
  <div style="height: 100%" class="align-center px-md flex-row justify-between">
    <div
      @click="visibleMenu = true"
      v-show="smallScreen"
      class="pa-xs"
      style="cursor: pointer; margin-left: -8px"
    >
      <a-typography-text> <icon-menu /></a-typography-text>
    </div>
    <a-drawer
      class="drawer-menu"
      :width="200"
      :visible="visibleMenu"
      placement="left"
      @cancel="visibleMenu = false"
      :footer="false"
    >
      <template #title>
        <div class="align-center flex-row" style="width: 140px">
          <img
            v-if="vuexUser.claims.tenantLogo"
            :src="vuexUser.claims.tenantLogo"
            class="logo-mini"
          />
          <span class="lines-1">{{ vuexUser.tenantName }}</span>
        </div>
      </template>
      <div>
        <my-sider />
      </div>
    </a-drawer>

    <div
      v-show="!smallScreen"
      class="align-center flex-row"
      @click="$router.push('/')"
      style="cursor: pointer"
    >
      <img v-if="vuexUser.claims.tenantLogo" :src="vuexUser.claims.tenantLogo" class="logo" />
      <span class="title">{{ vuexUser.claims.tenantShortName || vuexUser.tenantName }}</span>
    </div>
    <div>
      <a-space>
        <!-- <a-trigger class="demo-arrow" trigger="click" show-arrow>
          <a-tooltip content="消息通知" position="bottom" mini>
            <a-button type="text">
              <template #icon> <icon-notification /></template> </a-button
          ></a-tooltip>
          <template #content>
            <a-empty />
          </template>
        </a-trigger> -->

        <!-- <a-tooltip content="意见反馈" position="bottom" mini>
          <a-button type="text">
            <template #icon> <icon-email /></template> </a-button
        ></a-tooltip> -->
        <!-- <a-tooltip v-if="docUrl" content="查看用户手册" position="bottom" mini>
          <a-button type="text" @click="showHelpPdf">帮助</a-button></a-tooltip
        > -->

        <a-tooltip
          :content="`切换为${isDarkMode ? '亮色' : '暗黑'}模式`"
          position="bottom"
          :mini="true"
        >
          <a-button type="text" @click="changeDarkMode">
            <template #icon>
              <icon-moon v-if="isDarkMode" /> <icon-sun v-else
            /></template> </a-button
        ></a-tooltip>
        <a-dropdown trigger="hover" @select="handleSelect">
          <a-button type="text">
            <span style="padding-right: 4px">{{ showName }}</span
            ><icon-down />
          </a-button>

          <template #content>
            <a-doption v-for="item in infoDrop" :key="item">{{ item }}</a-doption>
          </template>
        </a-dropdown>
      </a-space>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { isString } from 'lodash'
import { getStore, setStore } from '@/utils/storage'
import { useUserStore } from '@/store/user'
import router from '@/router'
import MySider from '../m-sider/index.vue'
import useMenu from './use-menu'

const { visibleMenu, smallScreen } = useMenu()
const userStore = useUserStore()

const vuexUser = computed(() => userStore.user)

const showName = computed(() => vuexUser.value.fullName)

const isDarkMode = ref<boolean>(!getStore('darkMode') === undefined ? false : getStore('darkMode'))
const changeDarkMode = () => {
  if (isDarkMode.value) {
    document.body.removeAttribute('arco-theme')
  } else {
    document.body.setAttribute('arco-theme', 'dark')
  }
  isDarkMode.value = !isDarkMode.value
  setStore('darkMode', isDarkMode.value)
}
const infoDrop = ['个人中心', '登出']
const handleSelect = (tip: string | number | Record<string, any> | undefined) => {
  if (!isString(tip)) {
    return
  }
  switch (infoDrop.indexOf(tip)) {
    case 0:
      router.push('/user/info')
      break
    case 1:
      userStore.logout()
      router.push('/login')
      break
    default:
  }
}
// const docUrl = computed(() => {
//   const { platformType } = vuexUser.value
//   let url = ''
//   if (platformType === 'sys') {
//     url = '/doc/平台端使用手册.pdf'
//   }
//   return url
// })
// const showHelpPdf = () => {
//   window.open(docUrl.value)
// }
</script>

<style lang="scss" scoped>
.logo {
  height: 24px;
  margin-right: 8px;
}
.logo-mini {
  height: 20px;
  padding-right: 4px;
}
.title {
  color: var(--color-text-1);
  font-size: 22px;
  font-weight: bold;
  padding-top: 3px;
  white-space: nowrap;
}
::v-deep(.arco-btn-text) {
  color: var(--color-text-1);
}
</style>
<style lang="scss">
.drawer-menu {
  .arco-drawer-body {
    padding: 0;
  }
}
</style>
