<template>
  <bz-page-wrapper title="BzScrollContainer 示例">
    <div class="p-4">
      <div class="my-4">
        <bz-button class="mr-4" @click="scrollTo(100)">滚动到100px位置</bz-button>
        <bz-button class="mr-4" @click="scrollTo(800)">滚动到800px位置</bz-button>
        <bz-button class="mr-4" @click="scrollTo(0)">滚动到顶部</bz-button>
        <bz-button class="mr-4" @click="scrollBottom()">滚动到底部</bz-button>
      </div>
      <div class="scroll-wrap mt-16">
        <bz-scroll-container ref="scrollRef">
          <ul>
            <template v-for="index in 100" :key="index">
              <li>{{ index }}</li>
            </template>
          </ul>
        </bz-scroll-container>
      </div>
    </div>
  </bz-page-wrapper>
</template>
<script lang="ts">
  import { defineComponent, ref, unref } from 'vue';
  export default defineComponent({
    setup() {
      const scrollRef = ref(null);
      const getScroll = () => {
        const scroll = unref(scrollRef);
        if (!scroll) {
          throw new Error('scroll is Null');
        }
        return scroll;
      };

      function scrollTo(top: number) {
        (getScroll() as any)?.scrollTo(top);
      }

      function scrollBottom() {
        (getScroll() as any)?.scrollBottom();
      }

      return {
        scrollTo,
        scrollRef,
        scrollBottom,
      };
    },
  });
</script>
<style lang="less" scoped>
  .scroll-wrap {
    width: 50%;
    height: 300px;
    background: #fff;
  }
</style>
