<!--label标签组件-->

<template>
    <div>
        <div v-for="item in labelJson"
               :style="{
                 position:'absolute',
                 left:(item.Left-window.Left)*bigScale+'px',
                 top:(item.Top-window.Top)*bigScale+'px',
                 fontSize:item.FontSize*bigScale + 'px',
                 fontWeight:600,
                 width:item.Width*bigScale + 'px',
                 height:item.Height*bigScale + 'px',
                 zIndex:item.ZIndex,
                 color:`#${item.ForegroundStr.slice(3)}`,
                 textAlign:'center',
                 lineHeight:item.Height*bigScale + 'px',
                 whiteSpace:'nowrap'
            }">
            {{item.Text}}
        </div>
    </div>
</template>

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

    export default {
        data() {
            return {
                labelJson: [], // 当前window中按钮
                staticUrl:this.$store.state.staticUrl, // 静态资源路径
                window:this.$attrs.window
            }
        },

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

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