<template>
  <div class="head">
    <a-carousel :autoplay="false">
      <div :key="item.id" v-for="item in bannerLists">
        <img :src="item.url" alt style="width: 100% !important" />
        <div id="banner-box"></div>
      </div>
    </a-carousel>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex';
export default {
  name: 'RichText',
  props: {
    showPage: {
      type: Number,
      default: 11,
    },
  },
  data() {
    return {};
  },

  computed: mapState('home', ['bannerLists']),

  // mounted() {
  //   window.addEventListener('scroll', this.handleScroll);
  //   setTimeout(() => {
  //     document.querySelector('#banner-box').scrollIntoView({
  //       behavior: 'smooth', // 平滑过渡
  //       block: 'start', // 上边框与视窗顶部平齐
  //     });
  //   }, 1000);
  // },

  async created() {
    this.setBannerLists([]);
    await this.getQueryRotation(this.showPage);
  },

  methods: {
    ...mapMutations('home', ['setBannerLists']),
    ...mapActions('home', ['getQueryRotation']),
  },
};
</script>

<style lang="stylus" scoped>
.head {
  background: white;
  overflow: hidden;
  position: relative;
  // height: 170px;
}

#banner-box {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  opacity: 0;
}
</style>
