<template>
  <div class="x-scroll-box" :style="computedStyle">
    <slot />
  </div>
</template>

<script>

export default {
  name: 'XScrollBox',
  data() {
    return {
      scrollBoxRef: null
    }
  },
  computed: {
    // 判断当前是否为 blank 模式
    isBlankMode() {
      return process.env.VUE_APP_SINGLE_PAPER === 'TRUE'
    },
    computedStyle() {
      // 非微应用环境使用 100%
      return {
        height: '100%',
        maxHeight: '100%',
        minHeight: '100%',
        overflow: 'auto'
      }
    }
  },
  mounted() {
    // 获取滚动容器引用
    this.scrollBoxRef = this.$el
  },
  methods: {
    /**
     * 滚动到顶部
     * @param {boolean} smooth - 是否平滑滚动，默认 true
     */
    scrollToTop(smooth = true) {
      if (this.scrollBoxRef) {
        this.scrollBoxRef.scrollTo({
          top: 0,
          left: 0,
          behavior: smooth ? 'smooth' : 'auto'
        })
      }
    },

    /**
     * 滚动到指定位置
     * @param {number} top - 垂直位置
     * @param {number} left - 水平位置，默认 0
     * @param {boolean} smooth - 是否平滑滚动，默认 true
     */
    scrollTo(top, left = 0, smooth = true) {
      if (this.scrollBoxRef) {
        this.scrollBoxRef.scrollTo({
          top,
          left,
          behavior: smooth ? 'smooth' : 'auto'
        })
      }
    },

    /**
     * 获取当前滚动位置
     * @returns {Object} - { scrollTop, scrollLeft }
     */
    getScrollPosition() {
      if (this.scrollBoxRef) {
        return {
          scrollTop: this.scrollBoxRef.scrollTop,
          scrollLeft: this.scrollBoxRef.scrollLeft
        }
      }
      return { scrollTop: 0, scrollLeft: 0 }
    }
  }
}
</script>

<style lang="less" scoped>
.x-scroll-box {
  position: relative;

  // 隐藏滚动条但保持滚动功能
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */

  // 隐藏 Webkit 滚动条
  &::-webkit-scrollbar {
    display: none;
  }
}
</style>
