<template>
    <!-- 密封防腐作业区 -->
    <div class="page-pack">
        <div class="container-pack">
            <!-- 第一行 -->
            <div 
                class="sealed-row-1-1"
                v-if="sealedAnticorrosion.hasOwnProperty('HDG1-57') && sealedAnticorrosion['HDG1-57'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-57'].busType, 'HDG1-57')">
                <p>{{sealedAnticorrosion['HDG1-57'].busNo}}</p>
            </div>
            <div 
                class="sealed-row-1-2"
                v-if="sealedAnticorrosion.hasOwnProperty('HDG1-67') && sealedAnticorrosion['HDG1-67'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-67'].busType, 'HDG1-67')">
                <p>{{sealedAnticorrosion['HDG1-67'].busNo}}</p>
            </div>
            <div 
                class="sealed-row-1-3"
                v-if="sealedAnticorrosion.hasOwnProperty('HDG1-68') && sealedAnticorrosion['HDG1-68'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-68'].busType, 'HDG1-68')">
                <p>{{sealedAnticorrosion['HDG1-68'].busNo}}</p>
            </div>
            <div 
                class="sealed-row-1-4"
                v-if="sealedAnticorrosion.hasOwnProperty('HDG1-69') && sealedAnticorrosion['HDG1-69'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-69'].busType, 'HDG1-69')">
                <p>{{sealedAnticorrosion['HDG1-69'].busNo}}</p>
            </div>
            <div 
                class="sealed-row-1-5"
                v-if="sealedAnticorrosion.hasOwnProperty('HDG1-70') && sealedAnticorrosion['HDG1-70'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-70'].busType, 'HDG1-70')">
                <p>{{sealedAnticorrosion['HDG1-70'].busNo}}</p>
            </div>
            <!-- 第二行 -->
            <div 
                class="sealed-row-2-1"
                v-if="sealedAnticorrosion.hasOwnProperty('HDG1-58') && sealedAnticorrosion['HDG1-58'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-58'].busType, 'HDG1-58')">
                <p>{{sealedAnticorrosion['HDG1-58'].busNo}}</p>
            </div>
            <div 
                class="sealed-row-2-2"
                v-if="sealedAnticorrosion.hasOwnProperty('HDG1-71') && sealedAnticorrosion['HDG1-71'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-71'].busType, 'HDG1-71')">
                <p>{{sealedAnticorrosion['HDG1-71'].busNo}}</p>
            </div>
            <div 
                class="sealed-row-2-3"
                v-if="sealedAnticorrosion.hasOwnProperty('HDG1-72') && sealedAnticorrosion['HDG1-72'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-72'].busType, 'HDG1-72')">
                <p>{{sealedAnticorrosion['HDG1-72'].busNo}}</p>
            </div>
            <div 
                class="sealed-row-2-4"
                v-if="sealedAnticorrosion.hasOwnProperty('HDG1-73') && sealedAnticorrosion['HDG1-73'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-73'].busType, 'HDG1-73')">
                <p>{{sealedAnticorrosion['HDG1-73'].busNo}}</p>
            </div>
            <div 
                class="sealed-row-2-5"
                v-if="sealedAnticorrosion.hasOwnProperty('HDG1-74') && sealedAnticorrosion['HDG1-74'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-74'].busType, 'HDG1-74')">
                <p>{{sealedAnticorrosion['HDG1-74'].busNo}}</p>
            </div>
            <!-- 第三行 -->
            <div 
                class="sealed-row-3-1"
                v-if="sealedAnticorrosion.hasOwnProperty('HDG1-75') && sealedAnticorrosion['HDG1-75'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-75'].busType, 'HDG1-75')">
                <p>{{sealedAnticorrosion['HDG1-75'].busNo}}</p>
            </div>
            <div 
                class="sealed-row-3-2"
                v-if="sealedAnticorrosion.hasOwnProperty('HDG1-76') && sealedAnticorrosion['HDG1-76'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-76'].busType, 'HDG1-76')">
                <p>{{sealedAnticorrosion['HDG1-76'].busNo}}</p>
            </div>
            <div 
                class="sealed-row-3-3"
                v-if="sealedAnticorrosion.hasOwnProperty('HDG1-77') && sealedAnticorrosion['HDG1-77'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-77'].busType, 'HDG1-77')">
                <p>{{sealedAnticorrosion['HDG1-77'].busNo}}</p>
            </div>
            <div 
                class="sealed-row-3-4"
                v-if="sealedAnticorrosion.hasOwnProperty('HDG1-78') && sealedAnticorrosion['HDG1-78'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-78'].busType, 'HDG1-78')">
                <p>{{sealedAnticorrosion['HDG1-78'].busNo}}</p>
            </div>
            <div 
                class="sealed-row-3-5"
                v-if="sealedAnticorrosion.hasOwnProperty('HDG1-79') && sealedAnticorrosion['HDG1-79'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-79'].busType, 'HDG1-79')">
                <p>{{sealedAnticorrosion['HDG1-79'].busNo}}</p>
            </div>
            <!-- 第四行 -->
            <div 
                class="sealed-row-4-1"
                v-if="sealedAnticorrosion.hasOwnProperty('HDG1-80') && sealedAnticorrosion['HDG1-80'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-80'].busType, 'HDG1-80')">
                <p>{{sealedAnticorrosion['HDG1-80'].busNo}}</p>
            </div>
            <div 
                class="sealed-row-4-2"
                v-if="sealedAnticorrosion.hasOwnProperty('HDG1-81') && sealedAnticorrosion['HDG1-81'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-81'].busType, 'HDG1-81')">
                <p>{{sealedAnticorrosion['HDG1-81'].busNo}}</p>
            </div>
            <div 
                class="sealed-row-4-3"
                v-if="sealedAnticorrosion.hasOwnProperty('HDG1-82') && sealedAnticorrosion['HDG1-82'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-82'].busType, 'HDG1-82')">
                <p>{{sealedAnticorrosion['HDG1-82'].busNo}}</p>
            </div>
            <div 
                class="sealed-row-4-4"
                v-if="sealedAnticorrosion.hasOwnProperty('HDG1-83') && sealedAnticorrosion['HDG1-83'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-83'].busType, 'HDG1-83')">
                <p>{{sealedAnticorrosion['HDG1-83'].busNo}}</p>
            </div>
            <div 
                class="sealed-row-4-5"
                v-if="sealedAnticorrosion.hasOwnProperty('HDG1-84') && sealedAnticorrosion['HDG1-84'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-84'].busType, 'HDG1-84')">
                <p>{{sealedAnticorrosion['HDG1-84'].busNo}}</p>
            </div>
            <!-- 第五行 -->
            <div 
                class="sealed-row-5-1"
                v-if="sealedAnticorrosion.hasOwnProperty('HDG1-85') && sealedAnticorrosion['HDG1-85'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-85'].busType, 'HDG1-85')">
                <p>{{sealedAnticorrosion['HDG1-85'].busNo}}</p>
            </div>
            <div 
                class="sealed-row-5-2"
                v-if="sealedAnticorrosion.hasOwnProperty('HDG1-86') && sealedAnticorrosion['HDG1-86'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-86'].busType, 'HDG1-86')">
                <p>{{sealedAnticorrosion['HDG1-86'].busNo}}</p>
            </div>
            <div 
                class="sealed-row-5-3"
                v-if="sealedAnticorrosion.hasOwnProperty('HDG1-87') && sealedAnticorrosion['HDG1-87'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-87'].busType, 'HDG1-87')">
                <p>{{sealedAnticorrosion['HDG1-87'].busNo}}</p>
            </div>
            <div 
                class="sealed-row-5-4"
                v-if="sealedAnticorrosion.hasOwnProperty('HDG1-88') && sealedAnticorrosion['HDG1-88'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-88'].busType, 'HDG1-88')">
                <p>{{sealedAnticorrosion['HDG1-88'].busNo}}</p>
            </div>
            <div 
                class="sealed-row-5-5"
                v-if="sealedAnticorrosion.hasOwnProperty('HDG1-89') && sealedAnticorrosion['HDG1-89'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-89'].busType, 'HDG1-89')">
                <p>{{sealedAnticorrosion['HDG1-89'].busNo}}</p>
            </div>
            <!-- 第六行 -->
            <div 
                class="sealed-row-6-1"
                v-if="sealedAnticorrosion.hasOwnProperty('HDG1-90') && sealedAnticorrosion['HDG1-90'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-90'].busType, 'HDG1-90')">
                <p>{{sealedAnticorrosion['HDG1-90'].busNo}}</p>
            </div>
            <div 
                class="sealed-row-6-2"
                v-if="sealedAnticorrosion.hasOwnProperty('HDG1-91') && sealedAnticorrosion['HDG1-91'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-91'].busType, 'HDG1-91')">
                <p>{{sealedAnticorrosion['HDG1-91'].busNo}}</p>
            </div>
            <div 
                class="sealed-row-6-3"
                v-if="sealedAnticorrosion.hasOwnProperty('HDG1-92') && sealedAnticorrosion['HDG1-92'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-92'].busType, 'HDG1-92')">
                <p>{{sealedAnticorrosion['HDG1-92'].busNo}}</p>
            </div>
            <div 
                class="sealed-row-6-4"
                v-if="sealedAnticorrosion.hasOwnProperty('HDG1-93') && sealedAnticorrosion['HDG1-93'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-93'].busType, 'HDG1-93')">
                <p>{{sealedAnticorrosion['HDG1-93'].busNo}}</p>
            </div>
            <div 
                class="sealed-row-6-5"
                v-if="sealedAnticorrosion.hasOwnProperty('HDG1-94') && sealedAnticorrosion['HDG1-94'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-94'].busType, 'HDG1-94')">
                <p>{{sealedAnticorrosion['HDG1-94'].busNo}}</p>
            </div>
            <!-- 右一列 -->
            <div 
                class="sealed-right-column-1-1"
                v-if="sealedAnticorrosion.hasOwnProperty('HDG5-8') && sealedAnticorrosion['HDG5-8'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG5-8'].busType, 'HDG5-8')">
                <p>{{sealedAnticorrosion['HDG5-8'].busNo}}</p>
            </div>
            <div 
                class="sealed-right-column-1-2"
                v-if="sealedAnticorrosion.hasOwnProperty('HDG5-9') && sealedAnticorrosion['HDG5-9'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG5-9'].busType, 'HDG5-9')">
                <p>{{sealedAnticorrosion['HDG5-9'].busNo}}</p>
            </div>
            <div 
                class="sealed-right-column-1-3"
                v-if="sealedAnticorrosion.hasOwnProperty('HDG5-10') && sealedAnticorrosion['HDG5-10'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG5-10'].busType, 'HDG5-10')">
                <p>{{sealedAnticorrosion['HDG5-10'].busNo}}</p>
            </div>
            <div 
                class="sealed-right-column-1-4"
                v-if="sealedAnticorrosion.hasOwnProperty('HDG5-11') && sealedAnticorrosion['HDG5-11'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG5-11'].busType, 'HDG5-11')">
                <p>{{sealedAnticorrosion['HDG5-11'].busNo}}</p>
            </div>
            <div 
                class="sealed-right-column-1-5"
                v-if="sealedAnticorrosion.hasOwnProperty('HDG5-12') && sealedAnticorrosion['HDG5-12'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG5-12'].busType, 'HDG5-12')">
                <p>{{sealedAnticorrosion['HDG5-12'].busNo}}</p>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                // 密封防腐作业区域实时数据
                sealedAnticorrosion: {},
                // 筛选条件订单号
                orderNo: '',
                // 筛选条件工单号
                workOrderNo: '',
                // 车体定位数据
                carPostion: {}
            }
        },
        methods: {
            // 解析车体类型及车体定位样式
            judgeCarTypeAndCarStationStyle (carType, caeNumber) {
                if (this.carPostion.hasOwnProperty(caeNumber)) {
                    return 'monitor-car-location-position'
                } else {
                    if (carType === 'OWN') {
                        return ''
                    } else {
                        return 'monitor-car-external'
                    }
                }
            },
            // 获取密封防腐作业区实时数据
            getSealedAnticorrosionRealTimeData () {
                let queryParams = { areaNo: '3' }
                this.$fetch('area-controller/realTime-get', queryParams).then(response => {
                    for (let item of response) {
                        if (item.code === '3') {
                            this.sealedAnticorrosionRealTime = _.cloneDeep(item)
                        }
                    }
                })
            },
            // 根据工单号或订单号定位当前车体位置
            getCurrentPosition () {
                let queryParams = { orderNo: this.orderNo, workOrderNo: this.workOrderNo }
                this.$fetch('area-controller/workOrderNo-get', queryParams).then(response => {
                    this.carPostion = _.cloneDeep(response)
                })
            },
            // 轮询查询区域实时信息
            pollingGetAreaRealTimeData () {
                // 获取密封防腐作业区实时数据
                this.getSealedAnticorrosionRealTimeData()
                // 根据工单号或订单号定位当前车体位置
                this.getCurrentPosition()
                setInterval(() => {
                    this.carPostion = {}
                    // 获取密封防腐作业区实时数据
                    this.getSealedAnticorrosionRealTimeData()
                }, 20000)
            }
        },
        mounted () {
            setTimeout(() => {
                // 轮询查询区域实时信息
                this.pollingGetAreaRealTimeData()
            }, 0)
        }
    }
</script>

<style lang="scss" scoped>
    .page-pack {
        min-height: 100%;
        background: rgba(0, 7, 12, 1);

        .container-pack {
            position: relative;
            margin: 0 auto;
            width: 1600px;
            height: 900px;
            background: url("../../../assets/images/Monitor/monitor_sealed_anticorrosion.png");

            div {
                position: absolute;
                width: 140px;
                height: 50px;
                cursor: pointer;
                background: url('../../../assets/images/Monitor/monitor_car.png') no-repeat;
                background-size: 35px 18px;
                background-position: 0 16px;

                p {
                    font-size: 14px;
                    margin: 0;
                    color: #ffffff;
                    font-weight: bold;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }

            // 第一行
            .sealed-row-1-1 {
                top: 265px;
                left: 155px;
            }
            .sealed-row-1-2 {
                top: 265px;
                left: 345px;
            }
            .sealed-row-1-3 {
                top: 265px;
                left: 530px;
            }
            .sealed-row-1-4 {
                top: 265px;
                left: 720px;
            }
            .sealed-row-1-5 {
                top: 265px;
                left: 910px;
            }

            // 第二行
            .sealed-row-2-1 {
                top: 352px;
                left: 155px;
            }
            .sealed-row-2-2 {
                top: 352px;
                left: 345px;
            }
            .sealed-row-2-3 {
                top: 352px;
                left: 530px;
            }
            .sealed-row-2-4 {
                top: 352px;
                left: 720px;
            }
            .sealed-row-2-5 {
                top: 352px;
                left: 910px;
            }

            // 第三行
            .sealed-row-3-1 {
                top: 435px;
                left: 210px;
            }
            .sealed-row-3-2 {
                top: 437px;
                left: 345px;
            }
            .sealed-row-3-3 {
                top: 437px;
                left: 530px;
            }
            .sealed-row-3-4 {
                top: 437px;
                left: 720px;
            }
            .sealed-row-3-5 {
                top: 437px;
                left: 910px;
            }

            // 第四行
            .sealed-row-4-1 {
                top: 520px;
                left: 210px;
            }
            .sealed-row-4-2 {
                top: 520px;
                left: 392px;
            }
            .sealed-row-4-3 {
                top: 520px;
                left: 572px;
            }
            .sealed-row-4-4 {
                top: 520px;
                left: 752px;
            }
            .sealed-row-4-5 {
                top: 520px;
                left: 936px;
            }

            // 第五行
            .sealed-row-5-1 {
                top: 605px;
                left: 155px;
            }
            .sealed-row-5-2 {
                top: 605px;
                left: 345px;
            }
            .sealed-row-5-3 {
                top: 605px;
                left: 530px;
            }
            .sealed-row-5-4 {
                top: 605px;
                left: 720px;
            }
            .sealed-row-5-5 {
                top: 605px;
                left: 910px;
            }

            // 第六行
            .sealed-row-6-1 {
                top: 690px;
                left: 155px;
            }
            .sealed-row-6-2 {
                top: 690px;
                left: 345px;
            }
            .sealed-row-6-3 {
                top: 690px;
                left: 530px;
            }
            .sealed-row-6-4 {
                top: 690px;
                left: 720px;
            }
            .sealed-row-6-5 {
                top: 690px;
                left: 910px;
            }

            // 右一列
            .sealed-right-column-1-1 {
                top: 352px;
                left: 1275px;
            }
            .sealed-right-column-1-2 {
                top: 438px;
                left: 1275px;
            }
            .sealed-right-column-1-3 {
                top: 522px;
                left: 1275px;
            }
            .sealed-right-column-1-4 {
                top: 604px;
                left: 1318px;
            }
            .sealed-right-column-1-5 {
                top: 688px;
                left: 1318px;
            }
        }
    }

    // 轻客车体样式
    .monitor-car-external {
        background: url('../../../assets/images/Monitor/monitor_car_external.png') !important;
        background-size: cover !important;
    }

    // 定位车体样式
    .monitor-car-location-position {
        background: url('../../../assets/images/Monitor/monitor_position_car.gif') !important;
        background-size: cover !important;
    }
</style>
