<template>
  <div
    :class="tfixedClassList">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "mm-tfixed",
  props: {
    position: {
      type: String,
      default: "left",
    },
    store: Object,
  },
  computed: {
    tfixedClassList() {
      const { position, scrolled } = this
      return [
        "mm-tfixed",
        `mm-tfixed__${position}`,
        {
          "mm-tfixed--scrolled": scrolled,
        },
      ]
    },
    scrolled() {
      const {
        scrollX,
        tableWidth,
        containerWidth,
        canScrollX,
        canScrollY,
        scrollBarWidth,
      } = this.store.layout

      return (
        (this.position === "left" && scrollX > 0) ||
        (this.position === "right" &&
          canScrollX &&
          scrollX + containerWidth - (canScrollY ? scrollBarWidth : 0) < tableWidth)
      )
    },
  },
}
</script>
