<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不在可视区：显示并添加动画；在可视区：隐藏 -->
      <view
        v-show="show"
        :class="['w-32 h-32', { 'image-animated': show }]"
        :style="getStyle"
      ></view>
      <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";

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

const show = ref(false);
const config = getCurrentConfig();
const getStyle = computed(() => {
  return {
    "--ipSmallImageStep": config.ipSmallImageStep,
    "--ipSmallImageHeight": config.ipSmallImageHeight,
    "--ipSmallTime": config.ipSmallTime,
    backgroundImage: `url(${config.ipSmallImage})`,
    backgroundRepeat: "no-repeat",
    backgroundSize: "32px auto",
    backgroundPosition: "0 0",
  };
});

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

defineExpose({ show });
</script>

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