<script setup lang="ts">
import { ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

const currentRoute = useRoute()
const router = useRouter()

const routerNameValue = ref(currentRoute.name)

const orderManageModuleList = [
  {
    routeName: 'OrderManagePackage',
    label: 'common_module.package',
  },
  {
    routeName: 'OrderManageRecharge',
    label: 'common_module.recharge',
  },
]

watch(
  () => currentRoute.fullPath,
  () => {
    routerNameValue.value = currentRoute.name
  },
)

function handleChangeRoute(routeName: string) {
  router.replace({ name: routeName })
}
</script>

<template>
  <div class="flex h-full flex-col rounded-[20px] bg-white p-6 shadow-[0_2px_2px_#0000000a]">
    <div class="flex justify-between">
      <div class="flex flex-col">
        <ul class="mb-5 flex bg-[#f8f8f8]">
          <li
            v-for="orderManageModuleItem in orderManageModuleList"
            :key="orderManageModuleItem.routeName"
            class="rounded-theme hover:bg-active-color hover:text-font-color h-8 cursor-pointer select-none px-[14px] leading-8 text-[#999999] transition-colors duration-300 first:ml-0"
            :class="[
              routerNameValue === orderManageModuleItem.routeName
                ? 'text-theme-color bg-active-color hover:text-theme-color'
                : 'text-gray-font-color border-transparent',
            ]"
            @click="handleChangeRoute(orderManageModuleItem.routeName)"
          >
            {{ t(orderManageModuleItem.label) }}
          </li>
        </ul>
      </div>
    </div>

    <div class="h-full overflow-hidden">
      <RouterView v-slot="{ Component }">
        <Transition appear name="fade-slide" mode="out-in">
          <Component :is="Component" />
        </Transition>
      </RouterView>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.fade-slide-leave-active,
.fade-slide-enter-active {
  transition: all 0.3s;
}

.fade-slide-enter-from {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-slide-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
</style>
