<template>
    <!-- 电泳工作区 -->
    <div class="page-pack">
        <div class="container">
            <!-- 在线车体数量 -->
            <div class="online-number">
                <span>数量：{{onlineNumber !== null ? onlineNumber : '0' }}</span>
            </div>
            <!-- 显示区域 -->
            <div class="view-pack">
                <!-- 第一列 -->
                <div class="HDG5-2"
                    v-if="realData.hasOwnProperty('HDG5-2') && realData['HDG5-2'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG5-2'].busType)">
                </div>
                <div class="HDG5-3"
                    v-if="realData.hasOwnProperty('HDG5-3') && realData['HDG5-3'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG5-3'].busType)">
                </div>
                <div class="HDG5-4"
                    v-if="realData.hasOwnProperty('HDG5-4') && realData['HDG5-4'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG5-4'].busType)">
                </div>
                <div class="HDG5-5"
                    v-if="realData.hasOwnProperty('HDG5-5') && realData['HDG5-5'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG5-5'].busType)">
                </div>
                <div class="HDG5-6"
                    v-if="realData.hasOwnProperty('HDG5-6') && realData['HDG5-6'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG5-6'].busType)">
                </div>
                <div class="HDG5-7"
                    v-if="realData.hasOwnProperty('HDG5-7') && realData['HDG5-7'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG5-7'].busType)">
                </div>
                <!-- 第二列 -->
                <div class="STC1-1"
                    v-if="realData.hasOwnProperty('STC1-1') && realData['STC1-1'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['STC1-1'].busType)">
                </div>
                <div class="STC1-2"
                    v-if="realData.hasOwnProperty('STC1-2') && realData['STC1-2'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['STC1-2'].busType)">
                </div>
                <div class="STC1-3"
                    v-if="realData.hasOwnProperty('STC1-3') && realData['STC1-3'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['STC1-3'].busType)">
                </div>
                <div class="STC1-4"
                    v-if="realData.hasOwnProperty('STC1-4') && realData['STC1-4'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['STC1-4'].busType)">
                </div>
                <div class="STC1-5"
                    v-if="realData.hasOwnProperty('STC1-5') && realData['STC1-5'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['STC1-5'].busType)">
                </div>
                <div class="STC1-6"
                    v-if="realData.hasOwnProperty('STC1-6') && realData['STC1-6'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['STC1-6'].busType)">
                </div>
                <div class="STC1-7"
                    v-if="realData.hasOwnProperty('STC1-7') && realData['STC1-7'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['STC1-7'].busType)">
                </div>
                <div class="HDG2-2"
                    v-if="realData.hasOwnProperty('HDG2-2') && realData['HDG2-2'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG2-2'].busType)">
                </div>
                <div class="HDG1-45"
                    v-if="realData.hasOwnProperty('HDG1-45') && realData['HDG1-45'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-45'].busType)">
                </div>
                <div class="HDG1-37"
                    v-if="realData.hasOwnProperty('HDG1-37') && realData['HDG1-37'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-37'].busType)">
                </div>
                <div class="HDG1-41"
                    v-if="realData.hasOwnProperty('HDG1-41') && realData['HDG1-41'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-41'].busType)">
                </div>
                <div class="HDG1-59"
                    v-if="realData.hasOwnProperty('HDG1-59') && realData['HDG1-59'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-59'].busType)">
                </div>
                <div class="HDG1-63"
                    v-if="realData.hasOwnProperty('HDG1-63') && realData['HDG1-63'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-63'].busType)">
                </div>
                <!-- 第三列 -->
                <div class="HDG1-36"
                    v-if="realData.hasOwnProperty('HDG1-36') && realData['HDG1-36'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-36'].busType)">
                </div>
                <div class="HDG1-46"
                    v-if="realData.hasOwnProperty('HDG1-46') && realData['HDG1-46'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-46'].busType)">
                </div>
                <div class="HDG1-38"
                    v-if="realData.hasOwnProperty('HDG1-38') && realData['HDG1-38'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-38'].busType)">
                </div>
                <div class="HDG1-42"
                    v-if="realData.hasOwnProperty('HDG1-42') && realData['HDG1-42'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-42'].busType)">
                </div>
                <div class="HDG1-60"
                    v-if="realData.hasOwnProperty('HDG1-60') && realData['HDG1-60'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-60'].busType)">
                </div>
                <div class="HDG1-64"
                    v-if="realData.hasOwnProperty('HDG1-64') && realData['HDG1-64'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-64'].busType)">
                </div>
                <!-- 第四列 -->
                <div class="STC1-8"
                    v-if="realData.hasOwnProperty('STC1-8') && realData['STC1-8'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['STC1-8'].busType)">
                </div>
                <div class="STC1-9"
                    v-if="realData.hasOwnProperty('STC1-9') && realData['STC1-9'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['STC1-9'].busType)">
                </div>
                <div class="STC1-10"
                    v-if="realData.hasOwnProperty('STC1-10') && realData['STC1-10'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['STC1-10'].busType)">
                </div>
                <div class="STC1-11"
                    v-if="realData.hasOwnProperty('STC1-11') && realData['STC1-11'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['STC1-11'].busType)">
                </div>
                <div class="STC1-12"
                    v-if="realData.hasOwnProperty('STC1-12') && realData['STC1-12'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['STC1-12'].busType)">
                </div>
                <div class="STC1-13"
                    v-if="realData.hasOwnProperty('STC1-13') && realData['STC1-13'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['STC1-13'].busType)">
                </div>
                <div class="STC1-14"
                    v-if="realData.hasOwnProperty('STC1-14') && realData['STC1-14'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['STC1-14'].busType)">
                </div>
                <div class="HDG2-1"
                    v-if="realData.hasOwnProperty('HDG2-1') && realData['HDG2-1'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG2-1'].busType)">
                </div>
                <div class="HDG1-47"
                    v-if="realData.hasOwnProperty('HDG1-47') && realData['HDG1-47'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-47'].busType)">
                </div>
                <div class="HDG1-39"
                    v-if="realData.hasOwnProperty('HDG1-39') && realData['HDG1-39'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-39'].busType)">
                </div>
                <div class="HDG1-43"
                    v-if="realData.hasOwnProperty('HDG1-43') && realData['HDG1-43'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-43'].busType)">
                </div>
                <div class="HDG1-61"
                    v-if="realData.hasOwnProperty('HDG1-61') && realData['HDG1-61'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-61'].busType)">
                </div>
                <div class="HDG1-65"
                    v-if="realData.hasOwnProperty('HDG1-65') && realData['HDG1-65'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-65'].busType)">
                </div>
                <!-- 第五列 -->
                <div class="HDG1-31"
                    v-if="realData.hasOwnProperty('HDG1-31') && realData['HDG1-31'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-31'].busType)">
                </div>
                <div class="HDG1-32"
                    v-if="realData.hasOwnProperty('HDG1-32') && realData['HDG1-32'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-32'].busType)">
                </div>
                <div class="HDG1-33"
                    v-if="realData.hasOwnProperty('HDG1-33') && realData['HDG1-33'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-33'].busType)">
                </div>
                <div class="HDG1-34"
                    v-if="realData.hasOwnProperty('HDG1-34') && realData['HDG1-34'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-34'].busType)">
                </div>
                <div class="HDG1-49"
                    v-if="realData.hasOwnProperty('HDG1-49') && realData['HDG1-49'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-49'].busType)">
                </div>
                <div class="HDG1-50"
                    v-if="realData.hasOwnProperty('HDG1-50') && realData['HDG1-50'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-50'].busType)">
                </div>
                <div class="HDG1-51"
                    v-if="realData.hasOwnProperty('HDG1-51') && realData['HDG1-51'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-51'].busType)">
                </div>
                <div class="HDG1-52"
                    v-if="realData.hasOwnProperty('HDG1-52') && realData['HDG1-52'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-52'].busType)">
                </div>
                <div class="HDG1-35"
                    v-if="realData.hasOwnProperty('HDG1-35') && realData['HDG1-35'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-35'].busType)">
                </div>
                <div class="HDG1-48"
                    v-if="realData.hasOwnProperty('HDG1-48') && realData['HDG1-48'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-48'].busType)">
                </div>
                <div class="HDG1-40"
                    v-if="realData.hasOwnProperty('HDG1-40') && realData['HDG1-40'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-40'].busType)">
                </div>
                <div class="HDG1-44"
                    v-if="realData.hasOwnProperty('HDG1-44') && realData['HDG1-44'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-44'].busType)">
                </div>
                <div class="HDG1-62"
                    v-if="realData.hasOwnProperty('HDG1-62') && realData['HDG1-62'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-62'].busType)">
                </div>
                <div class="HDG1-66"
                    v-if="realData.hasOwnProperty('HDG1-66') && realData['HDG1-66'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-66'].busType)">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                // 定时器
                timer: null,
                // 电泳区实时信息
                realData: {},
                // 当前在线车体数量
                onlineNumber: null
            }
        },
        methods: {
            // 查询电泳实时信息
            getElectrophoresisInformation () {
                this.$fetch('area-controller/realTime-get', { areaNo: '2' }).then(res => {
                    for (let item of res) {
                        if (item.code === '2') {
                            this.realData = _.cloneDeep(item.stationMap);
                            this.onlineNumber = _.cloneDeep(item.onlineNum);
                            break;
                        }
                    }
                })
            },
            // 解析车体类型样式
            resolveCarTypeStyle (type) {
                if (type === 'OTHER') {
                    return 'car-out';
                } else {
                    return '';
                }
            }
        },
        mounted () {
            setTimeout(() => {
                // 查询电泳实时信息
                this.getElectrophoresisInformation();
                this.timer = setInterval(() => {
                    // 查询电泳实时信息
                    this.getElectrophoresisInformation();
                }, 20000);
            }, 0)
        },
        beforeDestroy () {
            clearInterval(this.timer);
        }
    }
</script>

<style lang="scss" scoped>
    .page-pack {
        height: 100%;
        width: 100%;
        .container {
            width: 1556px;
            height: 1037px;
            background: url("../../../assets/images/LedCarouselAvi/electrophoresis_bg.png") no-repeat;
            overflow: hidden;
            position: relative;
            // 在线车体数量
            .online-number {
                width: 270px;
                height: 50px;
                position: absolute;
                right: 126px;
                top: 43px;
                text-align: center;
                line-height: 50px;
                font-size: 35px;
                color: rgb(255,255,255);
            }
            // 显示区域
            .view-pack {
                width: 1070px;
                height: 893px;
                margin-top: 108px;
                margin-left: 242px;
                position: relative;
                div {
                    width: 70px;
                    height: 40px;
                    position: absolute;
                    background: url("../../../assets/images/LedCarouselAvi/car.png");
                    background-position: center 0;
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                }
                // 第一列
                .HDG5-2 {
                    top: 567px;
                    left: 65px;
                }
                .HDG5-3 {
                    top: 620px;
                    left: 65px;
                }
                .HDG5-4 {
                    top: 672px;
                    left: 65px;
                }
                .HDG5-5 {
                    top: 725px;
                    left: 65px;
                }
                .HDG5-6 {
                    top: 787px;
                    left: 65px;
                }
                .HDG5-7 {
                    top: 840px;
                    left: 65px;
                }
                // 第二列
                .STC1-1 {
                    top: 52px;
                    left: 352px;
                }
                .STC1-2 {
                    top: 107px;
                    left: 352px;
                }
                .STC1-3 {
                    top: 162px;
                    left: 352px;
                }
                .STC1-4 {
                    top: 262px;
                    left: 352px;
                }
                .STC1-5 {
                    top: 318px;
                    left: 352px;
                }
                .STC1-6 {
                    top: 373px;
                    left: 352px;
                }
                .STC1-7 {
                    top: 428px;
                    left: 352px;
                }
                .HDG2-2 {
                    top: 500px;
                    left: 333px;
                }
                .HDG1-45 {
                    top: 567px;
                    left: 403px;
                }
                .HDG1-37 {
                    top: 659px;
                    left: 315px;
                }
                .HDG1-41 {
                    top: 726px;
                    left: 315px;
                }
                .HDG1-59 {
                    top: 786px;
                    left: 315px;
                }
                .HDG1-63 {
                    top: 838px;
                    left: 363px;
                }
                // 第三列
                .HDG1-36 {
                    top: 500px;
                    left: 552px;
                }
                .HDG1-46 {
                    top: 565px;
                    left: 552px;
                }
                .HDG1-38 {
                    top: 658px;
                    left: 502px;
                }
                .HDG1-42 {
                    top: 724px;
                    left: 502px;
                }
                .HDG1-60 {
                    top: 784px;
                    left: 541px;
                }
                .HDG1-64 {
                    top: 839px;
                    left: 541px;
                }
                // 第四列
                .STC1-8 {
                    top: 52px;
                    left: 633px;
                }
                .STC1-9 {
                    top: 141px;
                    left: 633px;
                }
                .STC1-10 {
                    top: 198px;
                    left: 633px;
                }
                .STC1-11 {
                    top: 255px;
                    left: 633px;
                }
                .STC1-12 {
                    top: 313px;
                    left: 633px;
                }
                .STC1-13 {
                    top: 370px;
                    left: 633px;
                }
                .STC1-14 {
                    top: 428px;
                    left: 633px;
                }
                .HDG2-1 {
                    top: 501px;
                    left: 643px;
                }
                .HDG1-47 {
                    top: 568px;
                    left: 699px;
                }
                .HDG1-39 {
                    top: 659px;
                    left: 691px;
                }
                .HDG1-43 {
                     top: 725px;
                     left: 691px;
                }
                .HDG1-61 {
                    top: 785px;
                    left: 730px;
                }
                .HDG1-65 {
                    top: 838px;
                    left: 730px;
                }
                // 第五列
                .HDG1-31 {
                    top: 71px;
                    left: 865px;
                }
                .HDG1-32 {
                    top: 128px;
                    left: 865px;
                }
                .HDG1-33 {
                    top: 185px;
                    left: 865px;
                }
                .HDG1-34 {
                    top: 242px;
                    left: 865px;
                }
                .HDG1-49 {
                    top: 298px;
                    left: 922px;
                }
                .HDG1-50 {
                    top: 341px;
                    left: 922px;
                }
                .HDG1-51 {
                    top: 384px;
                    left: 922px;
                }
                .HDG1-52 {
                    top: 427px;
                    left: 922px;
                }
                .HDG1-35 {
                    top: 500px;
                    left: 867px;
                }
                .HDG1-48 {
                    top: 566px;
                    left: 918px;
                }
                .HDG1-40 {
                    top: 659px;
                    left: 879px;
                }
                .HDG1-44 {
                    top: 726px;
                    left: 925px;
                }
                .HDG1-62 {
                    top: 791px;
                    left: 881px;
                }
                .HDG1-66 {
                    top: 841px;
                    left: 929px;
                }
            }
        }
        // 轻客车体样式
        .car-out {
            background: url('../../../assets/images/LedCarouselAvi/car_out.png') !important;
            background-position: center 0 !important;
            background-repeat: no-repeat !important;
            background-size: 100% 100% !important;
        }
    }
</style>