<template>
  <el-button type="primary" link @click="handleClick" @mouseenter="hoverState = true" @mouseleave="hoverState = false">
    <el-icon size="18">
      <img :src="currentIcon" :alt="type === 'up' ? '上移' : '下移'" />
    </el-icon>
  </el-button>
</template>

<script lang="ts" setup>
  import { computed, ref } from 'vue';
  import upActive from '@/assets/icons/sortup_active.svg';
  import upHover from '@/assets/icons/sortup.svg';
  import downActive from '@/assets/icons/sortdown_active.svg';
  import downHover from '@/assets/icons/sortdown.svg';

  const props = defineProps({
    type: {
      type: String as () => 'up' | 'down',
      required: true,
    },
  });

  const emit = defineEmits(['move']);

  const hoverState = ref(false);

  const currentIcon = computed(() => {
    if (props.type === 'up') {
      return hoverState.value ? upHover : upActive;
    }
    return hoverState.value ? downHover : downActive;
  });

  const handleClick = () => {
    emit('move', props.type);
  };
</script>
