<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-147"
                    v-if="realData.hasOwnProperty('HDG1-147') && realData['HDG1-147'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-147'].busType)">
                </div>
                <div class="HDG1-163"
                    v-if="realData.hasOwnProperty('HDG1-163') && realData['HDG1-163'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-163'].busType)">
                </div>
                <div class="HDG1-205"
                    v-if="realData.hasOwnProperty('HDG1-205') && realData['HDG1-205'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-205'].busType)">
                </div>
                <div class="HDG1-206"
                    v-if="realData.hasOwnProperty('HDG1-206') && realData['HDG1-206'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-206'].busType)">
                </div>
                <div class="HDG1-207"
                    v-if="realData.hasOwnProperty('HDG1-207') && realData['HDG1-207'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-207'].busType)">
                </div>
                <!-- 第二行 -->
                <div class="HDG1-148"
                    v-if="realData.hasOwnProperty('HDG1-148') && realData['HDG1-148'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-148'].busType)">
                </div>
                <div class="HDG1-164"
                    v-if="realData.hasOwnProperty('HDG1-164') && realData['HDG1-164'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-164'].busType)">
                </div>
                <div class="HDG1-208"
                    v-if="realData.hasOwnProperty('HDG1-208') && realData['HDG1-208'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-208'].busType)">
                </div>
                <div class="HDG1-209"
                    v-if="realData.hasOwnProperty('HDG1-209') && realData['HDG1-209'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-209'].busType)">
                </div>
                <div class="HDG1-210"
                    v-if="realData.hasOwnProperty('HDG1-210') && realData['HDG1-210'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-210'].busType)">
                </div>
                <!-- 第三行 -->
                <div class="HDG1-149"
                    v-if="realData.hasOwnProperty('HDG1-149') && realData['HDG1-149'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-149'].busType)">
                </div>
                <div class="HDG1-165"
                    v-if="realData.hasOwnProperty('HDG1-165') && realData['HDG1-165'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-165'].busType)">
                </div>
                <div class="HDG1-211"
                    v-if="realData.hasOwnProperty('HDG1-211') && realData['HDG1-211'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-211'].busType)">
                </div>
                <div class="HDG1-212"
                    v-if="realData.hasOwnProperty('HDG1-212') && realData['HDG1-212'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-212'].busType)">
                </div>
                <div class="HDG1-213"
                    v-if="realData.hasOwnProperty('HDG1-213') && realData['HDG1-213'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-213'].busType)">
                </div>
                <!-- 涂装车出 -->
                <div class="HXG2-1"
                    v-if="realData.hasOwnProperty('HXG2-1') && realData['HXG2-1'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HXG2-1'].busType)">
                </div>
            </div>
        </div>
    </div>
</template>

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

<style lang="scss" scoped>
    .page-pack {
        height: 100%;
        width: 100%;
        .container {
            width: 1556px;
            height: 1037px;
            background: url("../../../assets/images/LedCarouselAvi/finished_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%;
                }
                .HDG1-147 {
                    top: 337px;
                    left: -130px;
                }
                .HDG1-148 {
                    top: 386px;
                    left: -130px;
                }
                .HDG1-149 {
                    top: 440px;
                    left: -130px;
                }
                .HDG1-163 {
                    top: 337px;
                    left: 60px;
                }
                .HDG1-164 {
                    top: 386px;
                    left: 60px;
                }
                .HDG1-165 {
                    top: 440px;
                    left: 60px;
                }
                .HDG1-205 {
                    top: 337px;
                    left: 404px;
                }
                .HDG1-206 {
                    top: 337px;
                    left: 573px;
                }
                .HDG1-207 {
                    top: 337px;
                    left: 730px;
                }
            }
                .HDG1-208 {
                    top: 386px;
                    left: 404px;
                }
                .HDG1-209 {
                    top: 386px;
                    left: 573px;
                }
                .HDG1-210 {
                    top: 386px;
                    left: 730px;
                }
                .HDG1-211 {
                    top: 440px;
                    left: 404px;
                }
                .HDG1-212 {
                    top: 440px;
                    left:573px;
                }
                .HDG1-213 {
                    top: 440px;
                    left:730px;
                }
                .HXG2-1 {
                    top: 380px;
                    left:1077px;
                }
        }
        // 轻客车体样式
        .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>