<template>
  <transition name="fade">
    <div 
      class="back-to-top" 
      v-show="visible" 
      @click="backToTop"
    >
      <el-icon><Top /></el-icon>
    </div>
  </transition>
</template>

<script>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { Top } from '@element-plus/icons-vue';

export default {
  name: 'BackToTop',
  components: { Top },
  props: {
    visibilityHeight: {
      type: Number,
      default: 400
    },
    backPosition: {
      type: Number,
      default: 0
    },
    customStyle: {
      type: Object,
      default: () => ({})
    },
    transitionName: {
      type: String,
      default: 'fade'
    }
  },
  setup(props) {
    const visible = ref(false);
    
    const scrollHandler = () => {
      visible.value = window.pageYOffset > props.visibilityHeight;
    };
    
    const backToTop = () => {
      window.scrollTo({
        top: props.backPosition,
        behavior: 'smooth'
      });
    };
    
    onMounted(() => {
      window.addEventListener('scroll', scrollHandler);
    });
    
    onBeforeUnmount(() => {
      window.removeEventListener('scroll', scrollHandler);
    });
    
    return {
      visible,
      backToTop
    };
  }
};
</script>

<style lang="scss" scoped>
@use '@/assets/styles/variables.scss' as vars;
@use 'sass:color';

.back-to-top {
  position: fixed;
  right: 40px;
  bottom: 40px;
  width: 40px;
  height: 40px;
  background-color: vars.$primary-color;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  z-index: 999;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
  transition: all 0.3s;
  
  &:hover {
    background-color: color.adjust(#409EFF, $lightness: 10%);
  }
}

// 过渡动画
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style> 