<template>
  <div class="reply-recommend-list" data-weiling-mobile-ui-bc-reply-recommend-list ref="recommendListWrapRef">
    <div v-for="(item, index) in tagList" :key="item[defaultKey]" :style="tagStyle(item, index)" class="tag"
      @click="onSelect(item)">
      <BCReplyRecommend :avatarUrl="avatarUrl" :keywords="item[wordsKey]" :text="item[textKey]"
        :number="item[numberKey]" />
    </div>
  </div>
</template>

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

<script lang="ts" setup>
import {
  ref,
  onMounted,
  onUnmounted,
  computed,
  watch,
} from "vue";
import BCReplyRecommend from "@mobileUI/components/BCReplyRecommend/src/index.vue";
const emit = defineEmits(["update:list", "onSelect"]);
type Props = {
  list: Array<any>;
  wordsKey: string;
  avatarUrl: string;
  numberKey: string;
  textKey: string;
  spaceTime: number;
  selectdDelete: boolean;
  defaultKey: string;
  baseHeight: number;
  currentHeight: number | string;
}
const props = withDefaults(defineProps<Props>(), {
  list: () => [],
  wordsKey: "keywords",
  numberKey: "number",
  textKey: "text",
  avatarUrl: "",
  spaceTime: 15,
  selectdDelete: true,
  defaultKey: "key",
  baseHeight: 500,
  currentHeight: "",
});

let tagList = ref([]);
let renderTime = ref(0);
let renderSpace = ref(0);
let intervalTimer = ref(null);

onMounted(() => {
  if (intervalTimer) clearInterval(intervalTimer);
  intervalTimer = setInterval(() => {
    const data = [];
    for (let i = 0; i < tagList.value.length; i++) {
      const item = tagList.value[i];
      const currentTime = new Date().getTime();
      const spaceTime = currentTime - item["_renderTime"];
      const delayTime = item["_replyRecommendDelay"] || i;
      if (spaceTime < (delayTime + props.spaceTime) * 1000) {
        data.push(item);
      }
    }
    emit("update:list", data);
  }, props.spaceTime * 1000);
});
onUnmounted(() => {
  if (intervalTimer) clearInterval(intervalTimer);
});

const tagStyle = computed(() => {
  return (item, index) => {
    return {
      "animation-delay": (item["_replyRecommendDelay"] || index) + "s",
      "--spaceTime": props.spaceTime + "s",
    };
  };
});

const onSelect = (item) => {
  emit("onSelect", item);
  if (props.selectdDelete) {
    const list = tagList.value.filter(
      (ele) => ele[props.defaultKey] !== item[props.defaultKey]
    );
    emit("update:list", list);
  }
};

watch(
  () => props.list,
  (data) => {
    if (data.length > tagList.value.length) {
      let arr = data.slice(tagList.value.length, data.length);
      const currentTime = new Date().getTime();
      const interval = (currentTime - renderTime.value) / 1000;
      const previousDelay =
        tagList.value.length === 0
          ? 0
          : tagList.value[tagList.value.length - 1]["_replyRecommendDelay"];
      const baseTime = interval < previousDelay ? previousDelay : 0;
      const currentHeight =
        props.currentHeight || parseInt(document.body.clientHeight.toString());
      // 屏幕高度影响的延迟时间
      const spaceTime =
        props.baseHeight / parseInt(currentHeight.toString()) < 1
          ? 0
          : props.baseHeight / parseInt(currentHeight.toString());
      arr = arr.map((ele, index) => {
        let currentIndex = tagList.value.length + index;
        return {
          ...ele,
          _replyRecommendDelay:
            index + baseTime + 0.5 + currentIndex * spaceTime * 0.5,
          _renderTime: new Date().getTime(),
        };
      });
      const tagListSec = tagList.value.concat(arr);
      renderSpace.value = arr.length;
      renderTime.value = new Date().getTime();
      tagList.value = tagListSec;
      emit("update:list", tagList);
    } else {
      tagList.value = data;
    }
  },
  { immediate: true }
);
</script>

<style lang="scss">
.reply-recommend-list[data-weiling-mobile-ui-bc-reply-recommend-list] {
  .tag {
    position: fixed;
    z-index: 4;
    bottom: j(-60);
    animation: move var(--spaceTime) linear;
    animation-iteration-count: 1;
    cursor: pointer;
    padding: 0 j(10);
    box-sizing: border-box;

    &:hover {
      animation-play-state: paused;
    }
  }

  @keyframes move {
    0% {
      opacity: 0;
      bottom: 0;
    }

    5% {
      opacity: 1;
      bottom: 5%;
    }

    95% {
      opacity: 1;
      bottom: 95%;
    }

    100% {
      opacity: 0;
      bottom: 100%;
    }
  }
}
</style>
