<script setup lang="ts">
defineProps<{
  isAdding?: boolean
}>()

defineEmits<{
  (e: 'start-add-output'): void
}>()
</script>
<template>
  <div class="absolute inset-0 flex items-start gap-[14%]">
    <!-- 左侧元素 -->
    <div class="flex-1 relative h-full flex justify-center">
      <!-- 背景那一根线 -->
      <div class="h-full bg-[var(--color-bg-flow)] w-[5px]">
        <!-- 线底部的小圆球 -->
        <div
          class="absolute bottom-0 left-1/2 transform -translate-x-1/2 bg-[var(--color-bg-flow)] w-[15px] h-[15px] rounded-full"
        ></div>
      </div>
    </div>

    <!-- 右侧元素 -->
    <div class="flex-1 relative h-full flex justify-center">
      <!-- 背景那一根线 -->
      <div class="h-full bg-[var(--color-bg-flow)] w-[5px]">
        <!-- 顶部加号区域 -->
        <div
          v-if="!isAdding"
          v-dev-only
          class="plus-area mt-[35px] ml-[-15px] w-[34px] h-[34px] flex items-center justify-center cursor-pointer rounded-full"
          @click="$emit('start-add-output')"
        >
          <!-- 加号图标 -->
          <svg-icon
            icon-class="plus"
            color="var(--color-text)"
            size="20px"
            class="plus-icon opacity-0 transition-opacity duration-200"
          />
        </div>
        <!-- 线底部的小圆球 -->
        <div
          class="absolute bottom-0 left-1/2 transform -translate-x-1/2 bg-[var(--color-bg-flow)] w-[15px] h-[15px] rounded-full"
        ></div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.plus-area:hover .plus-icon {
  opacity: 1;
  border: 1px dashed var(--color-text);
}
</style>
