<template>
  <div>
    <Dropdown placement="bottomLeft" :overlayClassName="`${prefixCls}-dropdown-overlay`">
      <span :class="[prefixCls, `${prefixCls}--${theme}`]" class="flex">
        <span :class="`${prefixCls}__info hidden md:block`">
          <MoreOutlined class="icon-more" />
        </span>
      </span>
      <template #overlay>
        <Menu @click="handleMenuClick" :forceSubMenuRender="true" style="min-width: 100px">
          <MenuItem key="doc" :text="'使用帮助'" icon="ant-design:question-outlined" />
          <MenuItem key="about" :text="'关于我们'" icon="ant-design:user-outlined" />
          <MenuItem key="agree" :text="'许可协议'" icon="ant-design:schedule-outlined" />
          <MenuItem key="setting" :text="'主题设置'" icon="ant-design:format-painter-outlined" />
          <MenuItem key="fullscreen" :text="'全屏展示'" icon="ant-design:compress-outlined" />
        </Menu>
      </template>
    </Dropdown>
    <DocModal @register="registerDoc" />
    <AboutModal @register="registerAbout" />
    <AgreeModal @register="registerAgree" />
    <SettingDrawer @register="registerSetting" />
  </div>
</template>
<script lang="ts">
  // components
  import { Dropdown, Menu } from 'ant-design-vue';

  import { defineComponent } from 'vue';

  import { useDesign } from '/@/hooks/web/useDesign';
  import { useModal } from '/@/components/Modal';
  import { useDrawer } from '/@/components/Drawer';

  import { useFullscreen } from '@vueuse/core';

  import { propTypes } from '/@/utils/propTypes';

  import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';

  import Icon from '/@/components/Icon';

  import { MoreOutlined } from '@ant-design/icons-vue';

  import SettingDrawer from '../setting/SettingDrawer';

  type MenuEvent = 'logout' | 'doc' | 'about' | 'agree' | 'setting' | 'fullscreen';

  export default defineComponent({
    name: 'MoreDropdown',
    components: {
      Dropdown,
      Menu,
      MenuItem: createAsyncComponent(() => import('./DropMenuItem.vue')),
      DocModal: createAsyncComponent(() => import('./DocModal.vue')),
      AboutModal: createAsyncComponent(() => import('./AboutModal.vue')),
      AgreeModal: createAsyncComponent(() => import('./AgreeModal.vue')),
      MoreOutlined,
      SettingDrawer,
    },
    props: {
      theme: propTypes.oneOf(['dark', 'light']),
    },
    setup() {
      const { prefixCls } = useDesign('header-more-dropdown');

      const [registerDoc, { openModal: openDocModal }] = useModal();

      const [registerAbout, { openModal: openAboutModal }] = useModal();

      const [registerAgree, { openModal: openAgreeModal }] = useModal();

      const [registerSetting, { openDrawer }] = useDrawer();

      const { toggle } = useFullscreen();

      // open doc
      function openDoc() {
        openDocModal(true, {
          isOpen: true,
        });
      }

      // open about
      function openAbout() {
        openAboutModal(true, {
          isOpen: true,
        });
      }

      // open agree
      function openAgree() {
        openAgreeModal(true, {
          isOpen: true,
        });
      }

      // open agree
      function openSetting() {
        openDrawer(true);
      }

      function handleMenuClick(e: { key: MenuEvent }) {
        switch (e.key) {
          case 'doc':
            openDoc();
            break;
          case 'about':
            openAbout();
            break;
          case 'agree':
            openAgree();
            break;
          case 'setting':
            openSetting();
            break;
          case 'fullscreen':
            toggle();
            break;
        }
      }

      return {
        prefixCls,
        Icon,
        handleMenuClick,
        registerDoc,
        registerAbout,
        registerAgree,
        registerSetting,
      };
    },
  });
</script>
<style lang="less" scoped>
  @prefix-cls: ~'@{namespace}-header-more-dropdown';

  .@{prefix-cls} {
    height: @header-height;
    padding-right: 4px;
    overflow: hidden;
    cursor: pointer;
    align-items: center;

    .icon-more {
      font-size: 1.2em;
      font-weight: bold;
      color: #000;
    }

    &--dark {
      .icon-more {
        color: #fff;
      }

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

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

      .@{prefix-cls}__name {
        color: @text-color-base;
      }

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

    &-dropdown-overlay {
      min-width: 100px !important;

      .ant-dropdown-menu-item {
        min-width: 100px;
      }
    }
  }
</style>
