<template>
  <Container :needPadding="true">
    <template v-slot:header>
      <WlHeader :needBottomBorder="true">MtReplyRecommendList 全局滚动列表</WlHeader>
    </template>
    <template v-slot:main>
      <Title>基础使用</Title>
      <WlButton @onClick="listVisible = true">打开列表</WlButton>
      <MtReplyRecommendList v-if="listVisible" :list.sync="list" :baseHeight="844"/>
    </template>
  </Container>
</template>

<script>
import Title from "../components/Title";
import Container from "../components/Container";
export default {
  name: "MtReplyRecommendList-Example",
  components: { Title, Container },
  data() {
    return {
      listVisible: false,
      list: [
        {
          keywords: ["关键词1", "关键词2", "关键词3"],
          number: 1,
          key: 1,
        },
        {
          keywords: ["关键词1"],
          number: 3,
          key: 2,
        },
        {
          keywords: ["关键词1"],
          number: 2,
          key: 3,
        },
        {
          keywords: ["关键词1"],
          number: 1,
          key: 4,
        },
      ],
    };
  },
  mounted() {
    setTimeout(() => {
      const list = [1, 2, 3].map((ele) => {
        return {
          keywords: ["关键词1"],
          number: ele,
          key: 10 + ele,
        };
      });
      this.list = this.list.concat(list);
    }, 1000);

    setTimeout(() => {
      const list = [1, 2, 3].map((ele) => {
        return {
          keywords: ["关键词1"],
          number: ele,
          key: 100 + ele,
        };
      });
      this.list = this.list.concat(list);
    }, 5000);
  },
};
</script>
