import {sendMessage} from '@/utils/iframe';

const VISUAL_CONFIG = {width: 9450, height: 3000}

export default {
    data() {
        return {
            autoStyle: {}
        }
    },
    computed: {
    },
    mounted() {
        this.getAutoStyle()
        this.initScaleEvent()
    },
    beforeDestroy() {
        this._removeScaleEvent()
    },
    methods: {
        getAutoStyle() {
            const innerHeight = window.innerHeight
            const innerWidth = window.innerWidth
            const {scale, origin, position, type} = this.getScale()
            sendMessage('scale', {scale, type, innerHeight, innerWidth})
            localStorage.setItem('scale', JSON.stringify({scale, type, innerHeight, innerWidth}))
            this.autoStyle = {
                width: VISUAL_CONFIG.width + 'px',
                height: VISUAL_CONFIG.height + 'px',
                transform: `scale(${scale})`,
                transformOrigin: origin,
                ...position
            }
        },
        getScale() {
            let scale = 1
            // 1 按照高度缩放 2 按照宽度缩放
            let type = 1
            let origin = 'top center'
            const innerWidth = window.innerWidth
            const innerHeight = window.innerHeight
            const widthScale = innerWidth / VISUAL_CONFIG.width
            const scaleHeight = VISUAL_CONFIG.height * widthScale
            const position = {left: 0, top: 0, marginTop: 0, marginLeft: 0}
            if (scaleHeight <= innerHeight) {
                origin = 'left center'
                scale = widthScale
                position.left = 0
                position.top = '50%'
                position.marginTop = -VISUAL_CONFIG.height / 2 + 'px'
                position.marginLeft = 0
                let type = 2

                if (scale > 1) {
                    origin = 'left top'
                    position.left = 0
                    position.top = 0
                    position.marginTop = 0
                    position.marginLeft = 0
                }
            } else {
                scale = innerHeight / VISUAL_CONFIG.height
                position.left = '50%'
                position.top = 0
                position.marginTop = 0
                position.marginLeft = -VISUAL_CONFIG.width / 2 + 'px'
            }
            return {scale, origin, position, type}
        },

        initScaleEvent() {
            window.addEventListener('resize', this.getAutoStyle.bind(this))
        },
        _removeScaleEvent() {
            window.removeEventListener('resize', this.getAutoStyle.bind(this))
        }
    }
}