<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
    traffic: any
    direction: number
  }>(),
  {
    act: true
  }
)

const tunnelStore = useTunnelStoreWithOut()

const facilities = computed(() => {
  if (!props.traffic) return []

  return props.traffic.facilitiesFormate(tunnelStore.getFacilities).map((item) => {
    const { left_x,right_x, width, type } = item
    const style = {}
    style.left = left_x + 'px'
    // style.width = width + 'px'

    const temp = { type, style }

    return temp
  })
})
</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;
      width: 100%;
      height: 100%;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }

  .man-cross {
    width: 18px;
    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>
