<script setup lang="ts">
import NavMiniProgramSelect from '@/assets/images/mini-program.svg?url';
import NavPrint             from '@/assets/images/nav-print.png?url';
import NavPrintSelect       from '@/assets/images/nav-print.select.png?url';
import NavScheme            from '@/assets/images/nav-scheme.png?url';
import NavSchemeSelect      from '@/assets/images/nav-scheme.select.png?url';


interface Tabbar {
  key: 'screen' | 'report' | 'scheme' | 'print';
  label: string;
  icon: string;
  select: string;
}

const route = useRoute();
const router = useRouter();

const props = defineProps<{ uploading?: boolean; }>();
const emits = defineEmits<{ print: []; mini: []; }>();

const isScheme = ref(false);
const tabbar = shallowRef<Tabbar[]>([]);

watchEffect(() => {
  const path = route.fullPath;
  isScheme.value = path.endsWith('scheme');
  tabbar.value = isScheme.value ? [
    // { key: 'screen', label: '返回首页', icon: NavHome, select: NavHomeSelect },
    { key: 'report', label: '健康报告', icon: NavScheme, select: NavSchemeSelect },
  ] : [
    // { key: 'screen', label: '返回首页', icon: NavHome, select: NavHomeSelect },
    { key: 'scheme', label: '调理方案', icon: NavScheme, select: NavSchemeSelect },
    { key: 'mini', label: '小程序', icon: NavMiniProgramSelect, select: NavMiniProgramSelect },
    { key: 'print', label: '打印', icon: NavPrint, select: NavPrintSelect },
  ];
});

function handle(key: string) {
  switch ( key ) {
    case 'screen':
      router.replace('/screen');
      break;
    case 'scheme':
      router.replace(`${ route.fullPath }/scheme`.replace(/\/{2,}/g, '/'));
      break;
    case 'report':
      router.replace(route.fullPath.replace('/scheme', ''));
      break;
    case 'print':
      emits('print');
      break;
    case 'mini':
      emits('mini');
      break;
  }
}
</script>
<template>
  <div class="flex-none flex justify-between py-2" style="background-color: #12312c;">
    <div
      class="m-auto min-w-16 text-center hover:text-primary"
      v-for="nav in tabbar" :key="nav.key"
      @click="handle(nav.key)"
    >
      <van-loading v-if="props.uploading && nav.label === '打印'" color="#38ff6e" style="font-size: 24px;" />
      <img v-else :src="nav.icon" :alt="nav.label">
      <div class="mt-2">{{ nav.label }}</div>
    </div>
  </div>
</template>
<style scoped lang="scss">
img {
  margin: auto;
  width: 36px;
  height: 36px;
  object-fit: scale-down;
}
</style>
