<template>
  <div class="Adaptation" :style="transformStyle">
    <slot />
  </div>
</template>

<script>
export default {
  name: "Adaptation",
  props: {
    defaultWidth: {
      type: Number,
      default: () => 1920
    },
    defaultHeight: {
      type: Number,
      default: () => 1080
    }
  },
  provide() {
    return {
      adpScale: this.getScale
    }
  },
  data() {
    return {
      scale: {
        scaleX: 1,
        scaleY: 1,
      }
    }
  },
  computed: {
    transformStyle() {
      const obj = {};

      obj["transform"] = `scaleX(${this.scale.scaleX}) scaleY(${this.scale.scaleY})`;
      obj["width"] = this.defaultWidth + "px";
      obj["height"] = this.defaultHeight + "px";
      // obj.top = `calc(50% - ${(this.defaultHeight / 2) * this.scaleY}px)`;
      // obj.left = `calc(50% - ${(this.defaultWidth / 2) * this.scaleX}px)`;

      return obj;
    },
    getScale() {
      return this.scale
    }
  },
  methods: {
    initScale() {
      let winW = window.innerWidth;
      let winH = window.innerHeight;
      this.scale.scaleX = winW / this.defaultWidth;
      this.scale.scaleY = winH / this.defaultHeight;
    }
  },
  mounted() {
    this.initScale();
    window.addEventListener(
      "resize",
      _.debounce(this.initScale.bind(this), 360)
    );
  },
};
</script>

<style lang="scss" scoped>
.Adaptation {
  transition: all 0.15s linear;
  position: absolute;
  transform-origin: 0 0;
}
</style>
