<template>

<div :class="['facilities', act ? 'act' : 'disabled']">
  <div
    v-for="(item, x) in facilities"
    :key="x"
    :class="['x-facility', item.type]"
    :style="item.style"
  ></div>
</div>

</template>

<script lang='ts' setup>

import { useTunnelStoreWithOut } from '@/store/modules/tunnel'

const props = withDefaults(defineProps<{
  act: boolean
}>(), {
  act: true
})

const tunnelStore = useTunnelStoreWithOut()

const tunnel = computed(() => {
  return tunnelStore.getUpTunnel 
})

const facilities = computed(() => {

  const rax = 1920 / +tunnel.value.long
  return tunnelStore.getFacilities.map(item => {
    const { start, type } = item
    return {
      style: { left: start * rax + 'px' },
      type 
    }
  })

})

</script>

<style lang='scss' scoped>

$base-url: '@/assets/images/common/';

.facilities {
  height: 28px;
  // width: 100%;
  margin: 0 90px;
  overflow-x: hidden;
  position: relative;

  &.disabled {
    opacity: 0.3;
    pointer-events: none;
  }

  .x-facility {
    position: absolute;
  }
  .flowers {
    top: 50%;
    height: 42px;
    width: 100px;
    background: url($base-url + 'flowers.png') no-repeat;
    background-size: 100%;
    transform: translateY(-50%);
    &.right {
      transform: translateY(-50%) rotateY(180deg);
    }
  }

  .man-cross,
  .car-cross {
    top: 0;
    width: 40px;
    height: 100%;
    &::after {
      content: "";
      width: 40px;
      height: 100%;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }

  .man-cross {
    background: url($base-url + 'man-cross.png') no-repeat;
    background-size: cover;
    // background: url($base-url + 'cross-back.png') no-repeat;
    // background-size: 100%;
    // &::after {
    //   background: url($base-url + 'man-cross.png') no-repeat;
    //   background-size: cover;
    // }
  }

  .car-cross {
    background: url($base-url + 'car-cross.png') no-repeat;
    background-size: cover;
    // background: url($base-url + 'cross-back.png') no-repeat;
    // background-size: 100%;
    // &::after {
    //   background: url($base-url + 'car-cross.png') no-repeat;
    //   background-size: cover;
    // }
  }


}

</style>