<!--
* @FileDescription: 触摸模块
* @Author: 黄琪勇
* @Date:2023-08-03 11:50:57
-->
<template>
   <div class="trigger" :class="[isVertical ? 'trigger-vertical' : 'trigger-horizontal']">
      <div class="bar-con" :class="[isVertical ? 'vertical' : 'horizontal']">
         <i class="bar" v-once v-for="i in 8" :key="i"></i>
      </div>
   </div>
</template>

<script setup lang="ts">
import { computed } from "vue"

const props = defineProps<{
   mode: "horizontal" | "vertical"
}>()
const isVertical = computed(() => {
   return props.mode === "vertical"
})
</script>

<style lang="scss" scoped>
$trigger-width: 6px;
$trigger-bar-width: 4px;
$trigger-bar-offset: ($trigger-width - $trigger-bar-width) / 2;
$trigger-bar-interval: 3px;
$trigger-bar-weight: 1px;
$trigger-bar-con-height: ($trigger-bar-weight + $trigger-bar-interval) * 8;
.trigger {
   border: 1px solid $border-color;
   background: $bg-color-page;
   &.trigger-vertical {
      width: $trigger-width;
      height: 100%;
      border-top: none;
      border-bottom: none;
      cursor: col-resize;
      .bar {
         width: $trigger-bar-width;
         height: $trigger-bar-weight;
         background: $text-color-secondary;
         float: left;
         margin-top: $trigger-bar-interval;
      }
   }
   &.trigger-horizontal {
      height: $trigger-width;
      width: 100%;
      border-left: none;
      border-right: none;
      cursor: row-resize;
      .bar {
         height: $trigger-bar-width;
         width: $trigger-bar-weight;
         background: $text-color-secondary;
         float: left;
         margin-right: $trigger-bar-interval;
      }
   }
   .bar-con {
      position: absolute;
      overflow: hidden;
      &.vertical {
         left: $trigger-bar-offset;
         top: 50%;
         height: $trigger-bar-con-height;
         transform: translate(0, -50%);
      }
      &.horizontal {
         left: 50%;
         top: $trigger-bar-offset;
         width: $trigger-bar-con-height;
         transform: translate(-50%, 0);
      }
   }
}
</style>
