<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="HDG1-95"
                    v-if="realData.hasOwnProperty('HDG1-95') && realData['HDG1-95'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-95'].busType)">
                </div>
                <div class="HDG1-96"
                    v-if="realData.hasOwnProperty('HDG1-96') && realData['HDG1-96'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-96'].busType)">
                </div>
                <div class="HDG1-97"
                    v-if="realData.hasOwnProperty('HDG1-97') && realData['HDG1-97'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-97'].busType)">
                </div>
                <div class="HDG1-98"
                    v-if="realData.hasOwnProperty('HDG1-98') && realData['HDG1-98'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-98'].busType)">
                </div>
                <div class="HDG1-99"
                    v-if="realData.hasOwnProperty('HDG1-99') && realData['HDG1-99'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-99'].busType)">
                </div>
                <div class="HDG5-13"
                    v-if="realData.hasOwnProperty('HDG5-13') && realData['HDG5-13'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG5-13'].busType)">
                </div>
                <!-- 第二行 -->
                <div class="HDG1-100"
                    v-if="realData.hasOwnProperty('HDG1-100') && realData['HDG1-100'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-100'].busType)">
                </div>
                <div class="HDG1-101"
                    v-if="realData.hasOwnProperty('HDG1-101') && realData['HDG1-101'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-101'].busType)">
                </div>
                <div class="HDG1-102"
                    v-if="realData.hasOwnProperty('HDG1-102') && realData['HDG1-102'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-102'].busType)">
                </div>
                <div class="HDG1-103"
                    v-if="realData.hasOwnProperty('HDG1-103') && realData['HDG1-103'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-103'].busType)">
                </div>
                <div class="HDG1-104"
                    v-if="realData.hasOwnProperty('HDG1-104') && realData['HDG1-104'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-104'].busType)">
                </div>
                <div class="HDG5-14"
                    v-if="realData.hasOwnProperty('HDG5-14') && realData['HDG5-14'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG5-14'].busType)">
                </div>
                <!-- 第三行 -->
                <div class="HDG1-105"
                    v-if="realData.hasOwnProperty('HDG1-105') && realData['HDG1-105'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-105'].busType)">
                </div>
                <div class="HDG1-106"
                    v-if="realData.hasOwnProperty('HDG1-106') && realData['HDG1-106'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-106'].busType)">
                </div>
                <div class="HDG1-107"
                    v-if="realData.hasOwnProperty('HDG1-107') && realData['HDG1-107'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-107'].busType)">
                </div>
                <div class="HDG1-108"
                    v-if="realData.hasOwnProperty('HDG1-108') && realData['HDG1-108'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-108'].busType)">
                </div>
                <div class="HDG1-109"
                    v-if="realData.hasOwnProperty('HDG1-109') && realData['HDG1-109'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-109'].busType)">
                </div>
                <div class="HDG5-15"
                    v-if="realData.hasOwnProperty('HDG5-15') && realData['HDG5-15'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG5-15'].busType)">
                </div>
                <!-- 第四行 -->
                <div class="HDG1-110"
                    v-if="realData.hasOwnProperty('HDG1-110') && realData['HDG1-110'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-110'].busType)">
                </div>
                <div class="HDG1-111"
                    v-if="realData.hasOwnProperty('HDG1-111') && realData['HDG1-111'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-111'].busType)">
                </div>
                <div class="HDG1-112"
                    v-if="realData.hasOwnProperty('HDG1-112') && realData['HDG1-112'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-112'].busType)">
                </div>
                <div class="HDG1-113"
                    v-if="realData.hasOwnProperty('HDG1-113') && realData['HDG1-113'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-113'].busType)">
                </div>
                <div class="HDG1-114"
                    v-if="realData.hasOwnProperty('HDG1-114') && realData['HDG1-114'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-114'].busType)">
                </div>
                <div class="HDG5-16"
                    v-if="realData.hasOwnProperty('HDG5-16') && realData['HDG5-16'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG5-16'].busType)">
                </div>
                <!-- 第五行 -->
                <div class="HDG5-17"
                    v-if="realData.hasOwnProperty('HDG5-17') && realData['HDG5-17'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG5-17'].busType)">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                // 定时器
                timer: '',
                // 腻子工作区真实数据
                realData: {},
                // 车体在线数量
                onlineNumber: null
            }
        },
        methods: {
            // 获取腻子工作区实时数据
            getPuttyInformation () {
                let params = {areaNo: '4'};
                this.$fetch('area-controller/realTime-get', params).then(res => {
                    for (let item of res) {
                        if (item.code === '4') {
                            this.realData = _.cloneDeep(item.stationMap);
                            this.onlineNumber = _.cloneDeep(item.onlineNum);
                            break;
                        }
                    }
                })
            },
            // 解析车体样式
            resolveCarTypeStyle (type) {
                if (type === 'OTHER') {
                    return 'car-out';
                } else {
                    return '';
                }
            }
        },
        mounted () {
            setTimeout(() => {
                // 获取腻子工作区实时数据
                this.getPuttyInformation();
                this.timer = setInterval(() => {
                    // 获取腻子工作区实时数据
                    this.getPuttyInformation();
                }, 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/putty_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: 1337px;
                height: 460px;
                margin-top: 274px;
                margin-left: 110px;
                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%;
                }
                // 第一行
                .HDG1-95 {
                    top: 46px;
                    left: 27px;
                }
                .HDG1-96 {
                    top: 46px;
                    left: 269px;
                }
                .HDG1-97 {
                    top: 46px;
                    left: 452px;
                }
                .HDG1-98 {
                    top: 46px;
                    left: 633px;
                }
                .HDG1-99 {
                    top: 46px;
                    left: 778px;
                }
                .HDG5-13 {
                    top: 46px;
                    left: 1139px;
                }
                // 第二行
                .HDG1-100 {
                    top: 137px;
                    left: 27px;
                }
                .HDG1-101 {
                    top: 137px;
                    left: 269px;
                }
                .HDG1-102 {
                    top: 137px;
                    left: 452px;
                }
                .HDG1-103 {
                    top: 137px;
                    left: 633px;
                }
                .HDG1-104 {
                    top: 137px;
                    left: 778px;
                }
                .HDG5-14 {
                    top: 137px;
                    left: 1139px;
                }
                // 第三行
                .HDG1-105 {
                    top: 222px;
                    left: 60px;
                }
                .HDG1-106 {
                    top: 222px;
                    left: 213px;
                }
                .HDG1-107 {
                    top: 222px;
                    left: 434px;
                }
                .HDG1-108 {
                    top: 222px;
                    left: 583px;
                }
                .HDG1-109 {
                    top: 222px;
                    left: 778px;
                }
                .HDG5-15 {
                    top: 222px;
                    left: 1140px;
                }
                // 第四行
                .HDG1-110 {
                    top: 307px;
                    left: 60px;
                }
                .HDG1-111 {
                    top: 307px;
                    left: 213px;
                }
                .HDG1-112 {
                    top: 307px;
                    left: 434px;
                }
                .HDG1-113 {
                    top: 307px;
                    left: 583px;
                }
                .HDG1-114 {
                    top: 307px;
                    left: 778px;
                }
                .HDG5-16 {
                    top: 307px;
                    left: 1140px;
                }
                // 第五行
                .HDG5-17 {
                    top: 398px;
                    left: 1140px;
                }
            }
        }
        // 轻客车体样式
        .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>