<!--图片组件-->

<template>
    <div>
        <div v-for="item in imageJson"
             :style="{
                    position:'absolute',
                    left:(item.Left-window.Left)*bigScale+'px',
                    top:(item.Top-window.Top)*bigScale+'px',
                    width:item.Width*bigScale + 'px',
                    height:item.Height*bigScale + 'px',
                    zIndex:item.ZIndex,
                    backgroundRepeat:'no-repeat',
                    backgroundSize:'100% 100%',
                }"
             :ref="item.ID"
        >
        </div>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import {getStaticFile} from "../../utils/tools"

    export default {
        data() {
            return {
                imageJson:[],
                staticUrl:this.$store.state.staticUrl,
                window:this.$attrs.window
            }
        },

        async beforeCreate() {
            const arr = await getStaticFile('EnityImage.Data')
            this.imageJson = arr.filter(item => item.WindowID === this.window.ID)
        },

        async updated() {
            // 设置背景图片
            const imageArr = this.imageJson
            const keyArr = Object.keys(this.$refs)
            keyArr.forEach((item,index) => {
                this.$refs[item][0].style.backgroundImage = imageArr[index].BackIcon ? 'url('+`${this.staticUrl}/Data/${imageArr[index].BackIcon}`+')' : null
            })
        },

        computed: {
            ...mapState(['bigScale'])
        }
    }
</script>
