<template>
  <div id="scaleBox" class="scale-box" :style="style">
    <slot />
  </div>
</template>

<script>
import {debounce} from '@/utils/util'
export default {
  props: {
    // 适应全屏宽度
    fullWidth: {
      type: Boolean,
      default: true
    },
    // 适应全屏高度
    fullHeight: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      screenSize:{
        width:1920,
        height:1080
      },
      scale:1,
      statedScreenSize:{ //设计图尺寸
        width:11340,
        height:6378
      }
    }
  },
  mounted(){
    this.$nextTick(()=>{
      this.setScale()
      window.addEventListener('resize', debounce(this.setScale, 100))
    })
  },
  beforeDestroy() {
    window.removeEventListener('resize', debounce(this.setScale, 100))
  },
  methods:{
    getScale() {
      const { width = 1920, height = 1080 } = this.statedScreenSize
      const ww = window.innerWidth / width
      const wh = window.innerHeight / height
      // const obj = {
      //   scale: ww < wh ? ww : wh,
      //   screenSize: {
      //     width: window.innerWidth,
      //     height: window.innerHeight
      //   }
      // }
      // if (window.innerWidth / window.innerHeight < width / height) {
      //   obj.scale = ww > wh ? ww : wh
      // }
      const obj = {
					scale: ww < wh ? ww : wh,
					scaleY: ww < wh ? ww : wh,
					screenSize: {
						width: window.innerWidth,
						height: window.innerHeight
					}
				}
				if (window.innerWidth / window.innerHeight < width / height) {
					obj.scale = ww < wh ? ww : wh
					obj.scaleY = ww > wh ? ww : wh
				}
     
      return obj
    },
    setScale() {
      const { scale, screenSize,scaleY } = this.getScale()
      this.scale = scale
      this.scaleY = scaleY
      Object.assign(this.screenSize,screenSize)
    }
  },
  computed: {
   
    style() {
      const style = {
        // transform: `scale(${this.scale}) translate(-50%, -50%)`,
        // WebkitTransform: `scale(${this.scale}) translate(-50%, -50%)`,
        transform: `scale(${this.scale},${this.scaleY}) translate(-50%, -50%)`,
					WebkitTransform: `scale(${this.scale},${this.scaleY}) translate(-50%, -50%)`,
        
        width: this.fullWidth
          ? `${this.screenSize.width / this.scale}px`
          : `${this.statedScreenSize.width}px`,
        height: this.fullHeight
          ? `${this.screenSize.height / this.scale}px`
          : `${this.statedScreenSize.height}px`
      }
     
      return style
    }
  }
}
</script>

<style lang="less" scoped>
.scale-box {
  transform-origin: 0 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transition: 0.3s;

}
</style>
