<template>
    <!-- 腻子作业区 -->
    <div class="page-body">
        <div class="putty-content">
            <div class="return-pack" @click="doReturnMonitorIndex"></div>
            <div
                class="putty-row-1-1"
                @click="doCarStationClick(query['HDG1-95'].busNo)"
                v-if="query.hasOwnProperty('HDG1-95') && query['HDG1-95'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-95'].busType, 'HDG1-95')"
            >
                <p>{{ query['HDG1-95'].busNo }}</p>
            </div>
            <div
                class="putty-row-1-2"
                @click="doCarStationClick(query['HDG1-96'].busNo)"
                v-if="query.hasOwnProperty('HDG1-96') && query['HDG1-96'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-96'].busType, 'HDG1-96')"
            >
                <p>{{query['HDG1-96'].busNo}}</p>
            </div>
            <div
                class="putty-row-1-3"
                @click="doCarStationClick(query['HDG1-97'].busNo)"
                v-if="query.hasOwnProperty('HDG1-97') && query['HDG1-97'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-97'].busType, 'HDG1-97')"
            >
                <p>{{query['HDG1-97'].busNo}}</p>
            </div>
            <div
                class="putty-row-1-4"
                @click="doCarStationClick(query['HDG1-98'].busNo)"
                v-if="query.hasOwnProperty('HDG1-98') && query['HDG1-98'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-98'].busType, 'HDG1-98')"
            >
                <p>{{query['HDG1-98'].busNo}}</p>
            </div>
            <div
                class="putty-row-1-5"
                @click="doCarStationClick(query['HDG1-99'].busNo)"
                v-if="query.hasOwnProperty('HDG1-99') && query['HDG1-99'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-99'].busType, 'HDG1-99')"
            >
                <p>{{query['HDG1-99'].busNo}}</p>
            </div>
            <div
                class="putty-row-1-6"
                @click="doCarStationClick(query['HDG5-13'].busNo)"
                v-if="query.hasOwnProperty('HDG5-13') && query['HDG5-13'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG5-13'].busType, 'HDG5-13')"
            >
                <p>{{query['HDG5-13'].busNo}}</p>
            </div>
            <div
                class="putty-row-2-1"
                @click="doCarStationClick(query['HDG1-100'].busNo)"
                v-if="query.hasOwnProperty('HDG1-100') && query['HDG1-100'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-100'].busType, 'HDG1-100')"
            >
                <p>{{query['HDG1-100'].busNo}}</p>
            </div>
            <div
                class="putty-row-2-2"
                @click="doCarStationClick(query['HDG1-101'].busNo)"
                v-if="query.hasOwnProperty('HDG1-101') && query['HDG1-101'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-101'].busType, 'HDG1-101')"
            >
                <p>{{query['HDG1-101'].busNo}}</p>
            </div>
            <div
                class="putty-row-2-3"
                @click="doCarStationClick(query['HDG1-102'].busNo)"
                v-if="query.hasOwnProperty('HDG1-102') && query['HDG1-102'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-102'].busType, 'HDG1-102')"
            >
                <p>{{query['HDG1-102'].busNo}}</p>
            </div>
            <div
                class="putty-row-2-4"
                @click="doCarStationClick(query['HDG1-103'].busNo)"
                v-if="query.hasOwnProperty('HDG1-103') && query['HDG1-103'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-103'].busType, 'HDG1-103')"
            >
                <p>{{query['HDG1-103'].busNo}}</p>
            </div>
            <div
                class="putty-row-2-5"
                @click="doCarStationClick(query['HDG1-104'].busNo)"
                v-if="query.hasOwnProperty('HDG1-104') && query['HDG1-104'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-104'].busType, 'HDG1-104')"
            >
                <p>{{query['HDG1-104'].busNo}}</p>
            </div>
            <div
                class="putty-row-2-6"
                @click="doCarStationClick(query['HDG5-14'].busNo)"
                v-if="query.hasOwnProperty('HDG5-14') && query['HDG5-14'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG5-14'].busType, 'HDG5-14')"
            >
                <p>{{query['HDG5-14'].busNo}}</p>
            </div>
            <div
                class="putty-row-3-1"
                @click="doCarStationClick(query['HDG1-105'].busNo)"
                v-if="query.hasOwnProperty('HDG1-105') && query['HDG1-105'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-105'].busType, 'HDG1-105')"
            >
                <p>{{query['HDG1-105'].busNo}}</p>
            </div>
            <div
                class="putty-row-3-2"
                @click="doCarStationClick(query['HDG1-106'].busNo)"
                v-if="query.hasOwnProperty('HDG1-106') && query['HDG1-106'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-106'].busType, 'HDG1-106')"
            >
                <p>{{query['HDG1-106'].busNo}}</p>
            </div>
            <div
                class="putty-row-3-3"
                @click="doCarStationClick(query['HDG1-107'].busNo)"
                v-if="query.hasOwnProperty('HDG1-107') && query['HDG1-107'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-107'].busType, 'HDG1-107')"
            >
                <p>{{query['HDG1-107'].busNo}}</p>
            </div>
            <div
                class="putty-row-3-4"
                @click="doCarStationClick(query['HDG1-108'].busNo)"
                v-if="query.hasOwnProperty('HDG1-108') && query['HDG1-108'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-108'].busType, 'HDG1-108')"
            >
                <p>{{query['HDG1-108'].busNo}}</p>
            </div>
            <div
                class="putty-row-3-5"
                @click="doCarStationClick(query['HDG1-109'].busNo)"
                v-if="query.hasOwnProperty('HDG1-109') && query['HDG1-109'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-109'].busType, 'HDG1-109')"
            >
                <p>{{query['HDG1-109'].busNo}}</p>
            </div>
            <div
                class="putty-row-3-6"
                @click="doCarStationClick(query['HDG5-15'].busNo)"
                v-if="query.hasOwnProperty('HDG5-15') && query['HDG5-15'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG5-15'].busType, 'HDG5-15')"
            >
                <p>{{query['HDG5-15'].busNo}}</p>
            </div>
            <div
                class="putty-row-4-1"
                @click="doCarStationClick(query['HDG1-110'].busNo)"
                v-if="query.hasOwnProperty('HDG1-110') && query['HDG1-110'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-110'].busType, 'HDG1-110')"
            >
                <p>{{query['HDG1-110'].busNo}}</p>
            </div>
            <div
                class="putty-row-4-2"
                @click="doCarStationClick(query['HDG1-111'].busNo)"
                v-if="query.hasOwnProperty('HDG1-111') && query['HDG1-111'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-111'].busType, 'HDG1-111')"
            >
                <p>{{query['HDG1-111'].busNo}}</p>
            </div>
            <div
                class="putty-row-4-3"
                @click="doCarStationClick(query['HDG1-112'].busNo)"
                v-if="query.hasOwnProperty('HDG1-112') && query['HDG1-112'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-112'].busType, 'HDG1-112')"
            >
                <p>{{query['HDG1-112'].busNo}}</p>
            </div>
            <div
                class="putty-row-4-4"
                @click="doCarStationClick(query['HDG1-113'].busNo)"
                v-if="query.hasOwnProperty('HDG1-113') && query['HDG1-113'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-113'].busType, 'HDG1-113')"
            >
                <p>{{query['HDG1-113'].busNo}}</p>
            </div>
            <div
                class="putty-row-4-5"
                @click="doCarStationClick(query['HDG1-114'].busNo)"
                v-if="query.hasOwnProperty('HDG1-114') && query['HDG1-114'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-114'].busType, 'HDG1-114')"
            >
                <p>{{query['HDG1-114'].busNo}}</p>
            </div>
            <div
                class="putty-row-4-6"
                @click="doCarStationClick(query['HDG5-16'].busNo)"
                v-if="query.hasOwnProperty('HDG5-16') && query['HDG5-16'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG5-16'].busType, 'HDG5-16')"
            >
                <p>{{query['HDG5-16'].busNo}}</p>
            </div>
            <div
                class="putty-row-5-6"
                @click="doCarStationClick(query['HDG5-17'].busNo)"
                v-if="query.hasOwnProperty('HDG5-17') && query['HDG5-17'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG5-17'].busType, 'HDG5-17')"
            >
                <p>{{query['HDG5-17'].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>
/**
 * @author MARS 2019-09-28 <wangyunfan@vtstar.net>
 * @fileoverview 腻子作业区
 */
import Tooltip from './Tooltip';
export default {
    name: 'MonitorPutty',
    components: {
        Tooltip
    },
    data () {
        return {
            // 定时器
            timer: null,
            // 腻子作业区实时信息
            query: {},
            // 根据车身号获取当前车体区域信息
            BusInformation: {},
            // 车辆定位数据
            carPostionInfo: {},
            // 当前在线人数
            onlineNum: null
        };
    },

    mounted () {
        this.pollingGetInterface();
    },

    methods: {
        // 获取腻子作业区实时信息
        getPuttyInformation () {
            this.$fetch('area-controller/realTime-get', { areaNo: '4' })
                .then(res => {
                    for (let item of res) {
                        if (item.code === '4') {
                            this.query = item.stationMap;
                            // 获取当前在线人数
                            this.onlineNum = _.clone(item.onlineNum);
                            console.log(this.onlineNum);
                            break;
                        }
                    }
                })
                .catch(error => {
                    reject(error);
                });
        },
        //  解析车体类型及车体定位样式
        judgeCarTypeAndcarStationstyle (outOrIn, station) {
            // 判断有无车体定位信息
            if (this.carPostionInfo.hasOwnProperty(station)) {
                return 'isPositioned';
            } else {
                if (outOrIn === 'OTHER') {
                    return 'carOutFactory';
                } else {
                    return '';
                }
            }
        },
        // 点击车辆工位
        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);
                });
        },
        // 查询车辆定位
        getCarPostion () {
            let queryParams = { orderNo: '', 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.getPuttyInformation();
            this.timer = setInterval(() => {
                this.carPostionInfo = {};
                // 获取腻子作业区实时信息
                this.getPuttyInformation();
            }, 20000);
        }
    }
};
</script>
<style lang="scss" scoped>
.page-body {
    min-height: 100%;
    background: rgba(0, 7, 12, 1);
    .onlineNum {
        position: absolute;
        right: 300px;
        top: 50px;
        color: #00b4ff;
        font-size: 16px;
        font-weight: 750;
        span {
            margin: 30px;
            font-size: 24px;
        }
    }
    .putty-content {
        position: relative;
        margin: 0 auto;
        width: 1600px;
        height: 900px;
        background: url("../../../assets/images/Monitor/putty-bg.png") no-repeat;

        // ? 公共样式
        .putty-row-1-1,
        .putty-row-1-2,
        .putty-row-1-3,
        .putty-row-1-4,
        .putty-row-1-5,
        .putty-row-1-6,
        .putty-row-2-1,
        .putty-row-2-2,
        .putty-row-2-3,
        .putty-row-2-4,
        .putty-row-2-5,
        .putty-row-2-6,
        .putty-row-3-1,
        .putty-row-3-2,
        .putty-row-3-3,
        .putty-row-3-4,
        .putty-row-3-5,
        .putty-row-3-6,
        .putty-row-4-1,
        .putty-row-4-2,
        .putty-row-4-3,
        .putty-row-4-4,
        .putty-row-4-5,
        .putty-row-4-6,
        .putty-row-5-6 {
            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;
            }
        }

        // ? 第一行top定位
        .putty-row-1-1,
        .putty-row-1-2,
        .putty-row-1-3,
        .putty-row-1-4,
        .putty-row-1-5,
        .putty-row-1-6 {
            top: 308px;
        }

        // ?第二行top定位
        .putty-row-2-1,
        .putty-row-2-2,
        .putty-row-2-3,
        .putty-row-2-4,
        .putty-row-2-5,
        .putty-row-2-6 {
            top: 398px;
        }

        // ?第三行top定位
        .putty-row-3-1,
        .putty-row-3-2,
        .putty-row-3-3,
        .putty-row-3-4,
        .putty-row-3-5,
        .putty-row-3-6 {
            top: 485px;
        }

        // ?第四行top定位
        .putty-row-4-1,
        .putty-row-4-2,
        .putty-row-4-3,
        .putty-row-4-4,
        .putty-row-4-5,
        .putty-row-4-6 {
            top: 575px;
        }

        // ?一， 二行left定位
        .putty-row-1-1,
        .putty-row-2-1 {
            left: 170px;
        }
        .putty-row-1-2,
        .putty-row-2-2 {
            left: 400px;
        }
        .putty-row-1-3,
        .putty-row-2-3 {
            left: 575px;
        }
        .putty-row-1-4,
        .putty-row-2-4 {
            left: 755px;
        }
        .putty-row-1-5,
        .putty-row-2-5 {
            left: 891px;
        }
        .putty-row-1-6,
        .putty-row-2-6 {
            left: 1256px;
        }

        // ?三， 四行left定位
        .putty-row-3-1,
        .putty-row-4-1 {
            left: 220px;
        }
        .putty-row-3-2,
        .putty-row-4-2 {
            left: 355px;
        }
        .putty-row-3-3,
        .putty-row-4-3 {
            left: 575px;
        }
        .putty-row-3-4,
        .putty-row-4-4 {
            left: 710px;
        }
        .putty-row-3-5,
        .putty-row-4-5 {
            left: 891px;
        }
        .putty-row-3-6,
        .putty-row-4-6,
        .putty-row-5-6 {
            left: 1256px;
        }
        .putty-row-5-6 {
            top: 655px;
        }
        .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>
