<script setup>
import { useRoute, useRouter } from "vue-router";
import { ref, onMounted, onUnmounted } from "vue";
import mitt from "@/utils/mitt.js";

const router = useRouter();
const route = useRoute();

const navTo = (name) => {
  router.push({ name });
};
const list = ref([
  { name: "home", title: "收银", ico: "Sell", count: 0 },
  { name: "order", title: "收银订单", ico: "DataLine", count: 0 },
  { name: "orderSystem", title: "平台订单", ico: "DataAnalysis", count: 0 },
  { name: "saleHome", title: "批发", ico: "Van", count: 0 },
  { name: "saleOrder", title: "批发订单", ico: "Tickets", count: 0 },
  { name: "convert", title: "核销", ico: "FullScreen", count: 0 },
  { name: "shop", title: "商品", ico: "ShoppingBag", count: 0 },
  { name: "orderCount", title: "订单统计", ico: "PieChart", count: 0 },
]);
const aup = () => {
  let index = list.value.findIndex((item) => item.name == route.name);
  if (index == 0) index = list.value.length;
  if (index > 0) navTo(list.value[index - 1].name);
};
const adown = () => {
  let index = list.value.findIndex((item) => item.name == route.name);
  if (index == list.value.length - 1) index = -1;
  if (index < list.value.length - 1) navTo(list.value[index + 1].name);
};
onMounted(() => {
  mitt.on("up", aup);
  mitt.on("down", adown);
});

onUnmounted(() => {
  mitt.off("aup", aup);
  mitt.off("adown", adown);
});
</script>

<template>
  <div class="my-card">
    <div
      v-for="item in list"
      :key="item.name"
      class="list-item"
      :class="{ active: route.name == item.name }"
      @click="navTo(item.name)"
    >
      <el-icon size="2rem">
        <component :is="item.ico" />
      </el-icon>
      <div>{{ item.title }}</div>
      <div v-if="item.count" class="badge">{{ item.count }}</div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.my-card {
  width: 100%;
  height: calc(100vh - 100px);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 1.5rem;
  overflow: auto;
  .list-item {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 0.7rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 1.2rem;
    position: relative;

    &.active {
      background-color: #1890ff;
      transition: 300ms;
    }
    .badge{
        position: absolute;
        top: -0.5rem;
        right: -0.5rem;
        background-color: #ff4a00;
        font-size: 0.7rem;
        padding: 0.2rem 0.5rem;
        border-radius: 2rem;
    }
  }
}
/* 修改滚动条的样式 */
::-webkit-scrollbar {
  display: none; /* 隐藏滚动条 */
}

/* 设置滚动条的轨道样式 */
::-webkit-scrollbar-track {
  background-color: #f1f1f1; /* 设置轨道的背景色 */
  margin: 1.25rem 0;
}

/* 设置滚动条的滑块样式 */
::-webkit-scrollbar-thumb {
  background-color: #ccc; /* 设置滑块的背景色 */
  border-radius: 0.315rem; /* 设置滑块的圆角 */
}

/* 设置滚动条鼠标悬停时的滑块样式 */
::-webkit-scrollbar-thumb:hover {
  background-color: #999; /* 设置鼠标悬停时滑块的背景色 */
}
</style>
