<template>
  <div class="h-[44px] flex items-center pl-[12px] pr-[12px]">
    <div class="w-[24px] h-[24px] flex items-center justify-center">
      <van-icon name="wap-nav" size="24" color="#fff" @click="showDrawer" />
    </div>

    <!-- 隐藏 -->
    <div v-if="false" class="flex-1 h-full flex items-center justify-center">
      <!-- ChatTopWelcome不在可视区：显示并添加动画；在可视区：隐藏  -->
      <SpriteAnimator v-show="show" class="animate-[logo-scale_0.3s_ease-in-out]" :src="spriteStyle.ipSmallImage"
        :frameWidth="spriteStyle.frameWidth" :frameHeight="spriteStyle.frameHeight"
        :totalFrames="spriteStyle.totalFrames" :columns="spriteStyle.columns" :displayWidth="spriteStyle.displayWidth"
        :fps="16" />
      <span v-show="show" :class="[
        'text-[14px] text-500 text-[#171717] ml-[10px]',
        { 'animate-[text-fade-in_0.3s_ease-in-out]': show },
      ]">
        nianxx
      </span>
    </div>

    <div class="w-[24px] h-[24px]"></div>
  </div>
</template>

<script setup>
import { ref, defineProps, computed, defineExpose } from "vue";
import { emitter } from '@/utils/events'
import SpriteAnimator from "@/components/SpriteAnimator/index.vue";

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

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

const show = ref(false);

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

const showDrawer = () => emitter.emit("SHOW_DRAWER");

defineExpose({ show });
</script>

<style scoped>
@keyframes logo-scale {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes text-fade-in {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
</style>
