<!--button按钮组件-->
<template>
    <div>
        <div v-for="item in buttonJson"
             :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,
                    fontSize:item.FontSize*bigScale + 'px',
                    backgroundSize:'100% 100%',
                    backgroundRepeat:'no-repeat',
                    backgroundColor:item.BackIcon ? null : `#${item.BrackgroupStr.slice(3)}`,
                    color:`#${item.ForegroundStr.slice(3)}`,
                    textAlign:'center',
                    lineHeight:item.Height*bigScale + 'px',
                    cursor:'default'
                }"
             :ref="item.ID"
             @click="clickBtn(item)"
             @mousedown="mouseDown(item)"
             @mouseup="mouseUp(item)"
        >
            {{item.Text}}
        </div>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import PubSub from 'pubsub-js'
    import {getStaticFile} from "../../utils/tools"
    import {OPEN_WINDOWS} from "../../utils/constant"
    import {reqRefreshView} from "../api"

    export default {
        data() {
            return {
                buttonJson: [], // 当前window中按钮
                staticUrl:this.$store.state.staticUrl, // 静态资源路径
                window:this.$attrs.window,
                isPressDownButtons:[], // 初始化时默认按下的按钮
            }
        },

        async beforeCreate() {
            const arr = await getStaticFile('EnityButton.Data')
            this.buttonJson = arr.filter(item => item.WindowID === this.window.ID)
            const isPressDownButtons = this.buttonJson.filter(item => item.IsPressDown)
            this.isPressDownButtons = isPressDownButtons
        },

        updated() {
            // 设置按钮背景图片
            const keyArr = Object.keys(this.$refs)
            keyArr.forEach((item,index) => {
                this.$refs[item][0].style.backgroundImage = this.buttonJson[index].BackIcon ? 'url('+`${this.staticUrl}/Data/${this.buttonJson[index].BackIcon}`+')' : null
            })
            // 默认按下的按钮背景显示为ActionIcon
            this.isPressDownButtons.forEach((item,index) => {
                this.$refs[item.ID][0].style.backgroundImage = this.isPressDownButtons[index].ActionIcon ? 'url('+`${this.staticUrl}/Data/${this.isPressDownButtons[index].ActionIcon}`+')' : null
                // 发布消息控制窗口显示
                let windowIds = item.MouseDownActionList.map(item => item.SourceID)
                PubSub.publish(OPEN_WINDOWS,windowIds)
            })
        },

        computed: {
            ...mapState(['bigScale','labelJson']),
        },

        methods: {
            // 点击按钮
            async clickBtn(e) {
                // 控制按钮数组
                const controlBtns = this.buttonJson.filter(item => item.ButtonType === 1 && item.GroupNumber === e.GroupNumber)
                if(controlBtns.some(item => item === e)){
                    // 1.当前按下的按钮处于激活状态
                    this.$refs[e.ID][0].style.backgroundImage = 'url('+`${this.staticUrl}/Data/${e.ActionIcon}`+')'

                    // 2.同一组的其他按钮处于未激活状态
                    const otherBtns = controlBtns.filter(item => item !== e)
                    otherBtns.forEach(item => {
                        this.$refs[item.ID][0].style.backgroundImage = 'url('+`${this.staticUrl}/Data/${item.BackIcon}`+')'
                    })

                    // 3.切换界面
                    let windowIds = e.MouseDownActionList.map(item => item.SourceID)
                    // 发布消息控制窗口显示
                    PubSub.publish(OPEN_WINDOWS,windowIds)
                }

                // 音频菜单控制
                if(e.ButtonType === 2){
                    if(!e.isOpen){
                        this.$refs[e.ID][0].style.backgroundImage = 'url('+`${this.staticUrl}/Data/${e.ActionIcon}`+')'
                        e.isOpen = true
                    }else {
                        this.$refs[e.ID][0].style.backgroundImage = 'url('+`${this.staticUrl}/Data/${e.BackIcon}`+')'
                        e.isOpen = false
                    }
                }
            },

            // 鼠标按下事件
            mouseDown(e) {
                if(e.ButtonType === 0){
                    this.$refs[e.ID][0].style.backgroundImage = 'url('+`${this.staticUrl}/Data/${e.ActionIcon}`+')'
                }
            },

            // 鼠标松开事件
            async mouseUp(e) {
                if(e.ButtonType === 0){
                    this.$refs[e.ID][0].style.backgroundImage = 'url('+`${this.staticUrl}/Data/${e.BackIcon}`+')'

                    // 分屏和清屏按钮控制
                    for(const item of e.MouseDownActionList){
                        // 获取大屏对象
                        const bigscreenObj = this.$store.state.bigScreenObj
                        // 获取当前大屏Id
                        let Id = item.SourceID
                        if(item.ActionType === 9 && item.Condition === 'SetSplit'){
                            bigscreenObj[Id].splitStatus = item.Parameter[0]-1
                            bigscreenObj[Id].bindList = []
                            for(let i =0;i<(item.Parameter[0])**2;i++){
                                bigscreenObj[Id].bindList.push(i+1)
                            }
                            this.$store.dispatch('updateBigscreenObj',bigscreenObj)
                        }else if(item.Parameter === '清屏'){
                            bigscreenObj[Id].signalArr = []
                            await reqRefreshView({
                                bigScreenId: Id,
                                streamWindows:[]
                            })
                        }
                    }
                }
            }
        }
    }
</script>
