<template>
  <cover-view class="cover-view-ctn">
    <cover-view
      class="cover-tabbar-item"
      v-for="(item, index) in tabbar.items"
      :key="item.text"
      @tap="sheep.$router.go(item.url)"
    >
      <cover-image class="tabbar-icon" :src="sheep.$url.cdn(item.iconUrl)" />
      <cover-view class="active-line" v-show="activeUrl === item.url" />
    </cover-view>

    <cover-view class="top-line" />
  </cover-view>
</template>

<script setup>
  import { computed, unref } from 'vue';
  import sheep from '@/sheep';
  import SuTabbar from '@/sheep/ui/su-tabbar/su-tabbar.vue';

  const tabbar = computed(() => {
    return sheep.$store('app').template.basic?.tabbar;
  });

  const props = defineProps({
    activeUrl: {
      type: String,
      default: '',
    },
  });
</script>

<style lang="scss" scoped>
  .cover-view-ctn {
    width: 100%;
    height: 50px;
    position: fixed;
    left: 0;
    bottom: -1px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    // box-shadow: 0px -2px 4px 0px rgba(51, 51, 51, 0.06);
    z-index: 9999;
    padding-bottom: env(safe-area-inset-bottom);
    background: #fff;
    // border-top: 1px solid rgba(119, 119, 119, 0.25);

    .top-line {
      position: absolute;
      top: 0;
      left: 0;
      width: 200%;
      height: 1px;
      background: rgba(119, 119, 119, 0.25);
      transform: scale(0.5);
      transform-origin: 0 0;
      pointer-events: none;
      box-sizing: border-box;
    }

    .cover-tabbar-item {
      width: 20%;
      height: 20px;
      position: relative;

      .tabbar-icon {
        width: 16px;
        height: 16px;
        position: absolute;
        left: calc(50% - 8px);
        top: 0;
      }

      .active-line {
        width: 12px;
        height: 1px;
        background: #000;
        position: absolute;
        left: calc(50% - 6px);
        bottom: 0;
      }
    }
  }
</style>
