<script setup lang="ts">
import {UserOutlined,HomeOutlined,MoneyCollectOutlined} from "@ant-design/icons-vue";
import {useRouterPush} from "@/hooks/common";

const { routerPushByKey } = useRouterPush();
defineOptions({
  name: 'GlobalFooter'
});
</script>

<template>
  <DarkModeContainer class="h-full flex-center">
    <div class="flex-item">
      <ButtonIcon >
        <HomeOutlined class="text-icon-large" @click="routerPushByKey('home')"/>
      </ButtonIcon>
    </div>
    <div class="flex-item">
      <ButtonIcon>
        <MoneyCollectOutlined class="text-icon-large" @click="routerPushByKey('billing_billservice')"/>
      </ButtonIcon>
    </div>
    <div class="flex-item">
      <ButtonIcon >
        <UserOutlined class="text-icon-large" @click="routerPushByKey('user-info/usercard')"/>
      </ButtonIcon>
    </div>
  </DarkModeContainer>
</template>

<style scoped>
.flex-center {
  display: flex;
  align-items: center;
  width: 100%;
}

.flex-item {
  flex-basis: 25%; /* 修改为25%，使每个子元素占据四分之一的宽度 */
  display: flex;
  justify-content: center; /* 在各自的空间内居中 */
}
</style>
