<template>
  <div
    class="fl-block-image"
    v-on="$listeners"
  >
    <div
      v-if="this.url"
      :style="urlImagePlan"
      class="fl-block-image__plan"
    />
    <div
      v-else
      class="fl-block-image__plan empty"
    />
  </div>
</template>

<script>

import { getPath } from '@/lib/helpTools'

export default {
  name: 'FlBlockImage',
  props: {
    url: {
      type: String,
      default: ''
    }
  },
  computed: {
    urlImagePlan () {
      return `background-image: url(${getPath(this.url)})`
    }
  }
}
</script>

<style lang="scss" scoped>
  .fl-block-image {
    max-height: 600px;
    margin-right: 20px;
  }

  .fl-block-image__plan {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }

  .empty {
    background-image: url("../../assets/img/empty-layout.png");
    background-size: cover;
  }

  @include media-max-md {
    .fl-block-image {
      width: 100%;
      height: 400px;
      margin-right: 0;
      margin-bottom: 20px;
    }
  }
</style>
