<template>
  <view class="border-box h-44 flex flex-items-center pl-12 pr-12" :style="navBarStyle">
    <view class="nav-icon-button" @tap.stop="showDrawer">
      <uni-icons type="bars" size="24" color="#ffffff" />
    </view>

    <!-- 隐藏 -->
    <view v-if="false" class="flex-full h-full flex flex-items-center flex-justify-center">
      <!-- ChatTopWelcome不在可视区：显示并添加动画；在可视区：隐藏  -->
      <SpriteAnimator v-show="show" class="image-animated" :src="spriteStyle.ipSmallImage"
        :frameWidth="spriteStyle.frameWidth" :frameHeight="spriteStyle.frameHeight"
        :totalFrames="spriteStyle.totalFrames" :columns="spriteStyle.columns" :displayWidth="spriteStyle.displayWidth"
        :fps="16" />
      <text v-show="show" :class="[
        'font-size-14 font-500 color-171717 ml-10',
        { 'text-animated': show },
      ]">
        {{ config.name }}
      </text>
    </view>

    <view class="w-24 h-24"></view>
  </view>
</template>

<script setup>
import { ref, defineProps, computed, defineExpose } from "vue";
import { getCurrentConfig } from "@/constant/base";
import SpriteAnimator from "@/components/Sprite/SpriteAnimator.vue";

const props = defineProps({
  navHeight: {
    type: Number,
    default: 44,
  },
  mainPageDataModel: {
    type: Object,
    default: () => ({
      initPageImages: {},
    }),
  },
});

const initPageImages = computed(() => {
  return props.mainPageDataModel?.initPageImages || {};
});

const show = ref(false);
const config = getCurrentConfig();

const spriteStyle = computed(() => {
  const images = initPageImages.value;
  return {
    ipSmallImage: images.ipSmallImage ?? config.ipSmallImage,
    frameWidth: images.ipSmallImageWidth ?? config.ipSmallImageWidth,
    frameHeight: images.ipSmallImageHeight ?? config.ipSmallImageHeight,
    totalFrames: images.ipSmallTotalFrames ?? config.ipSmallTotalFrames,
    columns: images.ipSmallColumns ?? config.ipSmallColumns,
    displayWidth: 32,
  };
});

const emit = defineEmits(["showDrawer"]);

const showDrawer = () => emit("showDrawer");

const navBarStyle = computed(() => ({
  height: `${props.navHeight}px`,
}));

defineExpose({ show });
</script>

<style lang="scss" scoped>
@import "./styles/index.scss";
</style>
