<template>
  <div class="flex flex-col items-center justify-center py-[90px]">
    <!-- 图片变量 -->
    <img v-if="!hasMessage" :src="imageSrc" class="w-[160px] h-[160px] mb-5" />

    <!-- 主标题变量 -->
    <div v-if="!hasMessage" class="text-[18px] font-bold text-[#2c3e50] mb-1 text-center">{{ mainTitle }}</div>

    <!-- 副标题变量 -->
    <div v-if="!hasMessage" class="flex items-center">
      <span class="w-[5px] h-[5px] bg-[#42b983] rounded-full"></span>
      <span class="text-[12px] text-[#afb9c1] ml-[6px] mr-[6px]">{{ subTitle }}</span>
      <span class="w-[5px] h-[5px] bg-[#42b983] rounded-full"></span>
    </div>
  </div>
</template>

<script setup>

const props = defineProps({
  hasMessage: {
    type: Boolean,
    default: false
  },
  // 图片路径
  imageSrc: {
    type: String,
    default: `https://one-feel-config-images-bucket.oss-cn-chengdu.aliyuncs.com/xiaoqi/come_chat_image.png`
  },
  // 主标题
  mainTitle: {
    type: String,
    default: '和我聊聊天吧!'
  },
  // 副标题
  subTitle: {
    type: String,
    default: '点击开始聊天'
  }
});
</script>
