<template>
  <div class="reply-recomment">
    <WlPic :src="avatar_url" 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 > keyWordsLength">等{{ keyWords.length }}个关键词</span>
      ，为你推荐{{ number }}条回复</span
    >
  </div>
</template>

<script>
import WlPic from "@packages/components/Common/WlPic/src/index.vue";
/*
 * @Author: yangxin
 * @Date: 2021-09-22 20:21:19
 * @Last Modified by: yangxin
 * @Last Modified time: 2022-01-24 18:55:15
 */
export default {
  name: "MtReplyRecommend",
  components: { WlPic },
  props: {
    keyWords: {
      type: Array,
      default: () => [],
    },
    text: {
      type: String,
      default: "",
    },
    avatar_url: {
      type: String,
      default: "https://wlmvp-cos.weiling.cn/frontend/xiaowei.jpg",
    },
    number: {
      type: [Number, String],
      default: 1,
    },
    keyWordsLength: {
      type: Number,
      default: 3,
    },
  },
  computed: {
    list() {
      let arr = this.keyWords;
      if (typeof this.keyWords === "string") {
        arr = [this.keyWords];
      }
      return arr.slice(0, this.keyWordsLength);
    },
  },
  mounted() {
    this.$emit("onExecuteNow");
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.reply-recomment {
  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;
    // @include textEllipsis(1);
  }
}
</style>
