<template>
  <div class="flex passIndex h-full">
    <div class="left flex-grow-0" style="width: 220px">
      <syBusinessMenu
        type="tongzheng"
        :current="current"
        :setCurrent="setCurrent"
      ></syBusinessMenu>
    </div>
    <div style="background-color: #f5f6fa" class="flex-grow">
      <router-view></router-view>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { router } from "@/router";
import { syBusinessMenu } from "cqk-sy-ui";
import { ref } from "vue";
import { useRoute } from "vue-router";

const menuList = [
  {
    path: "/passList",
  },
  {
    path: "/transferRecord",
  },
];

const route = useRoute();

const current = ref(0);
const setCurrent = (v: number) => {
  current.value = v;
  if (v === 0) {
    router.push("/passList");
  } else if (v === 1) {
    router.push("/transferRecord");
  }
};

(function () {
  if (route.path) {
    const index = menuList.findIndex((i) => i.path === route.path);
    current.value = index;
  }
})();
</script>

<style>
.passIndex * {
  box-sizing: content-box;
}
</style>

<style lang="scss" scoped>
.left {
  box-sizing: content-box;
  width: 237px;
  flex-shrink: 0;
  background: #ffffff;
}
</style>
