<template>
  <div class="h-[44px] flex items-center pl-[12px] pr-[12px]">
    <div class="w-[44px] h-[44px] flex items-center justify-center" @tap.stop="showDrawer">
      <van-icon name="apps-o" size="24" color="#333" />
    </div>

    <!-- 隐藏 -->
    <div v-if="false" class="flex-1 h-full flex items-center 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" />
      <span v-show="show" :class="[
        'text-[14px] text-500 text-[#171717] ml-[10px]',
        { 'text-animated': show },
      ]">
        nianxx
      </span>
    </div>

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

<script setup>
import { ref, defineProps, computed, defineExpose } from "vue";
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 emit = defineEmits(["showDrawer"]);

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

defineExpose({ show });
</script>

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