<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-115"
                    v-if="realData.hasOwnProperty('HDG1-115') && realData['HDG1-115'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-115'].busType)">
                </div>
                <div class="HDG1-116"
                    v-if="realData.hasOwnProperty('HDG1-116') && realData['HDG1-116'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-116'].busType)">
                </div>
                <div class="HDG1-117"
                    v-if="realData.hasOwnProperty('HDG1-117') && realData['HDG1-117'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-117'].busType)">
                </div>
                <div class="HDG1-118"
                    v-if="realData.hasOwnProperty('HDG1-118') && realData['HDG1-118'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-118'].busType)">
                </div>
                <div class="HDG1-119"
                    v-if="realData.hasOwnProperty('HDG1-119') && realData['HDG1-119'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-119'].busType)">
                </div>
                <!-- 第二行 -->
                <div class="HDG1-120"
                    v-if="realData.hasOwnProperty('HDG1-120') && realData['HDG1-120'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-120'].busType)">
                </div>
                <div class="HDG1-121"
                    v-if="realData.hasOwnProperty('HDG1-121') && realData['HDG1-121'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-121'].busType)">
                </div>
                <div class="HDG1-122"
                    v-if="realData.hasOwnProperty('HDG1-122') && realData['HDG1-122'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-122'].busType)">
                </div>
                <div class="HDG1-123"
                    v-if="realData.hasOwnProperty('HDG1-123') && realData['HDG1-123'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-123'].busType)">
                </div>
                <div class="HDG1-124"
                    v-if="realData.hasOwnProperty('HDG1-124') && realData['HDG1-124'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-124'].busType)">
                </div>
                <div class="HDG5-18"
                    v-if="realData.hasOwnProperty('HDG5-18') && realData['HDG5-18'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG5-18'].busType)">
                </div>
                <!-- 第三行 -->
                <div class="HDG1-125"
                    v-if="realData.hasOwnProperty('HDG1-125') && realData['HDG1-125'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-125'].busType)">
                </div>
                <div class="HDG1-126"
                    v-if="realData.hasOwnProperty('HDG1-126') && realData['HDG1-126'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-126'].busType)">
                </div>
                <div class="HDG1-127"
                    v-if="realData.hasOwnProperty('HDG1-127') && realData['HDG1-127'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-127'].busType)">
                </div>
                <div class="HDG1-128"
                    v-if="realData.hasOwnProperty('HDG1-128') && realData['HDG1-128'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-128'].busType)">
                </div>
                <div class="HDG1-129"
                    v-if="realData.hasOwnProperty('HDG1-129') && realData['HDG1-129'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-129'].busType)">
                </div>
                <div class="HDG5-19"
                    v-if="realData.hasOwnProperty('HDG5-19') && realData['HDG5-19'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG5-19'].busType)">
                </div>
                <!-- 第四行 -->
                <div class="HDG1-130"
                    v-if="realData.hasOwnProperty('HDG1-130') && realData['HDG1-130'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-130'].busType)">
                </div>
                <div class="HDG1-131"
                    v-if="realData.hasOwnProperty('HDG1-131') && realData['HDG1-131'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-131'].busType)">
                </div>
                <div class="HDG1-132"
                    v-if="realData.hasOwnProperty('HDG1-132') && realData['HDG1-132'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-132'].busType)">
                </div>
                <div class="HDG1-133"
                    v-if="realData.hasOwnProperty('HDG1-133') && realData['HDG1-133'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-133'].busType)">
                </div>
                <div class="HDG5-20"
                    v-if="realData.hasOwnProperty('HDG5-20') && realData['HDG5-20'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG5-20'].busType)">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                // 定时器
                timer: '',
                // 中涂工作区真实数据
                realData: {},
                // 车体在线数量
                onlineNumber: null
            }
        },
        methods: {
            // 获取中涂工作区真实数据
            getMiddleCoatInformation () {
                let params = {areaNo: '5'};
                this.$fetch('area-controller/realTime-get', params).then(res => {
                    for (let item of res) {
                        if (item.code === '5') {
                            this.realData = _.cloneDeep(item.stationMap);
                            this.onlineNumber = _.cloneDeep(item.onlineNum);
                            break;
                        }
                    }
                })
            },
            // 解析车体样式
            resolveCarTypeStyle (type) {
                if (type === 'OTHER') {
                    return 'car-out';
                } else {
                    return '';
                }
            }
        },
        mounted () {
            setTimeout(() => {
                // 获取中涂工作区真实数据
                this.getMiddleCoatInformation();
                this.timer = setInterval(() => {
                    // 获取中涂工作区真实数据
                    this.getMiddleCoatInformation();
                }, 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/middle_coat_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: 1344px;
                height: 336px;
                position: relative;
                margin-top: 353px;
                margin-left: 106px;
                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-115 {
                    top: 34px;
                    left: 25px;
                }
                .HDG1-116 {
                    top: 34px;
                    left: 213px;
                }
                .HDG1-117 {
                    top: 34px;
                    left: 401px;
                }
                .HDG1-118 {
                    top: 34px;
                    left: 587px;
                }
                .HDG1-119 {
                    top: 34px;
                    left: 775px;
                }
                // 第二行
                .HDG1-120 {
                    top: 103px;
                    left: 79px;
                }
                .HDG1-121 {
                    top: 103px;
                    left: 261px;
                }
                .HDG1-122 {
                    top: 103px;
                    left: 450px;
                }
                .HDG1-123 {
                    top: 103px;
                    left: 632px;
                }
                .HDG1-124 {
                    top: 103px;
                    left: 825px;
                }
                .HDG5-18 {
                    top: 103px;
                    left: 1130px;
                }
                // 第三行
                .HDG1-125 {
                    top: 178px;
                    left: 25px;
                }
                .HDG1-126 {
                    top: 178px;
                    left: 213px;
                }
                .HDG1-127 {
                    top: 178px;
                    left: 401px;
                }
                .HDG1-128 {
                    top: 178px;
                    left: 587px;
                }
                .HDG1-129 {
                    top: 178px;
                    left: 775px;
                }
                .HDG5-19 {
                    top: 185px;
                    left: 1130px;
                }
                // 第四行
                .HDG1-130 {
                    top: 266px;
                    left: 24px;
                }
                .HDG1-131 {
                    top: 266px;
                    left: 400px;
                }
                .HDG1-132 {
                    top: 266px;
                    left: 632px;
                }
                .HDG1-133 {
                    top: 266px;
                    left: 812px;
                }
                .HDG5-20 {
                    top: 266px;
                    left: 1130px;
                }
            }
        }
        // 轻客车体样式
        .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>