<template>
  <view class="custom-tab-bar">
    <view class="custom-tab-bar__content">
      <view
        v-for="(item, index) in tabItems"
        :key="item.path"
        class="custom-tab-bar__item"
        :class="{ 'custom-tab-bar__item--active': selectedIndex === index }"
        @tap="switchTab(index)"
      >
        <AtIcon
          :value="item.iconType"
          size="24"
          :color="getTabItemColor(index)"
        />
        <text
          class="custom-tab-bar__label"
          :style="{ color: getTabItemColor(index) }"
        >
          {{ item.title }}
        </text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import Taro, { useDidShow } from '@tarojs/taro'
import { computed, onMounted, ref } from 'vue'
import { themeTokens } from '@/theme/tokens'

const SELECTED_COLOR = themeTokens.color.primary
const DEFAULT_COLOR = themeTokens.color.textDisabled

const tabItems = [
  { path: 'pages/collaboration/records/index', title: '合作记录', iconType: 'bullet-list' },
  { path: 'pages/collaboration/statistics/index', title: '月度统计', iconType: 'calendar' },
  { path: 'pages/profile/index', title: '我的', iconType: 'user' }
]
const selectedPath = ref(tabItems[0].path)
const selectedIndex = computed(() => Math.max(tabItems.findIndex(item => item.path === selectedPath.value), 0))

useDidShow(syncSelectedPath)
onMounted(syncSelectedPath)

function switchTab(index: number) {
  const nextPath = tabItems[index]?.path
  if (!nextPath) return
  selectedPath.value = nextPath
  Taro.switchTab({ url: `/${nextPath}` })
}

function syncSelectedPath() {
  selectedPath.value = normalizePath(getCurrentPath())
}

function getTabItemColor(index: number) {
  return selectedIndex.value === index ? SELECTED_COLOR : DEFAULT_COLOR
}

function getCurrentPath() {
  const pages = Taro.getCurrentPages()
  const currentPage = pages[pages.length - 1]
  return currentPage?.route || getH5Path() || tabItems[0].path
}

function getH5Path() {
  if (process.env.TARO_ENV !== 'h5') return ''
  const path = window.location.hash || window.location.pathname
  return path.replace(/^#/, '')
}

function normalizePath(path: string) {
  return path.replace(/^\//, '').split('?')[0].split('#')[0]
}
</script>

<style lang="scss">
.custom-tab-bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  box-sizing: border-box;
  height: calc($tabbar-height + constant(safe-area-inset-bottom));
  height: calc($tabbar-height + env(safe-area-inset-bottom));
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  background: $bg-page;
  border-top: 1px solid $border-color;
}

.custom-tab-bar__content {
  display: flex;
  width: 100%;
  height: $tabbar-height;
}

.custom-tab-bar__item {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: $tabbar-height;
  color: $text-disabled;
}

.custom-tab-bar__item--active {
  color: $color-primary;
}

.custom-tab-bar__label {
  max-width: 100%;
  margin-top: 6px;
  overflow: hidden;
  font-size: 20px;
  line-height: 28px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
