<!--Slider滑块组件-->

<template>
    <div>
        <div v-for="item in sliderJson"
             :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
                :style="{
                        width:item.imgSliderWidth*bigScale + 'px',
                        height:item.imgSliderHeight*bigScale + 'px',
                        backgroundImage:'url('+require(`../../../static/Data/${item.SliderIcon}`)+')',
                        backgroundRepeat:'no-repeat',
                    }"
            >

            </div>
        </div>
    </div>
</template>

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

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

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

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

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