<template>
  <div
    style="scrollbar-width: none"
    class="mx-12 py-8 mb-20  box-border border-b-[1px] border-dashed flex justify-between items-start"
  >

    <div class="flex shrink-0 w-[74%]  justify-start items-start">
      <div class="w-32 h-32 rounded-full shrink-0">
        <img
          v-if="itemData?.headImage"
          class="w-full h-full object-cover rounded-full"
          :src="itemData?.headImage"
          alt=""
        />
        <img
          v-else
          class="w-full h-full object-cover rounded-full"
          src="https://www.xiaoyaotravel.com/_nuxt/default_avatar.gSq5JxK1.png"
          alt=""
        />
      </div>

      <div class="-mt-5 ml-8 w-[85%] w-full text-sm">
        <NuxtLink :to="goToPage(itemData)">
          <p class="w-full line-clamp-1 ">
            <span class="text-black-6  text-sm  pr-4">
              {{ itemData?.showName }}
            </span>

            <div
              :class="`inline-block text-sm px-6 py-3 text-[${bgColor(itemData?.state)}] bg-[${bgColor(itemData?.state)}]/[0.08]`"
            >
              {{ state(itemData?.state) }}
            </div>
          </p>

          <p
            :class="`w-full  line-clamp-2 my-6 text-black-3 text-base leading-4xl`"
          >
            <span v-if="itemData?.noticeType== 12">
              回复{{
                itemData?.showName != userInfo.showName
                  ? `@${itemData?.showName}`
                  : ''
              }}：
            </span>
            <span v-if="itemData?.noticeType==6">评论：</span>

            <span v-html="coveredContent( itemData?.messageContent)"></span>
          </p>
          <p class="w-full mb-6 text-black-9 leading-xl">{{ itemData?.createTime }}</p>
        </NuxtLink>
     
        <div
         v-if="itemData?.noticeType== 12"
         @click="itemData.noticeType == 12 ? navigateTo({
          path:`/yj/${itemData.businessId}` ,
         }) :()=>{}"
          class="box-border mb-12 line-clamp-1 rounded-full w-95 h-26 flex justify-center items-center text-base px-8 text-black-3 leading-4xl bg-[#F5F5F5] active:bg-black/[0.1]"
        >
          <div class="w-16 h-16 rounded-full shrink-0 mr-4">
            <img
              v-if="userInfo?.headImageUrl"
              class="w-full h-full object-cover rounded-full"
              :src="userInfo?.headImageUrl"
              alt=""
            />
            <img
              v-else
              class="w-full h-full object-cover rounded-full"
              src="https://www.xiaoyaotravel.com/_nuxt/default_avatar.gSq5JxK1.png"
              alt=""
            />
          </div>
          回复评论
        </div>
      </div>
    </div>

    <NuxtLink
      itemData
      :to="itemData.businessType == 1 ? `/yj/${itemData.businessId}` : '/'"
      class="block w-71 ml-17 h-47 shrink-0 rounded-[4px] overflow-hidden"
    >
      <img
        v-if="itemData?.imageUrl"
        class="w-full h-full object-cover"
        :src="itemData?.imageUrl"
        alt=""
      />
      <img v-else class="w-full h-full object-cover" :src="defaultImg" alt="" />
    </NuxtLink>
  </div>
</template>
<script setup>
import defaultImg from '~/assets/img/comment/H5_default.png'
import emojiJson from '@/pages/yj/emoji.json'

defineEmits(['onAddReply'])
// 转换评论中的一些非字符emoji
function coveredContent(val) {
  if (!val) return ''
  return val.replace(/\[.*?]/g, function (str) {
    const baseApi = import.meta.env.VITE_APP_EMOJI_API
    const emojiName = emojiJson[str]
    if (!emojiName) return str
    return `<img src=${baseApi}${emojiJson[str]} style="width: 20px; height: 20px;display: inline-block; vertical-align: middle"/>`
  })
}

defineProps({
  itemData: {
    type: Object,
    default: () => ({})
  },
  userInfo: {
    type: Object,
    default: () => ({})
  }
})

// 跳转到那个页面
const goToPage = (item) => {
  switch (item?.businessType) {
    case 1:
      return `/yj/${item?.businessId}`
    default:
      return '/'
  }
}

const state = (stateNum) => {
  switch (stateNum) {
    case 4:
      return '粉丝'
    case 2:
      return '互关'
    default:
      return ''
  }
}

// 背景色 和文字颜色
const bgColor = (color) => {
  if (color == 2) {
    return '#3369E7'
  }
  if (color == 4) {
    return '#FF9300'
  }
}



</script>
<style lang="scss" scoped></style>
