<!--button按钮组件-->

<template>
    <div>
        <div v-for="item in buttonJson"
             :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',
                    fontSize:item.FontSize*bigScale + 'px',
                    backgroundSize:'100% 100%',
                    backgroundRepeat:'no-repeat',
                    backgroundImage:item.BackIcon ? 'url('+require(`../../../static/Data/${item.BackIcon}`)+')' : null,
                    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 {getStaticFile} from "../../utils/tools"

    export default {
        data() {
            return {
                count: 0,   // 音量计数器
                count2: 0, // 预案管理模块计数器
                count3: 0, // 管理控制按钮计数器
                count4: 0, // 3个视频按钮计数器
                count5: 0, // 安卓分布式按钮
                buttonJson: [],
                labelJson: [],
                slideJson: [],
                staticUrl:this.$store.state.staticUrl
            }
        },

        async mounted() {

            this.buttonJson = await getStaticFile('EnityButton.Data')
            // 获取分屏按钮数组
            this.arr = this.buttonJson.filter(item => (item.WindowID === '9a0dff23-8633-4e7f-89bf-cc4f68ec88e1' || item.WindowID === '08208721-41cc-4f1e-937b-3a1627389049' || item.WindowID === 'ab842585-0c91-4e65-bfed-a219bcaaeb43'))
            // 获取功能按钮
            this.funcBtnArr = this.buttonJson.filter(item => (item.WindowID === 'd80a8b6e-9f88-41ff-b3a7-1ff8d6ee37a5' || item.WindowID === 'cb2687fd-931a-4b38-a76d-9c3ea171b8d8' || item.WindowID === '027ab76d-6b9c-46ac-abe6-75b8059f786b' || item.WindowID === 'a12b287f-f68c-4efa-b652-d6e5b0a09d0d' || item.WindowID === 'd9868551-b579-4258-9bc7-7c1f733773f5'))
            // 获取电源管理和电脑控制按钮
            this.powerAndCompBtns = this.buttonJson.filter(item => (item.WindowID === 'd80a8b6e-9f88-41ff-b3a7-1ff8d6ee37a5' || item.WindowID === 'd9868551-b579-4258-9bc7-7c1f733773f5') && item.ID !== '19554440-98bc-4644-83a0-d9cefd69153e')


            this.labelJson = await getStaticFile('EnityLable.Data')
            this.funcLabArr = this.labelJson.filter(item => (item.WindowID === 'd80a8b6e-9f88-41ff-b3a7-1ff8d6ee37a5' || item.WindowID === 'cb2687fd-931a-4b38-a76d-9c3ea171b8d8' || item.WindowID === '027ab76d-6b9c-46ac-abe6-75b8059f786b' || item.WindowID === 'a12b287f-f68c-4efa-b652-d6e5b0a09d0d' || item.WindowID === 'd9868551-b579-4258-9bc7-7c1f733773f5'))


            this.slideJson = await getStaticFile('EnitySlider.Data')
            this.funSliderArr = await getStaticFile('EnitySlider.Data')

            // 设置按钮背景图片
            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
            })
        },

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

        methods: {
            // 点击按钮
            clickBtn(e) {
                // 预案管理声音开关
                if (e.ID === '355d3c32-1502-40b4-9ddd-663d5b8469e7') {
                    if (this.count % 2 === 0) {
                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.ActionIcon}`) + ')'
                        ++this.count
                    } else {
                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.BackIcon}`) + ')'
                        ++this.count
                    }
                    return
                }

                // 切换屏幕
                if (e.Text === 'LCD屏' || e.Text === 'LED屏' || e.Text === '投影机') {
                    if (this.count4 === 0) {
                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.ActionIcon}`) + ')'
                        ++this.count4
                    } else if (e !== this.lastData4) {
                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.ActionIcon}`) + ')'
                        this.lastBtn4.style.backgroundImage = 'url(' + require(`../../../static/Data/${this.lastData4.BackIcon}`) + ')'
                    }
                    // 保存点过的这个按钮和按钮数据
                    this.lastBtn4 = this.$refs[e.ID][0]
                    this.lastData4 = e

                    // 首先清屏
                    this.$store.dispatch('clearScreen')
                    this.arr.forEach(item => {
                        if (e.MouseDownActionList[0].SourceID === item.WindowID) {
                            item.IsVisibility = true
                        } else {
                            item.IsVisibility = false
                        }
                    })
                    return
                }

                // 预案管理按钮处理
                if (e.Name.includes('V0') && e.Name.slice(7) * 1 > 62 && e.Name.slice(7) * 1 < 72) {
                    if (this.count2 === 0) {
                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.ActionIcon}`) + ')'
                        ++this.count2
                    } else if (e !== this.lastData) {
                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.ActionIcon}`) + ')'
                        this.lastBtn.style.backgroundImage = 'url(' + require(`../../../static/Data/${this.lastData.BackIcon}`) + ')'
                    }
                    // 保存点过的按钮和按钮数据
                    this.lastBtn = this.$refs[e.ID][0]
                    this.lastData = e
                    return
                }

                // 5个管理控制按钮处理
                if (e.Name.includes('V0--Btn6') || e.Name.includes('V0--Btn61') || e.Name.includes('V0--Btn12') || e.Name.includes('V0--Btn58') || e.Name.includes('V0--Btn77')) {
                    // （1）背景切换
                    if (this.count3 === 0) {
                        this.$refs[e.ID][0].style.backgroundImage = e.ActionIcon ? 'url('+`${this.staticUrl}/Data/${e.ActionIcon}`+')' : null
                        ++this.count3
                    } else if (e !== this.lastData3) {
                        this.$refs[e.ID][0].style.backgroundImage = e.ActionIcon ? 'url('+`${this.staticUrl}/Data/${e.ActionIcon}`+')' : null

                        this.lastBtn3.style.backgroundImage = this.lastData3.BackIcon ? 'url(' + `${this.staticUrl}/Data/${this.lastData3.BackIcon}` + ')' : null
                    }
                    // 保存点过的这个按钮和按钮数据
                    this.lastBtn3 = this.$refs[e.ID][0]
                    this.lastData3 = e

                    // （2）界面切换
                    // 按钮
                    this.funcBtnArr.forEach((item, index) => {
                        if (e.MouseDownActionList[0].SourceID === item.WindowID) {
                            item.IsVisibility = true
                        } else {
                            item.IsVisibility = false
                        }
                    })

                    // 标签
                    this.funcLabArr.forEach((item, index) => {
                        if (e.MouseDownActionList[0].SourceID === item.WindowID) {
                            item.IsVisibility = true
                        } else {
                            item.IsVisibility = false
                        }
                    })

                    // 滑块
                    this.funSliderArr.forEach((item, index) => {
                        if (e.MouseDownActionList[0].SourceID === item.WindowID) {
                            item.IsVisibility = true
                        } else {
                            item.IsVisibility = false
                        }
                    })
                    return
                }

                // 分屏和清屏操作
                if (e.ID === '7775e508-c6a5-4044-8264-24772a24fa97' || e.ID === '95c5d676-46a5-4c46-b550-9bc013a59937' || e.ID === 'f47e84bb-c878-4b22-a9d6-eb2e307283bc') {
                    // 清屏
                    this.$store.dispatch('clearScreen')
                    return
                } else if (e.ID === '49653a62-99cb-40e1-a513-60e42893adb7' || e.ID === 'd55c81a8-54d7-4d90-aad7-4f34c3ba3950' || e.ID === '4142ab5b-ce52-4655-a28d-724bfabb24f0') {
                    // 自由屏
                    this.$store.dispatch('splitScreen', 0)
                    return
                } else if (e.ID === '52de9a2e-d171-423d-860f-3fe2750ec757' || e.ID === '0cabb1ba-bcae-45d9-b019-2b45486f98e3' || e.ID === '9bb5b3e3-9e21-4716-8059-f5b35b24e3fa') {
                    // 四分屏
                    this.$store.dispatch('splitScreen', 1)
                    return
                } else if (e.ID === 'ac0cc31c-a9b8-4bdf-88cf-928964b93ac5' || e.ID === '201e4bb0-c039-46c7-a55a-049d00de4769') {
                    // 九分屏
                    this.$store.dispatch('splitScreen', 2)
                    return
                } else if (e.ID === '2d4c49bc-905b-4f96-a65c-9b0a3e057b3f') {
                    // 16分屏
                    this.$store.dispatch('splitScreen', 3)
                    return
                }

                // 安卓和分布式按钮
                if (e.Text === '安卓' || e.Text === '分布式') {
                    if (this.count5 === 0) {
                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.ActionIcon}`) + ')'
                        ++this.count5
                    } else if (e !== this.lastData5) {
                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.ActionIcon}`) + ')'
                        this.lastBtn5.style.backgroundImage = 'url(' + require(`../../../static/Data/${this.lastData5.BackIcon}`) + ')'
                    }
                    // 保存点过的这个按钮和按钮数据
                    this.lastBtn5 = this.$refs[e.ID][0]
                    this.lastData5 = e
                    return
                }

                // 电源管理和电脑管理
                if (this.powerAndCompBtns.some(item => item.ID === e.ID)) {
                    if (e.ActionType === 2) {
                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.ActionIcon}`) + ')'
                        e.ActionType = -2
                    } else {
                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.BackIcon}`) + ')'
                        e.ActionType = 2
                    }
                }
                return
            },

            // 鼠标按下事件
            mouseDown(e) {
                if (this.arr.some(item => e === item) && e.Text !== '安卓' && e.Text !== '分布式') { // 分屏控制按钮
                    this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.ActionIcon}`) + ')'
                } else if (e.WindowID === '027ab76d-6b9c-46ac-abe6-75b8059f786b') { // 视频控制按钮
                    this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.ActionIcon}`) + ')'
                } else if (e.WindowID === 'a12b287f-f68c-4efa-b652-d6e5b0a09d0d') { // 环境控制按钮
                    this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.ActionIcon}`) + ')'
                } else if (e.ID === '19554440-98bc-4644-83a0-d9cefd69153e') { // 电脑控制All按钮
                    this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.ActionIcon}`) + ')'
                }
                return
            },

            // 鼠标松开事件
            mouseUp(e) {
                if (this.arr.some(item => e === item) && e.Text !== '安卓' && e.Text !== '分布式') { // 分屏控制按钮
                    this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.BackIcon}`) + ')'
                } else if (e.WindowID === '027ab76d-6b9c-46ac-abe6-75b8059f786b') { // 视频控制按钮
                    this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.BackIcon}`) + ')'
                } else if (e.WindowID === 'a12b287f-f68c-4efa-b652-d6e5b0a09d0d') { // 环境控制按钮
                    this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.BackIcon}`) + ')'
                }
                if (e.ID === '19554440-98bc-4644-83a0-d9cefd69153e') { // 电脑控制All按钮
                    this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.BackIcon}`) + ')'
                }
                return
            },
        }
    }
</script>

<style scoped>

</style>
