<!--管理界面-->
<template>
    <div class="containers">
        <!--主页-->
        <div
                :style="{
                    position: 'relative',
                    left:windowJson[0] ? windowJson[0].Left*bigScale+'px' : '',
                    top:windowJson[0] ? windowJson[0].Top*bigScale+'px' : '',
                    width:windowJson[0] ? windowJson[0].Width*bigScale + 'px' : '',
                    height:windowJson[0] ? windowJson[0].Height*bigScale + 'px' : '',
                    zIndex:windowJson[0] ? windowJson[0].ZIndex : '',
                    display:windowJson[0] ? (windowJson[0].IsVisibility ? 'block' : 'none') : '',
                    backgroundRepeat:'no-repeat',
                    backgroundSize:'100% 100%',
                    backgroundColor:`#${windowJson[0] ? (windowJson[0].BrackgroupStr ? windowJson[0].BrackgroupStr.slice(3) : null) : ''}`,
                    margin:'0 auto'}"
                ref="mainpage"
        >
            <!--按钮-->
            <ButtonComponent />

            <!--大屏显示-->
            <BigShowComponent />

            <!--label标签-->
            <LabelComponent />

            <!--图片-->
            <ImageComponent />

            <!--信号源列表-->
            <SignalListComponent />

            <!--滑块-->
            <SliderComponent />
        </div>
        <!--最小化和关闭按钮-->
        <div class="mini" @click="miniWindow">－</div>
        <div class="close" @click="closeWindow">×</div>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import storageUtils from "../../utils/storageUtils"
    import '../assets/less/mainpage.less'

    import ButtonComponent from './Button'
    import LabelComponent from './Label'
    import BigShowComponent from './BigShow'
    import SignalListComponent from './SignalList'
    import ImageComponent from './Image'
    import SliderComponent from './Slider'
    import {getStaticFile} from "../../utils/tools"

    export default {
        components: {
            ButtonComponent,
            LabelComponent,
            BigShowComponent,
            SignalListComponent,
            ImageComponent,
            SliderComponent,
        },

        data() {
            return {
                user: storageUtils.getUser(), // 本地存储的用户
                windowJson:[], // 主窗口配置文件
                staticUrl:this.$store.state.staticUrl
            }
        },

        async beforeCreate() {
            const result = await getStaticFile('EnityWindow.Data')
            this.windowJson = result.filter(item => item.IsVisibility === true)
        },

        updated() {
            // 添加背景图片
            this.$refs.mainpage.style.backgroundImage = this.windowJson[0].BackIcon ? 'url('+`${this.staticUrl}/Data/${this.windowJson[0].BackIcon}`+')' : null
        },

        methods: {
            // 最小化窗口
            miniWindow() {
                require('electron').ipcRenderer.send('window-min')
            },

            // 关闭窗口
            closeWindow() {
                require('electron').ipcRenderer.send('window-close')
            },
        },

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