<template>
  <view class="fix_rb" :style="{ bottom }">
    <van-image v-if="showNav" width="48px" class="btn mg-b-px-10" src="/static/img/rb_nav.png" @tap="onNavOpen" />
    <br />
    <van-image width="48px" class="btn toTop" :class="{ 'show': state.showToTop }"
      src="/static/img/rb_top.png" @tap="gotoTop" />
  </view>
  <van-overlay style="z-index: 7" :show="state.nav.show" @tap="state.nav.show = false">
    <view class="fix_rb bg-white ra-20 pd-h-px-20 pd-v-px-5 mg-r-px-10-m" v-show="state.nav.show">
      <template v-for="(item, index) in state.nav.list">
        <view class="inline-block text-center pd-px-5" style="width: 45px" @tap="goto(item.url)">
          <van-icon size="24" :name="item.icon" />
          <view class="text-ss">{{ item.name }}</view>
        </view>
        <br v-if="index % 3 == 2" />
      </template>
    </view>
  </van-overlay>
</template>

<script setup lang="ts">
import { onMounted, reactive } from 'vue';
import { onPageScroll } from '@dcloudio/uni-app'
interface Props {
  showNav?: boolean;
  bottom?: string;
}
const props = withDefaults(defineProps<Props>(), {
  showNav: false,
  bottom: '75px'
});
const state = reactive({
  showToTop: false,
  nav: {
    show: false,
    list: [
      { name: '首页', icon: 'wap-home-o', url: '/' },
      { name: '分类', icon: 'apps-o', url: '/?index=1' },
      { name: '搜索', icon: 'search', url: '/pages/topSearch/index' },
      { name: '购物车', icon: 'shopping-cart-o', url: '/?index=2' },
      { name: '我的', icon: 'manager-o', url: '/?index=3' },
      { name: '收藏夹', icon: 'like-o', url: '/pages/my/fav' },
    ]
  }
})
function gotoTop() {
  uni.pageScrollTo({
    scrollTop: 0
  });
}
onPageScroll(e => {
  state.showToTop = e.scrollTop > 100
})
function onNavOpen() {
  state.nav.show = true
}
function goto(url: any) {
  url && uni.navigateTo({ url })
}
</script>

<style lang="scss" scoped>
.fix_rb {
  position: fixed;
  right: 12px;
  z-index: 6;
  transition: all ease-in-out .2s;
  bottom: 75px;

  .toTop {
    opacity: 0;

    &.show {
      opacity: 1;
    }
  }
}
</style>
