<template>
  <!-- OTC-首页 -->
  <div class="otc-index">
    <router-view />
    <div class="footer-tabbar">
      <div
        class="tabbar-item"
        v-for="(item, index) in tabbarList"
        :key="index"
        @click="tabbarChange(item.key, item.path)">
        <img
          class="item-image"
          :src="current === item.key ? item.selectedImage : item.image"
          alt="" />
      </div>
    </div>
  </div>
</template>
<script setup>
  import { useRoute, useRouter } from "vue-router";
  import { ref } from "vue";

  const router = useRouter();

  const current = ref("otcIndex");

  const tabbarChange = (key, path) => {
    current.value = key;
    router.push(path);
  };

  const tabbarList = [
    {
      key: "otcIndex",
      path: "/otcIndex",
      image: require("@/assets/icon/asset/otcTabbar/first.svg"),
      selectedImage: require("@/assets/icon/asset/otcTabbar/first-clicked.svg"),
    },
    {
      key: "otcOrderIndex",
      path: "/otcOrderIndex",
      image: require("@/assets/icon/asset/otcTabbar/second.svg"),
      selectedImage: require("@/assets/icon/asset/otcTabbar/second-clicked.svg"),
    },
    {
      key: "otcMessageIndex",
      path: "/otcMessageIndex",
      image: require("@/assets/icon/asset/otcTabbar/third.svg"),
      selectedImage: require("@/assets/icon/asset/otcTabbar/third-clicked.svg"),
    },
    {
      key: "otcUserIndex",
      path: "/otcUserIndex",
      image: require("@/assets/icon/asset/otcTabbar/fourth.svg"),
      selectedImage: require("@/assets/icon/asset/otcTabbar/fourth-clicked.svg"),
    },
  ];
</script>
<style lang="less" scoped>
  .otc-index {
    width: 100%;

    .footer-tabbar {
      position: fixed;
      left: 15px;
      bottom: 10px;
      z-index: 99;
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 345px;
      height: 57px;
      background: #fff;
      border: 1px solid #ebebeb;
      border-radius: 16px;

      .tabbar-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1;

        .item-image {
          width: 19px;
          height: 19px;
        }
      }
    }
  }
</style>
