<template>
    <!-- 钣金车存放区 -->
    <div class="page-pack">
        <div class="container-pack">
            <div class="return-pack" @click="doReturnMonitorIndex"></div> 
            <!--第一行-->
            <div
                class="sheet-row-1-1"
                @click="doCarStationClick(query['HDG1-5'].busNo)"
                v-if="query.hasOwnProperty('HDG1-5') && query['HDG1-5'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-5'].busType, 'HDG1-5')"
            >
                <p>{{query['HDG1-5'].busNo}}</p>
            </div>
            <div
                class="sheet-row-1-2"
                @click="doCarStationClick(query['HDG1-4'].busNo)"
                v-if="query.hasOwnProperty('HDG1-4') && query['HDG1-4'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-4'].busType, 'HDG1-4')"
            >
                <p>{{query['HDG1-4'].busNo}}</p>
            </div>
            <div
                class="sheet-row-1-3"
                @click="doCarStationClick(query['HDG1-3'].busNo)"
                v-if="query.hasOwnProperty('HDG1-3') && query['HDG1-3'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-3'].busType, 'HDG1-3')"
            >
                <p>{{query['HDG1-3'].busNo}}</p>
            </div>
            <div
                class="sheet-row-1-4"
                @click="doCarStationClick(query['HDG1-2'].busNo)"
                v-if="query.hasOwnProperty('HDG1-2') && query['HDG1-2'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-2'].busType, 'HDG1-2')"
            >
                <p>{{query['HDG1-2'].busNo}}</p>
            </div>
            <div
                class="sheet-row-1-5"
                @click="doCarStationClick(query['HDG1-1'].busNo)"
                v-if="query.hasOwnProperty('HDG1-1') && query['HDG1-1'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-1'].busType, 'HDG1-1')"
            >
                <p>{{query['HDG1-1'].busNo}}</p>
            </div>
            <!--第二行-->
            <div
                class="sheet-row-2-1"
                @click="doCarStationClick(query['HDG1-10'].busNo)"
                v-if="query.hasOwnProperty('HDG1-10') && query['HDG1-10'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-10'].busType, 'HDG1-10')"
            >
                <p>{{query['HDG1-10'].busNo}}</p>
            </div>
            <div
                class="sheet-row-2-2"
                @click="doCarStationClick(query['HDG1-9'].busNo)"
                v-if="query.hasOwnProperty('HDG1-9') && query['HDG1-9'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-9'].busType, 'HDG1-9')"
            >
                <p>{{query['HDG1-9'].busNo}}</p>
            </div>
            <div
                class="sheet-row-2-3"
                @click="doCarStationClick(query['HDG1-8'].busNo)"
                v-if="query.hasOwnProperty('HDG1-8') && query['HDG1-8'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-8'].busType, 'HDG1-8')"
            >
                <p>{{query['HDG1-8'].busNo}}</p>
            </div>
            <div
                class="sheet-row-2-4"
                @click="doCarStationClick(query['HDG1-7'].busNo)"
                v-if="query.hasOwnProperty('HDG1-7') && query['HDG1-7'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-7'].busType, 'HDG1-7')"
            >
                <p>{{query['HDG1-7'].busNo}}</p>
            </div>
            <div
                class="sheet-row-2-5"
                @click="doCarStationClick(query['HDG1-6'].busNo)"
                v-if="query.hasOwnProperty('HDG1-6') && query['HDG1-6'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-6'].busType, 'HDG1-6')"
            >
                <p>{{query['HDG1-6'].busNo}}</p>
            </div>
            <!--第三行-->
            <div
                class="sheet-row-3-1"
                @click="doCarStationClick(query['HDG1-15'].busNo)"
                v-if="query.hasOwnProperty('HDG1-15') && query['HDG1-15'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-15'].busType, 'HDG1-15')"
            >
                <p>{{query['HDG1-15'].busNo}}</p>
            </div>
            <div
                class="sheet-row-3-2"
                @click="doCarStationClick(query['HDG1-14'].busNo)"
                v-if="query.hasOwnProperty('HDG1-14') && query['HDG1-14'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-14'].busType, 'HDG1-14')"
            >
                <p>{{query['HDG1-14'].busNo}}</p>
            </div>
            <div
                class="sheet-row-3-3"
                @click="doCarStationClick(query['HDG1-13'].busNo)"
                v-if="query.hasOwnProperty('HDG1-13') && query['HDG1-13'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-13'].busType, 'HDG1-13')"
            >
                <p>{{query['HDG1-13'].busNo}}</p>
            </div>
            <div
                class="sheet-row-3-4"
                @click="doCarStationClick(query['HDG1-12'].busNo)"
                v-if="query.hasOwnProperty('HDG1-12') && query['HDG1-12'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-12'].busType, 'HDG1-12')"
            >
                <p>{{query['HDG1-12'].busNo}}</p>
            </div>
            <div
                class="sheet-row-3-5"
                @click="doCarStationClick(query['HDG1-11'].busNo)"
                v-if="query.hasOwnProperty('HDG1-11') && query['HDG1-11'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-11'].busType, 'HDG1-11')"
            >
                <p>{{query['HDG1-11'].busNo}}</p>
            </div>
            <!--第四行-->
            <div
                class="sheet-row-4-1"
                @click="doCarStationClick(query['HDG1-20'].busNo)"
                v-if="query.hasOwnProperty('HDG1-20') && query['HDG1-20'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-20'].busType, 'HDG1-20')"
            >
                <p>{{query['HDG1-20'].busNo}}</p>
            </div>
            <div
                class="sheet-row-4-2"
                @click="doCarStationClick(query['HDG1-19'].busNo)"
                v-if="query.hasOwnProperty('HDG1-19') && query['HDG1-19'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-19'].busType, 'HDG1-19')"
            >
                <p>{{query['HDG1-19'].busNo}}</p>
            </div>
            <div
                class="sheet-row-4-3"
                @click="doCarStationClick(query['HDG1-18'].busNo)"
                v-if="query.hasOwnProperty('HDG1-18') && query['HDG1-18'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-18'].busType, 'HDG1-18')"
            >
                <p>{{query['HDG1-18'].busNo}}</p>
            </div>
            <div
                class="sheet-row-4-4"
                @click="doCarStationClick(query['HDG1-17'].busNo)"
                v-if="query.hasOwnProperty('HDG1-17') && query['HDG1-17'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-17'].busType, 'HDG1-17')"
            >
                <p>{{query['HDG1-17'].busNo}}</p>
            </div>
            <div
                class="sheet-row-4-5"
                @click="doCarStationClick(query['HDG1-16'].busNo)"
                v-if="query.hasOwnProperty('HDG1-16') && query['HDG1-16'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-16'].busType, 'HDG1-16')"
            >
                <p>{{query['HDG1-16'].busNo}}</p>
            </div>
            <!--第五行-->
            <div
                class="sheet-row-5-1"
                @click="doCarStationClick(query['HDG1-25'].busNo)"
                v-if="query.hasOwnProperty('HDG1-25') && query['HDG1-25'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-25'].busType, 'HDG1-25')"
            >
                <p>{{query['HDG1-25'].busNo}}</p>
            </div>
            <div
                class="sheet-row-5-2"
                @click="doCarStationClick(query['HDG1-24'].busNo)"
                v-if="query.hasOwnProperty('HDG1-24') && query['HDG1-24'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-24'].busType, 'HDG1-24')"
            >
                <p>{{ query['HDG1-24'].busNo }}</p>
            </div>
            <div
                class="sheet-row-5-3"
                @click="doCarStationClick(query['HDG1-23'].busNo)"
                v-if="query.hasOwnProperty('HDG1-23') && query['HDG1-23'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-23'].busType, 'HDG1-23')"
            >
                <p>{{ query['HDG1-23'].busNo }}</p>
            </div>
            <div
                class="sheet-row-5-4"
                @click="doCarStationClick(query['HDG1-22'].busNo)"
                v-if="query.hasOwnProperty('HDG1-22') && query['HDG1-22'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-22'].busType, 'HDG1-22')"
            >
                <p>{{query['HDG1-22'].busNo}}</p>
            </div>
            <div
                class="sheet-row-5-5"
                @click="doCarStationClick(query['HDG1-21'].busNo)"
                v-if="query.hasOwnProperty('HDG1-21') && query['HDG1-21'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-21'].busType, 'HDG1-21')"
            >
                <p>{{query['HDG1-21'].busNo}}</p>
            </div>
            <!--第六行-->
            <div
                class="sheet-row-6-1"
                @click="doCarStationClick(query['HDG1-30'].busNo)"
                v-if="query.hasOwnProperty('HDG1-30') && query['HDG1-30'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-30'].busType, 'HDG1-30')"
            >
                <p>{{query['HDG1-30'].busNo}}</p>
            </div>
            <div
                class="sheet-row-6-2"
                @click="doCarStationClick(query['HDG1-29'].busNo)"
                v-if="query.hasOwnProperty('HDG1-29') && query['HDG1-29'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-29'].busType, 'HDG1-29')"
            >
                <p>{{query['HDG1-29'].busNo}}</p>
            </div>
            <div
                class="sheet-row-6-3"
                @click="doCarStationClick(query['HDG1-28'].busNo)"
                v-if="query.hasOwnProperty('HDG1-28') && query['HDG1-28'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-28'].busType, 'HDG1-28')"
            >
                <p>{{query['HDG1-28'].busNo}}</p>
            </div>
            <div
                class="sheet-row-6-4"
                @click="doCarStationClick(query['HDG1-27'].busNo)"
                v-if="query.hasOwnProperty('HDG1-27') && query['HDG1-27'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-27'].busType, 'HDG1-27')"
            >
                <p>{{query['HDG1-27'].busNo}}</p>
            </div>
            <div
                class="sheet-row-6-5"
                @click="doCarStationClick(query['HDG1-26'].busNo)"
                v-if="query.hasOwnProperty('HDG1-26') && query['HDG1-26'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-26'].busType, 'HDG1-26')"
            >
                <p>{{query['HDG1-26'].busNo}}</p>
            </div>
            <!--第七行-->
            <div
                class="sheet-7-1"
                @click="doCarStationClick(query['HDG1-53'].busNo)"
                v-if="query.hasOwnProperty('HDG1-53') && query['HDG1-53'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-53'].busType, 'HDG1-53')"
            >
                <p>{{query['HDG1-53'].busNo}}</p>
            </div>
            <div
                class="sheet-7-2"
                @click="doCarStationClick(query['HDG1-54'].busNo)"
                v-if="query.hasOwnProperty('HDG1-54') && query['HDG1-54'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-54'].busType, 'HDG1-54')"
            >
                <p>{{query['HDG1-54'].busNo}}</p>
            </div>
            <!--第八行-->
            <div
                class="sheet-8-1"
                @click="doCarStationClick(query['HDG1-55'].busNo)"
                v-if="query.hasOwnProperty('HDG1-55') && query['HDG1-55'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-55'].busType, 'HDG1-55')"
            >
                <p>{{query['HDG1-55'].busNo}}</p>
            </div>
            <div
                class="sheet-8-2"
                @click="doCarStationClick(query['HDG1-56'].busNo)"
                v-if="query.hasOwnProperty('HDG1-56') && query['HDG1-56'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-56'].busType, 'HDG1-56')"
            >
                <p>{{query['HDG1-56'].busNo}}</p>
            </div>
        </div>
        <!-- 实时车辆 -->
        <div class="onlineNum">
            <p>总量 <span>{{ this.onlineNum !== null ? this.onlineNum : '0' }}</span></p>
        </div>
        <!-- 信息展示弹窗 -->
        <Tooltip
            ref="toolRef"
            :query="BusInformation"
        >
        </Tooltip>
    </div>
</template>

<script>
import Tooltip from './Tooltip';
export default {
    name: 'MonitorSheetMetalCar',
    components: {
        Tooltip
    },
    data () {
        return {
            // 定时器
            timer: null,
            // 当前在线人数
            onlineNum: null,
            // 车辆定位数据
            carPostionInfo: {},
            // 钣金车存放区实时信息
            query: {},
            // 根据车身号获得当前车体信息
            BusInformation: {}
        };
    },
    mounted () {
        this.pollingGetInterface();
    },
    beforeDestroy () {
        clearInterval(this.timer);
    },
    methods: {
        // 获取钣金车存放区实时信息
        getSheetMetalInformation () {
            this.$fetch('area-controller/realTime-get', { areaNo: '1' })
                .then(res => {
                    for (let item of res) {
                        if (item.code === '1') {
                            this.query = item.stationMap;
                            // 获取当前在线人数
                            this.onlineNum = _.clone(item.onlineNum);
                            console.log(this.onlineNum);
                            break;
                        }
                    }
                })
                .catch(error => {
                    reject(error);
                });
        },
        // 点击车辆工位
        doCarStationClick (busNub) {
            let left = window.event.clientX;
            let top = window.event.clientY;
            console.log('left', left);
            console.log('top', top);
            this.$refs.toolRef.$refs.tooltip.style.visibility = 'visible';
            this.$refs.toolRef.$refs.tooltip.style.top = `${top - 100}px`;
            this.$refs.toolRef.$refs.tooltip.style.left = `${left}px`;
            this.$fetch('area-controller/busNo-get', { busNo: busNub })
                .then(res => {
                    if (!Array.isArray(res)) {
                        this.BusInformation = _.cloneDeep(res);
                    }
                })
                .catch(error => {
                    reject(error);
                });
        },
        //  解析车体类型及车体定位样式
        judgeCarTypeAndcarStationstyle (outOrIn, station) {
            // 判断有无车体定位信息
            if (this.carPostionInfo.hasOwnProperty(station)) {
                return 'isPositioned';
            } else {
                if (outOrIn === 'OTHER') {
                    return 'carOutFactory';
                } else {
                    return '';
                }
            }
        },
        // 查询车辆定位
        getCarPostion () {
            let queryParams = { orderNo: '1111', workOrderNo: '' };
            // 请求接口
            this.$fetch('area-controller/busNo-get', { queryParams }).then(
                res => {
                    this.carPostionInfo = _.cloneDeep(res);
                }
            );
        },
        // 点击返回AVI大屏首页
        doReturnMonitorIndex () {
            this.$router.push({
                path: '/monitor/monitorIndex'
            })
        },
        // 轮询请求接口
        pollingGetInterface () {
            // 查询车辆定位
            if (
                this.$route.query.hasOwnProperty('orderNo') || this.$route.query.hasOwnProperty('workOrderNo')
            ) {
                this.getCarPostion();
            }
            // 获取钣金作业区实时信息
            this.getSheetMetalInformation();
            this.timer = setInterval(() => {
                this.carPostionInfo = {};
                // 获取钣金作业区实时信息
                this.getSheetMetalInformation();
            }, 20000);
        }
    }
};
</script>

<style lang="scss" scoped>
.page-pack {
    min-height: 100%;
    background: rgba(0, 7, 12, 1);
    position: relative;
    .onlineNum {
        position: absolute;
        right: 300px;
        top: 50px;
        color: #00b4ff;
        font-size: 16px;
        font-weight: 750;
        span {
            margin: 30px;
            font-size: 24px;
        }
    }
    .container-pack {
        position: relative;
        margin: 0 auto;
        width: 1600px;
        height: 900px;
        background: url("../../../assets/images/Monitor/monitor_sheet_metal_car.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;
            }
        }

        // 第一行
        .sheet-row-1-1 {
            left: 285px;
            top: 288px;
        }

        .sheet-row-1-2 {
            top: 288px;
            left: 575px;
        }

        .sheet-row-1-3 {
            top: 288px;
            left: 790px;
        }

        .sheet-row-1-4 {
            top: 288px;
            left: 1020px;
        }

        .sheet-row-1-5 {
            top: 288px;
            left: 1235px;
        }

        // 第二行
        .sheet-row-2-1 {
            top: 347px;
            left: 285px;
        }

        .sheet-row-2-2 {
            top: 347px;
            left: 575px;
        }

        .sheet-row-2-3 {
            top: 347px;
            left: 790px;
        }

        .sheet-row-2-4 {
            top: 347px;
            left: 1020px;
        }

        .sheet-row-2-5 {
            top: 347px;
            left: 1235px;
        }

        // 第三行
        .sheet-row-3-1 {
            top: 406px;
            left: 285px;
        }

        .sheet-row-3-2 {
            top: 406px;
            left: 575px;
        }

        .sheet-row-3-3 {
            top: 406px;
            left: 790px;
        }

        .sheet-row-3-4 {
            top: 406px;
            left: 1020px;
        }

        .sheet-row-3-5 {
            top: 406px;
            left: 1235px;
        }

        // 第四行
        .sheet-row-4-1 {
            top: 465px;
            left: 285px;
        }

        .sheet-row-4-2 {
            top: 465px;
            left: 575px;
        }

        .sheet-row-4-3 {
            top: 465px;
            left: 790px;
        }

        .sheet-row-4-4 {
            top: 465px;
            left: 1020px;
        }

        .sheet-row-4-5 {
            top: 465px;
            left: 1235px;
        }

        // 第五行
        .sheet-row-5-1 {
            top: 528px;
            left: 285px;
        }

        .sheet-row-5-2 {
            top: 528px;
            left: 575px;
        }

        .sheet-row-5-3 {
            top: 528px;
            left: 790px;
        }

        .sheet-row-5-4 {
            top: 528px;
            left: 1020px;
        }

        .sheet-row-5-5 {
            top: 528px;
            left: 1235px;
        }

        // 第六行
        .sheet-row-6-1 {
            top: 584px;
            left: 285px;
        }

        .sheet-row-6-2 {
            top: 584px;
            left: 575px;
        }

        .sheet-row-6-3 {
            top: 584px;
            left: 790px;
        }

        .sheet-row-6-4 {
            top: 584px;
            left: 1020px;
        }

        .sheet-row-6-5 {
            top: 584px;
            left: 1235px;
        }

        // 第七行
        .sheet-7-1 {
            top: 642px;
            left: 285px;
        }

        .sheet-7-2 {
            top: 642px;
            left: 579px;
        }

        // 第八行
        .sheet-8-1 {
            top: 700px;
            left: 285px;
        }

        .sheet-8-2 {
            top: 700px;
            left: 579px;
        }
        .carOutFactory {
            background: url("../../../assets/images/Monitor/monitor_car_external.png")
                no-repeat;
            background-size: 35px 18px;
            background-position: 0 16px;
        }
        .isPositioned {
            background: url("../../../assets/images/Monitor/monitor_position_car.gif")
                no-repeat;
            background-size: 35px 18px;
            background-position: 0 16px;
        }
        // 返回首页
        .return-pack {
            position: absolute;
            cursor: pointer;
            width: 450px;
            height: 90px;
            top: 0;
            left: 575px;
            background-image: none;
        }
    }
}
</style>
