<!--管理界面-->
<template>
    <div class="containers">
        <!--主页-->
        <div
            :style="{
                position: 'relative',
                left:windowJson[0].Left+'px',
                top:windowJson[0].Top+'px',
                width:windowJson[0].Width + 'px',
                height:windowJson[0].Height + 'px',
                zIndex:windowJson[0].ZIndex,
                display:windowJson[0].IsVisibility ? 'black' : 'none',
                backgroundImage:windowJson[0].BackIcon ? 'url('+require(`../../../static/images/${windowJson[0].BackIcon}`)+')' : null,
                backgroundRepeat:'no-repeat',
                backgroundSize:'100% 100%',
                backgroundColor:`#${windowJson[0].BrackgroupStr.slice(3)}`,
                margin:'0 auto',
            }"
        >
            <!--按钮-->
            <div v-for="item in buttonJson"
                    :style="{
                    position:'absolute',
                    left:item.Left+'px',
                    top:item.Top+'px',
                    width:item.Width + 'px',
                    height:item.Height + 'px',
                    zIndex:item.ZIndex,
                    display:item.IsVisibility ? 'black' : 'none',
                    fontSize:item.FontSize + 'px',
                    backgroundImage:'url('+require(`../../../static/images/${item.BackIcon}`)+')',
                    backgroundSize:'100% 100%',
                    backgroundRepeat:'no-repeat',
                    color:`#${item.ForegroundStr.slice(3)}`,
                    textAlign:'center',
                    lineHeight:item.Height + 'px',
                    cursor:'default'
                }"
                 :ref="item.ID"
                 @click="clickBtn(item)"
                 @mousedown="mouseDown(item)"
                 @mouseup="mouseUp(item)"
            >
                {{item.Text}}
            </div>

            <!--大屏显示-->
            <draggable
                    :class="['split_screen', splitScreenStatus === 0 ? 'split_screen_one' : splitScreenStatus === 1 ? 'split_screen_four' : splitScreenStatus === 2 ? 'split_screen_nine' : 'split_screen_sixteen']"
                    v-for="item in bigScreenJson"
                    element="div"
                    v-model="signalPreList"
                    :options="dragOptions2"
                    :move="onMove"
                    @start="isDragging=true"
                    @end="isDragging=false"
                     :style="{
                    left:item.Left+'px',
                    top:item.Top+'px',
                    width:item.Width + 'px',
                    height:item.Height + 'px',
                    zIndex:item.ZIndex,
                    display:item.IsVisibility ? 'black' : 'none',
                }"
            >
                <div v-for="(item,key) in signalPreList" :key="key" class="item">
                    {{item.ShowName}}
                </div>
            </draggable>

            <!--label标签-->
            <label v-for="item in labelJson"
                   :style="{
                 fontSize:item.FontSize + 'px',
                 position:'absolute',
                 left:item.Left+'px',
                 top:item.Top+'px',
                 width:item.Width + 'px',
                 height:item.Height + 'px',
                 zIndex:item.ZIndex,
                 display:item.IsVisibility ? 'black' : 'none',
                 color:`#${item.ForegroundStr.slice(3)}`,
                 textAlign:'center',
                 lineHeight:item.Height + 'px',
            }">
                {{item.Text}}
            </label>

            <!--图片-->
            <div v-for="item in imageJson"
                :style="{
                    position:'absolute',
                    left:item.Left+'px',
                    top:item.Top+'px',
                    width:item.Width + 'px',
                    height:item.Height + 'px',
                    zIndex:item.ZIndex,
                    display:item.IsVisibility ? 'black' : 'none',
                    backgroundImage:'url('+require(`../../../static/images/${item.BackIcon}`)+')',
                    backgroundRepeat:'no-repeat',
                    backgroundSize:'100% 100%',
                }"
            >
            </div>

            <!--信号源列表-->
            <draggable
                    :style="{
                    left:signalList[0].Left+'px',
                    top:signalList[0].Top+'px',
                    width:signalList[0].Width + 'px',
                    height:signalList[0].Height + 'px',
                    zIndex:signalList[0].ZIndex,
                    display:signalList[0].IsVisibility ? 'black' : 'none',
                    fontSize:signalList[0].FontSize + 'px',
                    color:`#${signalList[0].ForegroundStr.slice(3)}`,
                    position:'absolute',
                    overflow:'auto',
                    }"
                    class="signal_body"
                    element="div"
                    v-model="signalList[0].PreviewList"
                    :options="dragOptions1"
                    :move="onMove"
                    @start="isDragging=true"
                    @end="isDragging=false"

            >
                <!--列表项-->
                <div class="signal_item" v-for="item in signalList[0].PreviewList" :key="item.ID">
                    <div class="signal_item_bg">
                        <div class="signal_item_bg_body">
                            <div class="signal_item_bg_body_space"></div>
                            <div class="signal_item_bg_body_font">{{item.ShowName}}</div>
                        </div>
                    </div>
                </div>
            </draggable>

            <!--滑块-->
            <div v-for="item in sliderJson"
                :style="{
                    position:'absolute',
                    left:item.Left+'px',
                    top:item.Top+'px',
                    width:item.Width + 'px',
                    height:item.Height + 'px',
                    zIndex:item.ZIndex,
                    display:item.IsVisibility ? 'black' : 'none',
                    backgroundImage:'url('+require(`../../../static/images/${item.BackIcon}`)+')',
                    backgroundRepeat:'no-repeat',
                    backgroundSize:'100% 100%',
                }"
            >
            </div>

            <!--主要页面配置-->
            <!--<div v-for="item in windowJson"
                 :style="{
                    left:item.Left+'px',
                    top:item.Top+'px',
                    width:item.Width + 'px',
                    height:item.Height + 'px',
                    zIndex:item.ZIndex,
                    display:item.IsVisibility ? 'black' : 'none',
                    backgroundImage:item.BackIcon ? 'url('+require(`../../../static/images/${item.BackIcon}`)+')' : null,
                    backgroundRepeat:'no-repeat',
                    backgroundSize:'100% 100%',
                    margin:'0 auto',
                }"
            >
            </div>-->
        </div>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import draggable from 'vuedraggable'
    import labelJson from '../../../static/EnityLable'
    import bigScreenJson from '../../../static/EnityBigScreen'
    import buttonJson from '../../../static/EnityButton'
    import signalList from '../../../static/EnitySignalPreviewList'
    import sliderJson from '../../../static/EnitySlider'
    import imageJson from '../../../static/EnityImage'
    import windowJson from '../../../static/EnityWindow'
    import storageUtils from "../../utils/storageUtils"
    import '../assets/less/splitscreen.less'

    export default {
        components: {
            draggable
        },
        data() {
            return {
                user:storageUtils.getUser(), // 本地存储的用户
                signalPreList:[],  // 被拖到大屏中的信号源列表
                isDragging:false,
                splitScreenStatus:0,// 分屏状态（默认0: 自由屏，1: 4分屏  2：9分屏  3: 16分屏）
                labelJson, // label标签配置
                bigScreenJson,// 大屏显示配置
                buttonJson, // button按钮配置
                signalList, // 信号源列表配置
                sliderJson, // 滑块配置
                imageJson, // 图片配置
                windowJson, // 主要页面配置
                count:0,// 音量计数器
                count2:0, // 预案管理模块计数器
                count3:0, // 管理控制按钮计数器
                count4:0, // 3个视频按钮计数器
                count5:0, // 安卓分布式按钮
                systemStatus:false,// 系统开关状态，默认为关
                arr:[],// 分屏按钮数组
                funcBtnArr:[],// 功能按钮数组
                funcLabArr:[],// 功能label数组
                sliderArr:[],// 音量滑块数组
            }
        },
        mounted() {
            // 获取分屏按钮数组
            const arr = buttonJson.filter(item => item.Name.includes('V5') || item.Name.includes('LED智慧屏') || (item.Name.includes('V10') && 66<item.Name.slice(8) && item.Name.slice(8)<72) || (item.Name.includes('V9') && 68<item.Name.slice(7) && item.Name.slice(7)<72))
            this.arr = arr

            // 获取功能按钮涉及到的按钮和label
            // 1.电源管理
            const curSourceBtnArr = this.buttonJson.filter(item => item.WindowID === 'd80a8b6e-9f88-41ff-b3a7-1ff8d6ee37a5')
            const curSourceLabArr = this.labelJson.filter(item => item.WindowID === 'd80a8b6e-9f88-41ff-b3a7-1ff8d6ee37a5')
            // 2.音频管理
            const audioBtnArr = this.buttonJson.filter(item => item.WindowID === 'cb2687fd-931a-4b38-a76d-9c3ea171b8d8')
            const audioLabArr = this.labelJson.filter(item => item.WindowID === 'cb2687fd-931a-4b38-a76d-9c3ea171b8d8')
            // 3.视频管理
            const vedioBtnArr = this.buttonJson.filter(item => item.WindowID === '027ab76d-6b9c-46ac-abe6-75b8059f786b')
            const vedioLabArr = this.labelJson.filter(item => item.WindowID === '027ab76d-6b9c-46ac-abe6-75b8059f786b')
            // 4.环境控制
            const envirControlBtnArr = this.buttonJson.filter(item => item.WindowID === 'a12b287f-f68c-4efa-b652-d6e5b0a09d0d')
            const envirControlLabArr = this.labelJson.filter(item => item.WindowID === 'a12b287f-f68c-4efa-b652-d6e5b0a09d0d')
            // 5.电脑控制
            const compControlBtnArr = this.buttonJson.filter(item => item.WindowID === 'd9868551-b579-4258-9bc7-7c1f733773f5')
            const compControlLabArr = this.labelJson.filter(item => item.WindowID === 'd9868551-b579-4258-9bc7-7c1f733773f5')

            const funcBtnArr = [...curSourceBtnArr,...audioBtnArr,...vedioBtnArr,...envirControlBtnArr,...compControlBtnArr]
            const funcLabArr = [...curSourceLabArr,...audioLabArr,...vedioLabArr,...envirControlLabArr,...compControlLabArr]
            const sliderArr = [...this.sliderJson]
            this.funcBtnArr = funcBtnArr
            this.funcLabArr = funcLabArr
            this.sliderArr = sliderArr
        },
        methods: {
            // 移动信号源
            onMove({relatedContext, draggedContext}) {
                const relatedElement = relatedContext.element
                const draggedElement = draggedContext.element
                return (
                    (!relatedElement || !relatedElement.fixed) && !draggedElement.fixed
                )
            },

            // 分屏操作
            spliceScreen(value) {
                this.splitScreenStatus = value
            },

            // 点击按钮
            clickBtn(e) {
                console.log(e)

                // 切换屏幕
                if(e.Text === 'LCD屏' || e.Text === 'LED屏' || e.Text === '投影机'){
                    // 首先清屏
                    this.signalPreList = []
                    this.arr.forEach((item,index) => {
                        if(e.MouseDownActionList[0].SourceID === item.WindowID){
                            item.IsVisibility = true
                        }else {
                            item.IsVisibility = false
                        }
                    })
                    this.buttonJson = [...this.buttonJson,...this.arr]
                }

                // 声音开关按钮处理
                if(e.ID === '355d3c32-1502-40b4-9ddd-663d5b8469e7'){
                    if(this.count % 2 === 0){
                        this.$refs[e.ID][0].style.backgroundImage = 'url('+require(`../../../static/images/${e.ActionIcon}`)+')'
                        ++ this.count
                    }else {
                        this.$refs[e.ID][0].style.backgroundImage = 'url('+require(`../../../static/images/${e.BackIcon}`)+')'
                        ++ this.count
                    }
                    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/images/${e.ActionIcon}`)+')'
                        ++this.count2
                    }else {
                        this.$refs[e.ID][0].style.backgroundImage = 'url('+require(`../../../static/images/${e.ActionIcon}`)+')'
                        this.lastBtn.style.backgroundImage = 'url('+require(`../../../static/images/${this.lastData.BackIcon}`)+')'
                    }
                    // 保存点过的这个按钮和按钮数据
                    this.lastBtn = this.$refs[e.ID][0]
                    this.lastData = e
                    return
                }

                // 3个屏控制按钮处理
                if(e.Text.includes('投影机') || e.Text.includes('LCD屏') || e.Text.includes('LED屏')){
                    if(this.count4===0){
                        this.$refs[e.ID][0].style.backgroundImage = 'url('+require(`../../../static/images/${e.ActionIcon}`)+')'
                        ++this.count4
                    }else {
                        this.$refs[e.ID][0].style.backgroundImage = 'url('+require(`../../../static/images/${e.ActionIcon}`)+')'
                        this.lastBtn4.style.backgroundImage = 'url('+require(`../../../static/images/${this.lastData4.BackIcon}`)+')'
                    }
                    // 保存点过的这个按钮和按钮数据
                    this.lastBtn4 = this.$refs[e.ID][0]
                    this.lastData4 = 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 = 'url('+require(`../../../static/images/${e.ActionIcon}`)+')'
                        ++this.count3
                    }else {
                        this.$refs[e.ID][0].style.backgroundImage = 'url('+require(`../../../static/images/${e.ActionIcon}`)+')'
                        this.lastBtn3.style.backgroundImage = 'url('+require(`../../../static/images/${this.lastData3.BackIcon}`)+')'
                    }
                    // 保存点过的这个按钮和按钮数据
                    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.sliderArr.forEach((item,index) => {
                        if(e.MouseDownActionList[0].SourceID === item.WindowID){
                            item.IsVisibility = true
                        }else {
                            item.IsVisibility = false
                        }
                    })
                    this.buttonJson = [...this.buttonJson,...this.funcBtnArr]
                    this.labelJson = [...this.labelJson,...this.funcLabArr]
                    this.sliderJson = [...this.sliderJson,...this.sliderArr]
                    return
                }

                // LED屏分屏和清屏操作
                if(e.ID === '7775e508-c6a5-4044-8264-24772a24fa97'){
                    this.signalPreList = []
                    return
                }else if(e.ID === '49653a62-99cb-40e1-a513-60e42893adb7'){
                    // 自由屏
                    this.spliceScreen(0)
                    return
                }else if(e.ID === '52de9a2e-d171-423d-860f-3fe2750ec757'){
                    // 四分屏
                    this.spliceScreen(1)
                    return
                }else if(e.ID === 'ac0cc31c-a9b8-4bdf-88cf-928964b93ac5'){
                    // 九分屏
                    this.spliceScreen(2)
                    return
                }

                // LCD屏分屏和清屏操作
                if(e.ID === '95c5d676-46a5-4c46-b550-9bc013a59937'){
                    this.signalPreList = []
                    return
                }else if(e.ID === 'd55c81a8-54d7-4d90-aad7-4f34c3ba3950'){
                    // 自由屏
                    this.spliceScreen(0)
                    return
                }else if(e.ID === '0cabb1ba-bcae-45d9-b019-2b45486f98e3'){
                    // 四分屏
                    this.spliceScreen(1)
                    return
                }else if(e.ID === '201e4bb0-c039-46c7-a55a-049d00de4769'){
                    // 九分屏
                    this.spliceScreen(2)
                    return
                }else if(e.ID === '2d4c49bc-905b-4f96-a65c-9b0a3e057b3f'){
                    // 16分屏
                    this.spliceScreen(3)
                    return
                }

                // 投影机分屏和清屏操作
                if(e.ID === 'f47e84bb-c878-4b22-a9d6-eb2e307283bc'){
                    this.signalPreList = []
                    return
                }else if(e.ID === '4142ab5b-ce52-4655-a28d-724bfabb24f0'){
                    // 自由屏
                    this.spliceScreen(0)
                    return
                }else if(e.ID === '9bb5b3e3-9e21-4716-8059-f5b35b24e3fa'){
                    // 四分屏
                    this.spliceScreen(1)
                    return
                }

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

                // 系统开关按钮
                if(e.ID === 'aea34c76-4216-469b-9610-9889a2d42d06'){
                    this.systemStatus = !this.systemStatus
                    if(this.systemStatus){ // 开启,同时开启LCD屏和坐席电源
                        this.$refs[e.ID][0].style.backgroundImage = 'url('+require(`../../../static/images/${e.ActionIcon}`)+')'
                        this.$refs['f5361d60-6868-4c59-806b-22b85e7c9e3e'][0].style.backgroundImage = 'url('+require(`../../../static/images/73.png`)+')'
                        this.$refs['4d3266e8-64b5-4765-a36d-7e271eb3c8e8'][0].style.backgroundImage = 'url('+require(`../../../static/images/73.png`)+')'
                    }else { // 关闭
                        this.$refs[e.ID][0].style.backgroundImage = 'url('+require(`../../../static/images/${e.BackIcon}`)+')'
                        this.$refs['f5361d60-6868-4c59-806b-22b85e7c9e3e'][0].style.backgroundImage = 'url('+require(`../../../static/images/75.png`)+')'
                        this.$refs['4d3266e8-64b5-4765-a36d-7e271eb3c8e8'][0].style.backgroundImage = 'url('+require(`../../../static/images/75.png`)+')'
                    }
                    return false
                }

                // 其他按钮
                this.$refs[e.ID][0].style.backgroundImage = 'url('+require(`../../../static/images/${e.ActionIcon}`)+')'
            },

            // 鼠标按下事件
            mouseDown(e) {
                if(e.Name.includes('V5') && 39<e.Name.slice(7)*1 && e.Name.slice(7)*1<44){
                    this.$refs[e.ID][0].style.backgroundImage = 'url('+require(`../../../static/images/${e.ActionIcon}`)+')'
                }

                // 视频管理按钮
                const vedioBtns = this.buttonJson.filter(item => item.WindowID === '027ab76d-6b9c-46ac-abe6-75b8059f786b')
                if(vedioBtns.some(item => item === e)){
                    this.$refs[e.ID][0].style.backgroundImage = 'url('+require(`../../../static/images/${e.ActionIcon}`)+')'
                }
            },

            // 鼠标松开事件
            mouseUp(e) {
                if(e.Name.includes('V5') && 39<e.Name.slice(7)*1 && e.Name.slice(7)*1<44){
                    this.$refs[e.ID][0].style.backgroundImage = 'url('+require(`../../../static/images/${e.BackIcon}`)+')'
                }

                // 视频管理按钮
                const vedioBtns = this.buttonJson.filter(item => item.WindowID === '027ab76d-6b9c-46ac-abe6-75b8059f786b')
                if(vedioBtns.some(item => item === e)){
                    this.$refs[e.ID][0].style.backgroundImage = 'url('+require(`../../../static/images/${e.BackIcon}`)+')'
                }
            },
        },
        computed: {
            ...mapState(['deviceList']),
            dragOptions1() {
                return {
                    animation: 0,
                    group: {
                        name: "description",
                        pull: 'clone',
                        put: false
                    },
                    ghostClass: "ghost",
                }
            },
            dragOptions2() {
                return {
                    animation: 0,
                    group: "description",
                }
            },
        }
    }
</script>

<style lang="less">
    // 容器样式
    .containers {
        width: 100%;
        height: 981px;
        background-color: #333;

        // 列表项样式
        .signal_item {
            width: 100%;
            height: 132px;
            display: flex;
            justify-content: center;
            align-items: center;

            /*背景*/
            .signal_item_bg {
                width: 90%;
                height: 130px;
                display: flex;
                justify-content: center;
                align-items: center;
                &:hover {
                    background-color: rgba(113, 113, 113, 0.3);
                }

                /*主体*/
                .signal_item_bg_body {
                    width:96%;
                    height:96%;
                    background-color: rgba(127, 127, 127, 0.5);
                    border-radius: 2px;

                    /*空间*/
                    .signal_item_bg_body_space {
                        width:94%;
                        height:80%;
                        background-color: green;
                        margin:6px auto 2px;
                    }
                    /*文字*/
                    .signal_item_bg_body_font {
                        width:100%;
                        height:15%;
                        text-align: center;
                        margin:0 auto;
                        font-size:16px;
                        color:#fff;
                        font-family: "Gill Sans", sans-serif;
                    }
                }
            }
        }

        // 滚动条样式
        /*定义滚动条高宽及背景高宽:分别对应横竖滚动条的尺寸*/
        ::-webkit-scrollbar
        {
            width:4px;
            background-color:rgba(10,66,125,0.65);
        }
        /*定义滚动条轨道:内阴影+圆角*/
        ::-webkit-scrollbar-track
        {
            -webkit-box-shadow:inset 0 0 6px rgba(10,66,125,0.3);
            border-radius:10px;
            background-color:rgba(10,66,125,0.65);
        }
        /*定义滑块:内阴影+圆角*/
        ::-webkit-scrollbar-thumb
        {
            border-radius:10px;
            -webkit-box-shadow:inset 0 0 6px rgba(10,66,125,.3);
            background-color:#666;
        }
    }
</style>
