<template>
  <div v-if="getShowContent && getShowBread" class="flex-1 overflow-auto mr-5">
    <a-menu
      :selectedKeys="cur"
      mode="horizontal"
      :theme="Mtheme"
      :class="[prefixCls, `${prefixCls}--${theme}`]"
      :style="{ width: systemWidth + 'px' }"
    >
      <a-menu-item v-for="item in system" :key="item.id" class="item-system">
        <template #icon>
          <Tooltip>
            <template #title>{{ item.name }}</template>
            <Icon
              :icon="item.icon || 'ant-design:appstore-outlined'"
              :color="cur.includes(item.id) ? '#fff' : primaryColor"
              size="26"
              style="vertical-align: -7px"
              @click="changeSystem(item.id)"
            />
          </Tooltip>
        </template>
        {{ item.name }}
      </a-menu-item>
    </a-menu>
  </div>
  <Tooltip title="子系统" :mouseEnterDelay="0.5">
    <a-dropdown
      v-if="getShowTopMenu && !getIsMobile"
      placement="bottomRight"
      :trigger="['click']"
      :dropMenuList="system"
      :selectedKeys="cur"
      @menu-event="handleMenuEvent"
      overlayClassName="app-childSystem-picker-overlay"
    >
      <template #overlay>
        <a-menu>
          <a-menu-item
            :key="item.event"
            v-for="item in system"
            :class="cur.includes(item.event) ? 'item-system' : ''"
          >
            <Tooltip>
              <template #title>{{ item.text }}</template>
              <Icon
                :icon="item.icon || 'ant-design:appstore-outlined'"
                size="20"
                style="vertical-align: -7px"
                @click="changeSystem(item.event)"
              />
            </Tooltip>
          </a-menu-item>
        </a-menu>
      </template>
      <span
        class="cursor-pointer flex items-center justify-center w-70px h-11 mr-10px"
        style="border-left: 1px solid #254165; border-right: 1px solid #254165"
      >
        <IconFontSymbol icon="zixitongicon" fontSize="20" />
      </span>
    </a-dropdown>
  </Tooltip>
</template>
<script lang="ts">
  import { computed, defineComponent, onMounted, ref, watch } from 'vue';
  import type { MenuTheme } from 'ant-design-vue';
  import { Tooltip } from 'ant-design-vue';
  import Icon from '/@/components/Icon';
  import type { DropMenu } from '/@/components/Dropdown';
  import { useDesign } from '/@/hooks/web/useDesign';
  import { useAppInject } from '/@/hooks/web/useAppInject';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
  import { propTypes } from '/@/utils/propTypes';
  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
  import { storeToRefs } from 'pinia';
  import { usePermissionStore } from '/@/store/modules/permission';
  import { primaryColor } from '../../../../../build/config/themeConfig';
  import IconFontSymbol from '/@/components/IconFontSymbol/Index.vue';
  export default defineComponent({
    name: 'LayoutBreadcrumb',
    components: {
      Icon,
      Tooltip,
      IconFontSymbol,
    },
    props: {
      theme: propTypes.oneOf(['dark', 'light']),
    },
    setup() {
      const permissionStore = usePermissionStore();
      const { subSystemList } = storeToRefs(permissionStore);
      const Mtheme = ref<MenuTheme>('dark');
      const cur = ref<string[]>([permissionStore.getSubSystem]);
      const systemWidth = computed(() => {
        return system.value.length * 64;
      });
      const { prefixCls } = useDesign('layout-breadcrumb');
      const { getIsMobile } = useAppInject();
      const system = ref<any[]>([]);
      const { t } = useI18n();
      const { getShowTopMenu } = useMenuSetting();
      const { getShowContent, getShowBread } = useHeaderSetting();
      watch(
        () => subSystemList.value,
        (v) => {
          system.value = v;
        },
        { deep: true },
      );
      watch(
        () => permissionStore.getSubSystem,
        (v) => {
          cur.value = [v];
        },
      );

      onMounted(async () => {
        await permissionStore.changeSubsystem(getShowTopMenu.value, getIsMobile.value);
        system.value = permissionStore.getSubSysList;
        cur.value = [permissionStore.getSubSystem];
      });

      //切换系统
      function changeSystem(systemId: string) {
        permissionStore.setSubSystem(systemId);
        cur.value = [systemId];
      }

      function handleMenuEvent(menu: DropMenu) {
        if (cur.value[0] === menu.event) {
          return;
        }
        cur.value = [menu.event as string];

        permissionStore.setSubSystem(menu.event as string);
      }

      return {
        t,
        prefixCls,
        cur,
        changeSystem,
        system,
        Mtheme,
        getShowContent,
        getShowTopMenu,
        getShowBread,
        getIsMobile,
        handleMenuEvent,
        primaryColor,
        systemWidth,
      };
    },
  });
</script>
<style lang="less">
  @prefix-cls: ~'@{namespace}-layout-breadcrumb';

  .@{prefix-cls} {
    &.ant-menu {
      background: none;
      border: 0;

      .ant-menu-item {
        padding: 0;

        &:hover {
          background: none !important;
        }

        .ant-menu-item-icon {
          width: 44px;
          height: 44px;
          border-radius: 50%;
          box-shadow: 0 2px 6px 0 rgb(0 0 0 / 15%);
          margin: 0 20px 0 0;
          padding: 9px;
        }

        .ant-menu-title-content {
          display: none;
        }
      }

      .ant-menu-item-selected {
        background: none !important;

        .ant-menu-item-icon {
          background: @primary-color;
          box-shadow: 0 2px 6px 0 rgb(28 141 255 / 36%);
        }

        &::after {
          border: 0;
        }
      }
    }
  }

  .app-childSystem-picker-overlay {
    top: 90px !important;
    max-width: 600px;

    .ant-dropdown-menu {
      border-radius: 16px;
      box-shadow: 0 0 9px 0 rgb(0 0 0 / 15%);
      padding: 16px 0 16px 20px;
      display: flex;
      flex-wrap: wrap;

      li {
        width: 44px;
        height: 44px;
        background: #fff;
        box-shadow: 0 2px 6px 0 rgb(0 0 0 / 15%);
        border-radius: 50%;
        margin-right: 30px;
        color: @primary-color;
        margin-bottom: 16px;

        &:nth-child(8) {
          margin-right: 0;
        }

        &:hover,
        &.item-system {
          background: @primary-color;
          box-shadow: 0 2px 6px 0 rgb(28 141 255 / 36%);
          color: #fff;
        }
      }
    }
  }
</style>
