<template>
  <div>
    <v-container fluid class="ma-0 pa-0 full-screen d-flex">
      <img
        src="../assets/images/pipebackground_1.svg"
        style=""
        class="d-flex align-end ma-0 pa-0 new-background-image"
      />
      <v-container
        fill-height
        class="d-flex align-center"
        style="position: static; z-index: 10;"
      >
        <v-row>
          <v-col class="d-flex justify-center">
            <h1 class="display-2">Playground</h1>
          </v-col>
        </v-row>
        <v-row>
          <v-col>
            <h1 class="display-2">Playground</h1>
          </v-col>
        </v-row>
        <v-row>
          <v-col>
            <h1 class="display-2">{{ viewportHeight - 64 }}</h1>
          </v-col>
          <v-col>
            <h1 class="display-2">{{ viewportWidth }}</h1>
          </v-col>
          <v-col>
            <h1 class="display-2">{{ backgroundWidth }}</h1>
          </v-col>
        </v-row>
      </v-container>
    </v-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      viewportHeight: window.innerHeight,
      viewportWidth: window.innerWidth,
      backgroundWidth: "",
    };
  },
  created() {
    window.addEventListener("resize", this.updateHeight);
    window.addEventListener("resize", this.updateWidth);
    this.querySelectorsPlayground();
  },
  destroyed() {
    window.removeEventListener("resize", this.updateHeight);
    window.addEventListener("resize", this.updateWidth);
  },
  mounted() {
    // this.getBackgroundWidth();
  },
  methods: {
    updateHeight() {
      this.viewportHeight = window.innerHeight;
    },
    updateWidth() {
      this.viewportWidth = window.innerWidth;
    },
    getBackgroundWidth() {
      var background = document.querySelector("#backgroundsvg");
      this.backgroundWidth = background.clientWidth;
    },
    querySelectorsPlayground() {
      console.log(document.images);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~vuetify/src/styles/styles.sass";
$background-width: 795px;

.full-screen {
  height: calc(100vh - 64px);
}

img.new-background-image {
  height: calc(100vh);
  width: calc(100vw);
  position: absolute;
  @media screen and (min-width: $background-width) {
    object-fit: scale-down;
    object-position: right;
  }
  @media screen and (max-width: $background-width) {
    object-fit: cover;
    object-position: left;
  }
  @media #{map-get($display-breakpoints, 'md-and-up')} {
    top: -64px;
  }
  @media #{map-get($display-breakpoints, 'sm-and-down')} {
    top: -56px;
  }
}

.background-image {
  position: absolute;
  height: calc(100vh - 64px);
  // width: 100%;
  max-width: 1115px;
  right: 0;
  z-index: 1;
  border-style: dashed;
  object-fit: cover;
  object-position: right top;
  overflow: hidden;
}
</style>
