<template>
  <div class="reply-recomment" data-weiling-mobile-ui-bc-reply-recommend>
    <WlPic :src="avatarUrl" class="avatar" />
    <span class="text" v-if="text">{{ text }}</span>
    <span class="text" v-else>会话中提到
      <span v-for="(item, index) in list" :key="index"> [{{ item }}] </span>
      <span v-if="keywords.length > limit">等{{ keywords.length }}个关键词</span>
      ，为你推荐{{ number }}条回复</span>
  </div>
</template>

<script lang="ts">
export default {
  name: "BCReplyRecommend",
};
</script>

<script lang="ts" setup>
import { computed, onMounted } from "vue";
import WlPic from "@mobileUI/components/WlPic/src/index.vue";
const limit = 3;
type Props = {
  keywords: string[];
  text: string;
  avatarUrl: string;
  number: number | string;
}
const props = withDefaults(defineProps<Props>(), {
  keywords: null,
  text: "",
  avatarUrl: "https://wlmvp-cos.weiling.cn/frontend/xiaowei.jpg",
  number: 1,
});
const emit = defineEmits(["onExecuteNow"]);
onMounted(() => {
  emit("onExecuteNow");
});

const list = computed(() => {
  return props.keywords.slice(0, limit);
});
</script>

<style lang="scss">
.reply-recomment[data-weiling-mobile-ui-bc-reply-recommend] {
  width: fit-content;
  box-sizing: border-box;
  max-width: 100%;
  overflow: hidden;
  border-radius: j(999);
  padding: j(3) j(12) j(3) j(4);
  background-color: rgba(45, 45, 45, 0.4);
  backdrop-filter: blur(j(10));
  @extend %flex-middle-center;

  .avatar {
    border-radius: 50%;
    width: j(30);
    height: j(30);
    margin-right: j(4);
    overflow: hidden;
    flex-shrink: 0;
  }

  .text {
    font-size: j(14);
    line-height: j(24);
    color: #ffffff;
  }
}
</style>
