<template>
  <view class="border-box h-44 flex flex-items-center pl-12 pr-12">
    <uni-icons type="bars" size="24" color="#333" @click="showDrawer" />

    <!-- 隐藏 -->
    <view class="flex-full h-full flex flex-items-center flex-justify-center">
      <!-- ChatTopWelcome不在可视区：显示并添加动画；在可视区：隐藏 -->
      <image
        v-show="show"
        class="w-32 h-32"
        :class="{ 'image-animated': show }"
        :src="logoImageUrl"
        mode="aspectFit"
      />
      <text
        v-show="show"
        class="font-size-14 font-500 color-171717 ml-10"
        :class="{ 'text-animated': show }"
        >沐沐</text
      >
    </view>

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

<script setup>
import { ref, defineProps, computed, defineExpose } from "vue";

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

const show = ref(false);

const logoImageUrl = computed(
  () => props.mainPageDataModel.initPageImages?.logoImageUrl
);

const showDrawer = () => uni.$emit("SHOW_DRAWER");

defineExpose({ show });
</script>

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