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

const { t } = useI18n()

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

const routerNameValue = ref(currentRoute.name)

const statisticModuleList = [
  {
    routeName: 'PointStatistic',
    label: 'statistic_module.point_statistic',
  },
  {
    routeName: 'AgentStatistic',
    label: 'statistic_module.agent_statistic',
  },
]

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

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

<template>
  <div class="m-auto flex h-full max-w-[1669px] flex-col pb-2 pt-1">
    <div class="flex flex-col px-6">
      <div class="mb-5 flex items-center">
        <img src="@/assets/images/statistics/statistics-icon.png" />
        <p class="ml-[5px] text-lg">{{ t('statistic_module.data_statistic') }}</p>
      </div>

      <ul class="mb-5 flex">
        <li
          v-for="statisticModuleItem in statisticModuleList"
          :key="statisticModuleItem.routeName"
          class="rounded-theme hover:bg-theme-color ml-2.5 h-8 cursor-pointer select-none px-[14px] leading-8 transition-colors duration-300 first:ml-0 hover:text-white"
          :class="[
            routerNameValue === statisticModuleItem.routeName
              ? 'bg-theme-color text-white'
              : 'text-gray-font-color border-transparent',
          ]"
          @click="handleChangeRoute(statisticModuleItem.routeName)"
        >
          {{ t(statisticModuleItem.label) }}
        </li>
      </ul>
    </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>
