<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-57"
                    v-if="realData.hasOwnProperty('HDG1-57') && realData['HDG1-57'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-57'].busType)">
                </div>
                <div class="HDG1-67"
                    v-if="realData.hasOwnProperty('HDG1-67') && realData['HDG1-67'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-67'].busType)">
                </div>
                <div class="HDG1-68"
                    v-if="realData.hasOwnProperty('HDG1-68') && realData['HDG1-68'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-68'].busType)">
                </div>
                <div class="HDG1-69"
                    v-if="realData.hasOwnProperty('HDG1-69') && realData['HDG1-69'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-69'].busType)">
                </div>
                <div class="HDG1-70"
                    v-if="realData.hasOwnProperty('HDG1-70') && realData['HDG1-70'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-70'].busType)">
                </div>
                <!-- 第二行 -->
                <div class="HDG1-58"
                    v-if="realData.hasOwnProperty('HDG1-58') && realData['HDG1-58'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-58'].busType)">
                </div>
                <div class="HDG1-71"
                    v-if="realData.hasOwnProperty('HDG1-71') && realData['HDG1-71'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-71'].busType)">
                </div>
                <div class="HDG1-72"
                    v-if="realData.hasOwnProperty('HDG1-72') && realData['HDG1-72'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-72'].busType)">
                </div>
                <div class="HDG1-73"
                    v-if="realData.hasOwnProperty('HDG1-73') && realData['HDG1-73'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-73'].busType)">
                </div>
                <div class="HDG1-74"
                    v-if="realData.hasOwnProperty('HDG1-74') && realData['HDG1-74'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-74'].busType)">
                </div>
                <div class="HDG5-8"
                    v-if="realData.hasOwnProperty('HDG5-8') && realData['HDG5-8'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG5-8'].busType)">
                </div>
                <!-- 第三行 -->
                <div class="HDG1-75"
                    v-if="realData.hasOwnProperty('HDG1-75') && realData['HDG1-75'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-75'].busType)">
                </div>
                <div class="HDG1-76"
                    v-if="realData.hasOwnProperty('HDG1-76') && realData['HDG1-76'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-76'].busType)">
                </div>
                <div class="HDG1-77"
                    v-if="realData.hasOwnProperty('HDG1-77') && realData['HDG1-77'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-77'].busType)">
                </div>
                <div class="HDG1-78"
                    v-if="realData.hasOwnProperty('HDG1-78') && realData['HDG1-78'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-78'].busType)">
                </div>
                <div class="HDG1-79"
                    v-if="realData.hasOwnProperty('HDG1-79') && realData['HDG1-79'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-79'].busType)">
                </div>
                <div class="HDG5-9"
                    v-if="realData.hasOwnProperty('HDG5-9') && realData['HDG5-9'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG5-9'].busType)">
                </div>
                <!-- 第四行 -->
                <div class="HDG1-80"
                    v-if="realData.hasOwnProperty('HDG1-80') && realData['HDG1-80'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-80'].busType)">
                </div>
                <div class="HDG1-81"
                    v-if="realData.hasOwnProperty('HDG1-81') && realData['HDG1-81'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-81'].busType)">
                </div>
                <div class="HDG1-82"
                    v-if="realData.hasOwnProperty('HDG1-82') && realData['HDG1-82'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-82'].busType)">
                </div>
                <div class="HDG1-83"
                    v-if="realData.hasOwnProperty('HDG1-83') && realData['HDG1-83'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-83'].busType)">
                </div>
                <div class="HDG1-84"
                    v-if="realData.hasOwnProperty('HDG1-84') && realData['HDG1-84'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-84'].busType)">
                </div>
                <div class="HDG5-10"
                    v-if="realData.hasOwnProperty('HDG5-10') && realData['HDG5-10'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG5-10'].busType)">
                </div>
                <!-- 第五行 -->
                <div class="HDG1-85"
                    v-if="realData.hasOwnProperty('HDG1-85') && realData['HDG1-85'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-85'].busType)">
                </div>
                <div class="HDG1-86"
                    v-if="realData.hasOwnProperty('HDG1-86') && realData['HDG1-86'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-86'].busType)">
                </div>
                <div class="HDG1-87"
                    v-if="realData.hasOwnProperty('HDG1-87') && realData['HDG1-87'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-87'].busType)">
                </div>
                <div class="HDG1-88"
                    v-if="realData.hasOwnProperty('HDG1-88') && realData['HDG1-88'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-88'].busType)">
                </div>
                <div class="HDG1-89"
                    v-if="realData.hasOwnProperty('HDG1-89') && realData['HDG1-89'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-89'].busType)">
                </div>
                <div class="HDG5-11"
                    v-if="realData.hasOwnProperty('HDG5-11') && realData['HDG5-11'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG5-11'].busType)">
                </div>
                <!-- 第六行 -->
                <div class="HDG1-90"
                    v-if="realData.hasOwnProperty('HDG1-90') && realData['HDG1-90'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-90'].busType)">
                </div>
                <div class="HDG1-91"
                    v-if="realData.hasOwnProperty('HDG1-91') && realData['HDG1-91'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-91'].busType)">
                </div>
                <div class="HDG1-92"
                    v-if="realData.hasOwnProperty('HDG1-92') && realData['HDG1-92'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-92'].busType)">
                </div>
                <div class="HDG1-93"
                    v-if="realData.hasOwnProperty('HDG1-93') && realData['HDG1-93'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-93'].busType)">
                </div>
                <div class="HDG1-94"
                    v-if="realData.hasOwnProperty('HDG1-94') && realData['HDG1-94'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-94'].busType)">
                </div>
                <div class="HDG5-12"
                    v-if="realData.hasOwnProperty('HDG5-12') && realData['HDG5-12'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG5-12'].busType)">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                // 实时车体数量
                onlineNumber: null,
                // 密封防腐实时数据
                realData: {},
                // 定时器
                timer: ''
            }
        },
        methods: {
            // 查询密封防腐实时信息
            getSealedAnticorrosionInformation () {
                let queryParams = {areaNo: '3'};
                this.$fetch('area-controller/realTime-get', queryParams).then(res => {
                    for (let item of res) {
                        if (item.code === '3') {
                            this.realData = _.cloneDeep(item.stationMap);
                            this.onlineNumber = _.cloneDeep(item.onlineNum);
                            break;
                        }
                    }
                })
            },
            // 解析车体样式
            resolveCarTypeStyle (type) {
                if (type === 'OTHER') {
                    return 'car-out';
                } else {
                    return '';
                }
            }
        },
        mounted () {
            setTimeout(() => {
                // 查询密封防腐实时信息
                this.getSealedAnticorrosionInformation()
                this.timer = setInterval(() => {
                    // 查询密封防腐实时信息
                    this.getSealedAnticorrosionInformation()
                }, 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/sealed_anticorrosion-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: 1338px;
                height: 527px;
                margin-top: 255px;
                margin-left: 109px;
                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-57 {
                    top: 37px;
                    left: 36px;
                }
                .HDG1-67 {
                    top: 37px;
                    left: 234px;
                }
                .HDG1-68 {
                    top: 37px;
                    left: 429px;
                }
                .HDG1-69 {
                    top: 37px;
                    left: 627px;
                }
                .HDG1-70 {
                    top: 37px;
                    left: 823px;
                }
                // 第二行
                .HDG1-58 {
                    top: 124px;
                    left: 36px;
                }
                .HDG1-71 {
                    top: 124px;
                    left: 234px;
                }
                .HDG1-72 {
                    top: 124px;
                    left: 429px;
                }
                .HDG1-73 {
                    top: 124px;
                    left: 627px;
                }
                .HDG1-74 {
                    top: 124px;
                    left: 823px;
                }
                .HDG5-8 {
                    top: 120px;
                    left: 1154px;
                }
                // 第三行
                .HDG1-75 {
                    top: 203px;
                    left: 80px;
                }
                .HDG1-76 {
                    top: 207px;
                    left: 234px;
                }
                .HDG1-77 {
                    top: 207px;
                    left: 429px;
                }
                .HDG1-78 {
                    top: 207px;
                    left: 627px;
                }
                .HDG1-79 {
                    top: 207px;
                    left: 823px;
                }
                .HDG5-9 {
                    top: 207px;
                    left: 1154px;
                }
                // 第四行
                .HDG1-80 {
                    top: 291px;
                    left: 76px;
                }
                .HDG1-81 {
                    top: 291px;
                    left: 285px;
                }
                .HDG1-82 {
                    top: 291px;
                    left: 476px;
                }
                .HDG1-83 {
                    top: 291px;
                    left: 689px;
                }
                .HDG1-84 {
                    top: 291px;
                    left: 880px;
                }
                .HDG5-10 {
                    top: 291px;
                    left: 1154px;
                }
                // 第五行
                .HDG1-85 {
                    top: 377px;
                    left: 35px;
                }
                .HDG1-86 {
                    top: 377px;
                    left: 234px;
                }
                .HDG1-87 {
                    top: 377px;
                    left: 429px;
                }
                .HDG1-88 {
                    top: 377px;
                    left: 627px;
                }
                .HDG1-89 {
                    top: 377px;
                    left: 823px;
                }
                .HDG5-11 {
                    top: 377px;
                    left: 1194px;
                }
                // 第六行
                .HDG1-90 {
                    top: 460px;
                    left: 35px;
                }
                .HDG1-91 {
                    top: 460px;
                    left: 234px;
                }
                .HDG1-92 {
                    top: 460px;
                    left: 429px;
                }
                .HDG1-93 {
                    top: 460px;
                    left: 627px;
                }
                .HDG1-94 {
                    top: 460px;
                    left: 823px;
                }
                .HDG5-12 {
                    top: 460px;
                    left: 1194px;
                }
            }
        }
        // 轻客车体样式
        .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>