<template>
  <div class="pointer right-button">
    <!-- <svg-icon name="right"></svg-icon> -->
    <el-icon>
      <right v-if="showRight" />
      <back v-else />
    </el-icon>
  </div>
</template>

<script setup lang="ts" name="RightButton">
// import SvgIcon from '../common/SvgIcon.vue'
import { onMounted, ref } from 'vue'
import { ElIcon } from 'element-plus'
import { Right, Back } from '@element-plus/icons-vue'
import elementResizeDetectorMaker from 'element-resize-detector'
const showRight = ref(true)
onMounted(() => {
  var erd = elementResizeDetectorMaker()
  erd.listenTo(document.querySelector('.table-view') as HTMLElement, function (element: any) {
    var width = element.offsetWidth
    var height = element.offsetHeight
    showRight.value = width > 0
  })
})
</script>

<style scoped lang="scss">
.right-button {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  color: $color--white;
  background: $color--primary;
  box-shadow: 0px 4px 8px 0px rgba(0, 145, 255, 0.3);
  border-radius: 12px;
  &:hover {
    filter: brightness(1.1);
  }
}
</style>
