<template>
  <template v-if="props.direction === 'hor-left'">
    <div :class="{ horizontalRoad: true, left: true, isBook: isBook }"></div>
  </template>
  <template v-else-if="props.direction === 'hor-right'">
    <div :class="{ horizontalRoad: true, right: true, isBook: isBook }"></div>
  </template>
  <template v-else-if="props.direction === 'ver-left'">
    <div :class="{ verticalRoad: !isBook, left: true, verisBook: isBook }"></div>
  </template>
  <template v-else-if="props.direction === 'ver-right'">
    <div :class="{ verticalRoad: !isBook, right: true, verisBook: isBook }"></div>
  </template>
</template>

<script lang="ts" setup>
const props = defineProps<{
  direction?: string
  isBook?: boolean
}>()
const OSS_URL = import.meta.env.VITE_OSS_URL

const bend_left = `url(${OSS_URL}/xuexiaole_clinet/learnWord/bend_left.png)`
const bend_right = `url(${OSS_URL}/xuexiaole_clinet/learnWord/bend_right.png)`
</script>

<style lang="scss" scoped>
.horizontalRoad {
  width: 380px;
  height: 8.33vh;
  background-color: rgba(255, 254, 242, 0.35);
  position: absolute;
  top: 16.75vh;
  z-index: -1;
  &.left {
    right: 180px;
  }
  &.right {
    left: 180px;
  }
  &.isBook {
    background-color: rgba(255, 254, 242, 0.7);
  }
}
.verticalRoad {
  width: 100px;
  height: 47.17vh;
  position: absolute;
  top: 11.92vh;
  z-index: -1;
  &.left {
    left: 68px;
    background-image: v-bind(bend_left);
    background-size: contain;
    background-repeat: no-repeat;
  }
  &.right {
    right: -10px;
    background-image: v-bind(bend_right);
    background-size: contain;
    background-repeat: no-repeat;
  }
}
.verisBook {
  width: 105px;
  height: 39.58vh;
  position: absolute;
  top: 16.83vh;
  z-index: -1;
  background-color: rgba(255, 254, 242, 0.7);
  &.left {
    left: 74px;
    border-radius: 6.67vh 0 0 6.67vh;
    &::before {
      content: '';
      position: absolute;
      height: 8.33vh;
      width: 52px;
      bottom: 0;
      left: 105px;
      background-color: rgba(255, 254, 242, 0.7);
    }
  }
  &.right {
    right: -10px;
    border-radius: 0 6.67vh 6.67vh 0;
    &::before {
      content: '';
      position: absolute;
      height: 8.42vh;
      width: 85px;
      top: -0.08vh;
      right: 105px;
      background-color: rgba(255, 254, 242, 0.7);
    }
  }
}
</style>
