<template>
  <div class="sectorWrapper" :class="[props.position, { active: isActive }]" @click="handleClick">
    <!-- 四分之一圆 -->
    <div class="sector"></div>
    <!-- 小三角形 -->
    <div class="triangle"></div>
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  const props = defineProps<{ position: 'top' | 'right' | 'bottom' | 'left' }>();
  const isActive = ref(false);
  const handleClick = () => {
    isActive.value = true;
    setTimeout(() => {
      isActive.value = false;
    }, 200);
  };
</script>
<style scoped lang="scss">
  .sectorWrapper {
    width: 90px;
    height: 90px;
    transform-origin: bottom right;
    position: absolute;
    cursor: pointer;
    left: 0;
    top: 0;
  }
  .sectorWrapper.top {
    transform: rotate(45deg);
  }

  .sectorWrapper.right {
    transform: rotate(135deg);
  }

  .sectorWrapper.bottom {
    transform: rotate(225deg);
  }
  .sectorWrapper.left {
    transform: rotate(315deg);
  }
  .sectorWrapper.active {
    .sector {
      background-color: #1890ff;
      opacity: 0.4;
    }
    .triangle {
      border-bottom-color: #1677ff;
    }
  }
  .sector {
    width: 90px;
    height: 90px;
    border-radius: 90px 0 0 0;
  }

  .triangle {
    width: 0;
    height: 0;
    border: 7px solid transparent;
    border-bottom-color: #d8d8d8; /* 三角形的颜色 */
    position: absolute;

    top: 26px;
    left: 26px;
    transform: rotate(-43deg);
  }
</style>
