<template>
  <div class="reply-recommend-list" ref="recommendListWrapRef">
    <div
      v-for="(item, index) in tagList"
      :key="item[defaultKey]"
      :style="tagStyle(item, index)"
      class="tag"
      @click="onSelect(item)"
    >
      <MtReplyRecommend
        v-bind="$attrs"
        :keyWords="item[wordsKey]"
        :text="item[textKey]"
        :number="item[numberKey]"
      />
    </div>
  </div>
</template>

<script>
import MtReplyRecommend from "@packages/components/Material/MtReplyRecommend/src/index.vue";
/*
 * @Author: yangxin
 * @Date: 2021-09-22 20:21:19
 * @Last Modified by: yangxin
 * @Last Modified time: 2022-07-21 15:03:02
 */
export default {
  name: "MtReplyRecommendList",
  components: { MtReplyRecommend },
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    wordsKey: {
      type: String,
      default: "keywords",
    },
    numberKey: {
      type: String,
      default: "number",
    },
    textKey: {
      type: String,
      default: "text",
    },
    spaceTime: {
      type: Number,
      default: 15,
    },
    selectdDelete: {
      type: Boolean,
      default: true,
    },
    defaultKey: {
      type: String,
      default: "key",
    },
    baseHeight: {
      type: Number,
      default: 500
    },
    currentHeight: {
      type: [Number, String],
      default: ""
    }
  },
  data() {
    return {
      tagList: [],
      renderTime: 0,
      renderSpace: 0,
      intervalTimer: null,
    };
  },
  watch: {
    list: {
      handler(data) {
        if (data.length > this.tagList.length) {
          let arr = data.slice(this.tagList.length, data.length);
          const currentTime = new Date().getTime();
          const interval = (currentTime - this.renderTime) / 1000;
          const previousDelay =
            this.tagList.length === 0
              ? 0
              : this.tagList[this.tagList.length - 1]["_replyRecommendDelay"];
          const baseTime = interval < previousDelay ? previousDelay : 0;
          const currentHeight = this.currentHeight || parseInt(document.body.clientHeight);
          console.log(currentHeight)
          // 屏幕高度影响的延迟时间
          const spaceTime = this.baseHeight / currentHeight < 1 ? 0 : this.baseHeight / currentHeight;
          console.log(spaceTime)
          arr = arr.map((ele, index) => {
            let currentIndex = this.tagList.length + index;
            return {
              ...ele,
              _replyRecommendDelay: index + baseTime + 0.5 + currentIndex * spaceTime * 0.5,
              _renderTime: new Date().getTime(),
            };
          });
          const tagList = this.tagList.concat(arr);
          this.renderSpace = arr.length;
          this.renderTime = new Date().getTime();
          this.tagList = tagList;
          this.$emit("update:list", tagList);
        } else {
          this.tagList = data;
        }
      },
      immediate: true,
    },
  },
  computed: {
    tagStyle() {
      return function(item, index) {
        return {
          // "animation-play-state": this.selectdKey.includes(item[this.defaultKey])
            // ? "paused"
            // : "running",
          "animation-delay": (item["_replyRecommendDelay"] || index) + "s",
          "--spaceTime": this.spaceTime + "s",
        };
      };
    },
  },
  mounted() {
    if (this.intervalTimer) clearInterval(this.intervalTimer);
    this.intervalTimer = setInterval(() => {
      const data = [];
      for (let i = 0; i < this.tagList.length; i++) {
        const item = this.tagList[i];
        const currentTime = new Date().getTime();
        const spaceTime = currentTime - item["_renderTime"];
        const delayTime = item["_replyRecommendDelay"] || i;
        if (spaceTime < (delayTime + this.spaceTime) * 1000) {
          data.push(item);
        }
      }
      this.$emit("update:list", data);
    }, this.spaceTime * 1000);
  },
  destroyed() {
    if (this.intervalTimer) clearInterval(this.intervalTimer);
  },
  methods: {
    onSelect(item) {
      this.$emit("onSelect", item);
      if (this.selectdDelete) {
        const list = this.tagList.filter((ele) => ele[this.defaultKey] !== item[this.defaultKey]);
        this.$emit("update:list", list);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@keyframes move {
  0% {
    opacity: 0;
    bottom: 0;
  }
  5% {
    opacity: 1;
    bottom: 5%;
  }
  95% {
    opacity: 1;
    bottom: 95%;
  }
  100% {
    opacity: 0;
    bottom: 100%;
  }
}
.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;
    }
  }
}
</style>
