<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-5"
                    v-if="realData.hasOwnProperty('HDG1-5') && realData['HDG1-5'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-5'].busType)">
                </div>
                <div class="HDG1-4"
                    v-if="realData.hasOwnProperty('HDG1-4') && realData['HDG1-4'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-4'].busType)">
                </div>
                <div class="HDG1-3"
                    v-if="realData.hasOwnProperty('HDG1-3') && realData['HDG1-3'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-3'].busType)">
                </div>
                <div class="HDG1-2"
                    v-if="realData.hasOwnProperty('HDG1-2') && realData['HDG1-2'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-2'].busType)">
                </div>
                <div class="HDG1-1"
                    v-if="realData.hasOwnProperty('HDG1-1') && realData['HDG1-1'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-1'].busType)">
                </div>
                <!-- 第二行 -->
                <div class="HDG1-10"
                    v-if="realData.hasOwnProperty('HDG1-10') && realData['HDG1-10'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-10'].busType)">
                </div>
                <div class="HDG1-9"
                    v-if="realData.hasOwnProperty('HDG1-9') && realData['HDG1-9'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-9'].busType)">
                </div>
                <div class="HDG1-8"
                    v-if="realData.hasOwnProperty('HDG1-8') && realData['HDG1-8'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-8'].busType)">
                </div>
                <div class="HDG1-7"
                    v-if="realData.hasOwnProperty('HDG1-7') && realData['HDG1-7'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-7'].busType)">
                </div>
                <div class="HDG1-6"
                    v-if="realData.hasOwnProperty('HDG1-6') && realData['HDG1-6'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-6'].busType)">
                </div>
                <!-- 第三行 -->
                <div class="HDG1-15"
                    v-if="realData.hasOwnProperty('HDG1-15') && realData['HDG1-15'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-15'].busType)">
                </div>
                <div class="HDG1-14"
                    v-if="realData.hasOwnProperty('HDG1-14') && realData['HDG1-14'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-14'].busType)">
                </div>
                <div class="HDG1-13"
                    v-if="realData.hasOwnProperty('HDG1-13') && realData['HDG1-13'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-13'].busType)">
                </div>
                <div class="HDG1-12"
                    v-if="realData.hasOwnProperty('HDG1-12') && realData['HDG1-12'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-12'].busType)">
                </div>
                <div class="HDG1-11"
                    v-if="realData.hasOwnProperty('HDG1-11') && realData['HDG1-11'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-11'].busType)">
                </div>
                <!-- 第四行 -->
                <div class="HDG1-20"
                    v-if="realData.hasOwnProperty('HDG1-20') && realData['HDG1-20'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-20'].busType)">
                </div>
                <div class="HDG1-19"
                    v-if="realData.hasOwnProperty('HDG1-19') && realData['HDG1-19'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-19'].busType)">
                </div>
                <div class="HDG1-18"
                    v-if="realData.hasOwnProperty('HDG1-18') && realData['HDG1-18'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-18'].busType)">
                </div>
                <div class="HDG1-17"
                    v-if="realData.hasOwnProperty('HDG1-17') && realData['HDG1-17'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-17'].busType)">
                </div>
                <div class="HDG1-16"
                    v-if="realData.hasOwnProperty('HDG1-16') && realData['HDG1-16'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-16'].busType)">
                </div>
                <!-- 第五行 -->
                <div class="HDG1-25"
                    v-if="realData.hasOwnProperty('HDG1-25') && realData['HDG1-25'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-25'].busType)">
                </div>
                <div class="HDG1-24"
                    v-if="realData.hasOwnProperty('HDG1-24') && realData['HDG1-24'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-24'].busType)">
                </div>
                <div class="HDG1-23"
                    v-if="realData.hasOwnProperty('HDG1-23') && realData['HDG1-23'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-23'].busType)">
                </div>
                <div class="HDG1-22"
                    v-if="realData.hasOwnProperty('HDG1-22') && realData['HDG1-22'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-22'].busType)">
                </div>
                <div class="HDG1-21"
                    v-if="realData.hasOwnProperty('HDG1-21') && realData['HDG1-21'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-21'].busType)">
                </div>
                <!-- 第六行 -->
                <div class="HDG1-30"
                    v-if="realData.hasOwnProperty('HDG1-30') && realData['HDG1-30'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-30'].busType)">
                </div>
                <div class="HDG1-29"
                    v-if="realData.hasOwnProperty('HDG1-29') && realData['HDG1-29'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-29'].busType)">
                </div>
                <div class="HDG1-28"
                    v-if="realData.hasOwnProperty('HDG1-28') && realData['HDG1-28'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-28'].busType)">
                </div>
                <div class="HDG1-27"
                    v-if="realData.hasOwnProperty('HDG1-27') && realData['HDG1-27'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-27'].busType)">
                </div>
                <div class="HDG1-26"
                    v-if="realData.hasOwnProperty('HDG1-26') && realData['HDG1-26'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-26'].busType)">
                </div>
                <!-- 第七行 -->
                <div class="HDG1-53"
                    v-if="realData.hasOwnProperty('HDG1-53') && realData['HDG1-53'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-53'].busType)">
                </div>
                <div class="HDG1-54"
                    v-if="realData.hasOwnProperty('HDG1-54') && realData['HDG1-54'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-54'].busType)">
                </div>
                <!-- 第八行 -->
                <div class="HDG1-55"
                    v-if="realData.hasOwnProperty('HDG1-55') && realData['HDG1-55'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-55'].busType)">
                </div>
                <div class="HDG1-56"
                    v-if="realData.hasOwnProperty('HDG1-56') && realData['HDG1-56'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-56'].busType)">
                </div>
            </div>
        </div>
    </div>
</template>

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

<style lang="scss" scoped>
    .page-pack {
        width: 100%;
        height: 100%;
        .container {
            width: 1556px;
            height: 1037px;
            background: url("../../../assets/images/LedCarouselAvi/sheet_metal_bg.png");
            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: 1272px;
                height: 663px;
                margin-top: 190px;
                margin-left: 141px;
                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-5 {
                    top: 78px;
                    left: 22px;
                }
                .HDG1-4 {
                    top: 81px;
                    left: 346px;
                }
                .HDG1-3 {
                    top: 81px;
                    left: 597px;
                }
                .HDG1-2 {
                    top: 81px;
                    left: 874px;
                }
                .HDG1-1 {
                    top: 81px;
                    left: 1127px;
                }
                // 第二行
                .HDG1-10 {
                    top: 147px;
                    left: 22px;
                }
                .HDG1-9 {
                    top: 147px;
                    left: 349px;
                }
                .HDG1-8 {
                    top: 147px;
                    left: 602px;
                }
                .HDG1-7 {
                    top: 147px;
                    left: 872px;
                }
                .HDG1-6 {
                    top: 147px;
                    left: 1126px;
                }
                // 第三行
                .HDG1-15 {
                    top: 220px;
                    left: 22px;
                }
                .HDG1-14 {
                    top: 220px;
                    left: 349px;
                }
                .HDG1-13 {
                    top: 220px;
                    left: 602px;
                }
                .HDG1-12 {
                    top: 220px;
                    left: 872px;
                }
                .HDG1-11 {
                    top: 220px;
                    left: 1126px;
                }
                // 第四行
                .HDG1-20 {
                    top: 291px;
                    left: 22px;
                }
                .HDG1-19 {
                    top: 291px;
                    left: 349px;
                }
                .HDG1-18 {
                    top: 291px;
                    left: 602px;
                }
                .HDG1-17 {
                    top: 291px;
                    left: 872px;
                }
                .HDG1-16 {
                    top: 291px;
                    left: 1126px;
                }
                // 第五行
                .HDG1-25 {
                    top: 365px;
                    left: 22px;
                }
                .HDG1-24 {
                    top: 365px;
                    left: 349px;
                }
                .HDG1-23 {
                    top: 365px;
                    left: 602px;
                }
                .HDG1-22 {
                    top: 365px;
                    left: 872px;
                }
                .HDG1-21 {
                    top: 365px;
                    left: 1126px;
                }
                // 第六行
                .HDG1-30 {
                    top: 434px;
                    left: 22px;
                }
                .HDG1-29 {
                    top: 434px;
                    left: 349px;
                }
                .HDG1-28 {
                    top: 434px;
                    left: 602px;
                }
                .HDG1-27 {
                    top: 434px;
                    left: 872px;
                }
                .HDG1-26 {
                    top: 434px;
                    left: 1126px;
                }
                // 第七行
                .HDG1-53 {
                    top: 505px;
                    left: 22px;
                }
                .HDG1-54 {
                    top: 505px;
                    left: 365px;
                }
                // 第八行
                .HDG1-55 {
                    top: 575px;
                    left: 22px;
                }
                .HDG1-56 {
                    top: 575px;
                    left: 365px;
                }
            }
        }
        // 轻客车体样式
        .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>