<!--图片组件-->

<template>
    <div>
        <div v-for="item in imageJson"
             :style="{
                    position:'absolute',
                    left:item.Left*bigScale+'px',
                    top:item.Top*bigScale+'px',
                    width:item.Width*bigScale + 'px',
                    height:item.Height*bigScale + 'px',
                    zIndex:item.ZIndex,
                    display:item.IsVisibility ? 'block' : 'none',
                    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
            }
        },

        async beforeCreate() {
            this.imageJson = await getStaticFile('EnityImage.Data')
        },

        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>

<style scoped>

</style>
