<template>
  <div :class="['resize-handler', rotateClassName, type]"></div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import type { OperateResizeHandlers } from '@/types/edit'

const props = withDefaults(defineProps<{
  type?: OperateResizeHandlers
  rotate?: number
}>(), {
  rotate: 0,
})

const rotateClassName = computed(() => {
  const prefix = 'rotate-'
  const rotate = props.rotate
  if (rotate > -22.5 && rotate <= 22.5) return prefix + 0
  else if (rotate > 22.5 && rotate <= 67.5) return prefix + 45
  else if (rotate > 67.5 && rotate <= 112.5) return prefix + 90
  else if (rotate > 112.5 && rotate <= 157.5) return prefix + 135
  else if (rotate > 157.5 || rotate <= -157.5) return prefix + 0
  else if (rotate > -157.5 && rotate <= -112.5) return prefix + 45
  else if (rotate > -112.5 && rotate <= -67.5) return prefix + 90
  else if (rotate > -67.5 && rotate <= -22.5) return prefix + 135
  return prefix + 0
})
</script>

<style lang="scss" scoped>
.resize-handler {
  position: absolute;
 
  width:26px;
  height: 26px;
  
  left: 0;
  top: 0;
  margin: -12px 0 0 -12px;
  // border: 1px solid $themeColor;
  

  &::after{
    width: 10px;
    height: 10px;
    border-radius: 10px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
    background-color: #fff;
    cursor: inherit;
    display: block;
    content: ' ';
    left: 8px;
    top:8px;
    position: absolute;
  }

  &.left-top.rotate-0,
  &.right-bottom.rotate-0,
  &.left.rotate-45,
  &.right.rotate-45,
  &.left-bottom.rotate-90,
  &.right-top.rotate-90,
  &.top.rotate-135,
  &.bottom.rotate-135 {
    cursor: url('https://im.oytour.com/trip/cusor/8f76b0abb0a62213ab3795d3ebaf3c3e.svg') 16 16, nwse-resize;
  }
  &.top.rotate-0,
  &.bottom.rotate-0,
  &.left-top.rotate-45,
  &.right-bottom.rotate-45,
  &.left.rotate-90,
  &.right.rotate-90,
  &.left-bottom.rotate-135,
  &.right-top.rotate-135 {
    cursor: url('https://im.oytour.com/trip/cusor/4f7515dd177541d307de562bd6ee8f07.svg') 16 16, ns-resize;
  }
  &.left-bottom.rotate-0,
  &.right-top.rotate-0,
  &.top.rotate-45,
  &.bottom.rotate-45,
  &.left-top.rotate-90,
  &.right-bottom.rotate-90,
  &.left.rotate-135,
  &.right.rotate-135 {
    cursor: url('https://im.oytour.com/trip/cusor/13cfd89732053891fab7d23547a6d4f0.svg') 16 16, nesw-resize;
  }
  &.left.rotate-0,
  &.right.rotate-0,
  &.left-bottom.rotate-45,
  &.right-top.rotate-45,
  &.top.rotate-90,
  &.bottom.rotate-90,
  &.left-top.rotate-135,
  &.right-bottom.rotate-135 {
    cursor: url('https://im.oytour.com/trip/cusor/7e6be5a8633602679325c01e745e53ef.svg') 16 16, ew-resize !important;
  }
  &.left.rotate-0::after,
  &.right.rotate-0::after{
    width:6px;
    height: 14px;
    border-radius: 6px;
    left: 10px;
    top: 6px;
    cursor: url('https://im.oytour.com/trip/cusor/7e6be5a8633602679325c01e745e53ef.svg') 16 16, ew-resize !important;
    // b7f2dba7d2a5c7631de984f35d15f2ee
  }
}
</style>