<template>
    <!-- 成品车存放区 -->
    <div class="page-pack">
        <div class="container-pack">
            <div class="return-pack" @click="doReturnMonitorIndex"></div>
            <!-- 第一行 -->
            <div
                class="finished-row-1-1"
                @click="doCarStationClick(query['HDG1-147'].busNo)"
                v-if="query.hasOwnProperty('HDG1-147') && query['HDG1-147'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-147'].busType, 'HDG1-147')"
            >
                <p>{{query['HDG1-147'].busNo}}</p>
            </div>
            <div
                class="finished-row-1-2"
                @click="doCarStationClick(query['HDG1-163'].busNo)"
                v-if="query.hasOwnProperty('HDG1-163') && query['HDG1-163'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-163'].busType, 'HDG1-163')"
            >
                <p>{{query['HDG1-163'].busNo}}</p>
            </div>
            <div
                class="finished-row-1-3"
                @click="doCarStationClick(query['HDG1-205'].busNo)"
                v-if="query.hasOwnProperty('HDG1-205') && query['HDG1-205'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-205'].busType, 'HDG1-205')"
            >
                <p>{{query['HDG1-205'].busNo}}</p>
            </div>
            <div
                class="finished-row-1-4"
                @click="doCarStationClick(query['HDG1-206'].busNo)"
                v-if="query.hasOwnProperty('HDG1-206') && query['HDG1-206'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-206'].busType, 'HDG1-206')"
            >
                <p>{{query['HDG1-206'].busNo}}</p>
            </div>
            <div
                class="finished-row-1-5"
                @click="doCarStationClick(query['HDG1-207'].busNo)"
                v-if="query.hasOwnProperty('HDG1-207') && query['HDG1-207'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-207'].busType, 'HDG1-207')"
            >
                <p>{{query['HDG1-207'].busNo}}</p>
            </div>
            <!-- 第二行 -->
            <div
                class="finished-row-2-1"
                @click="doCarStationClick(query['HDG1-148'].busNo)"
                v-if="query.hasOwnProperty('HDG1-148') && query['HDG1-148'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-148'].busType, 'HDG1-148')"
            >
                <p>{{query['HDG1-148'].busNo}}</p>
            </div>
            <div
                class="finished-row-2-2"
                @click="doCarStationClick(query['HDG1-164'].busNo)"
                v-if="query.hasOwnProperty('HDG1-164') && query['HDG1-164'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-164'].busType, 'HDG1-164')"
            >
                <p>{{query['HDG1-164'].busNo}}</p>
            </div>
            <div
                class="finished-row-2-3"
                @click="doCarStationClick(query['HDG1-208'].busNo)"
                v-if="query.hasOwnProperty('HDG1-208') && query['HDG1-208'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-208'].busType, 'HDG1-208')"
            >
                <p>{{query['HDG1-208'].busNo}}</p>
            </div>
            <div
                class="finished-row-2-4"
                @click="doCarStationClick(query['HDG1-209'].busNo)"
                v-if="query.hasOwnProperty('HDG1-209') && query['HDG1-209'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-209'].busType, 'HDG1-209')"
            >
                <p>{{query['HDG1-209'].busNo}}</p>
            </div>
            <div
                class="finished-row-2-5"
                @click="doCarStationClick(query['HDG1-210'].busNo)"
                v-if="query.hasOwnProperty('HDG1-210') && query['HDG1-210'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-210'].busType, 'HDG1-210')"
            >
                <p>{{query['HDG1-210'].busNo}}</p>
            </div>
            <!-- 第三行 -->
            <div
                class="finished-row-3-1"
                @click="doCarStationClick(query['HDG1-149'].busNo)"
                v-if="query.hasOwnProperty('HDG1-149') && query['HDG1-149'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-149'].busType, 'HDG1-149')"
            >
                <p>{{query['HDG1-149'].busNo}}</p>
            </div>
            <div
                class="finished-row-3-2"
                @click="doCarStationClick(query['HDG1-165'].busNo)"
                v-if="query.hasOwnProperty('HDG1-165') && query['HDG1-165'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-165'].busType, 'HDG1-165')"
            >
                <p>{{query['HDG1-165'].busNo}}</p>
            </div>
            <div
                class="finished-row-3-3"
                @click="doCarStationClick(query['HDG1-211'].busNo)"
                v-if="query.hasOwnProperty('HDG1-211') && query['HDG1-211'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-211'].busType, 'HDG1-211')"
            >
                <p>{{query['HDG1-211'].busNo}}</p>
            </div>
            <div
                class="finished-row-3-4"
                @click="doCarStationClick(query['HDG1-212'].busNo)"
                v-if="query.hasOwnProperty('HDG1-212') && query['HDG1-212'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-212'].busType, 'HDG1-212')"
            >
                <p>{{query['HDG1-212'].busNo}}</p>
            </div>
            <div
                class="finished-row-3-5"
                @click="doCarStationClick(query['HDG1-213'].busNo)"
                v-if="query.hasOwnProperty('HDG1-213') && query['HDG1-213'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-213'].busType, 'HDG1-213')"
            >
                <p>{{query['HDG1-213'].busNo}}</p>
            </div>
            <!-- 涂装车出 -->
            <div
                class="paint-car-out"
                @click="doCarStationClick(query['HXG2-1'].busNo)"
                v-if="query.hasOwnProperty('HXG2-1') && query['HXG2-1'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HXG2-1'].busType, 'HXG2-1')"
            >
                <p>{{query['HXG2-1'].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: 'MonitorFinishedCar',
    components: {
        Tooltip
    },
    data () {
        return {
            // 成品车作业区实时信息
            query: {},
            // 轮询定时器
            timer: {},
            // 当前在线人数
            onlineNum: null,
            // 车辆定位数据
            carPostionInfo: {},
            // 根据车身号获得当前车体信息
            BusInformation: {
                saleOrderNo: '2019-10-11 11:09',
                planOrderNo: '83848484',
                code: 'EDSCSFDGVG',
                busType: 'car',
                orderSize: '2222222255555550',
                unit: 'From China',
                shop: '二号车间',
                line: '4-25'
            }
        };
    },
    mounted () {
        this.pollingGetInterface();
    },
    beforeDestroy () {
        clearInterval(this.timer);
    },
    methods: {
        // 获取成品车作业区实时信息
        getFinishedCarInformation () {
            this.$fetch('area-controller/realTime-get', { areaNo: '7' }).then(
                res => {
                    console.log(res);
                    for (let item of res) {
                        if (item.code === '7') {
                            this.query = item.stationMap;
                            // 获取当前在线人数
                            this.onlineNum = _.clone(item.onlineNum);
                            console.log(this.onlineNum);
                            break;
                        }
                    }
                }
            );
        },
        // 点击车位弹出车体信息
        doCarStationClick (row) {
            console.log(row);
            this.$refs.toolRef.$refs.tooltip.style.visibility = 'visible';
            let left = window.event.clientX;
            let top = window.event.clientY;
            this.$refs.toolRef.$refs.tooltip.style.top = top - 100 + 'px';
            this.$refs.toolRef.$refs.tooltip.style.left = left - 100 + 'px';
            this.$fetch('area-controller/busNo-get', { busNo: row })
                .then(res => {
                    console.log('res', 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.getFinishedCarInformation();
            this.timer = setInterval(() => {
                this.carPostionInfo = {};
                // 获取成品车作业区实时信息
                this.getFinishedCarInformation();
            }, 20000);
        }
    }
};
</script>

<style lang="scss" scoped>
.page-pack {
    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;
        }
    }
    .container-pack {
        position: relative;
        margin: 0 auto;
        width: 1600px;
        height: 900px;
        background: url("../../../assets/images/Monitor/monitor_finished_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;
            }
        }

        // 第一行
        .finished-row-1-1 {
            top: 395px;
            left: 200px;
        }
        .finished-row-1-2 {
            top: 395px;
            left: 365px;
        }
        .finished-row-1-3 {
            top: 395px;
            left: 680px;
        }
        .finished-row-1-4 {
            top: 395px;
            left: 830px;
        }
        .finished-row-1-5 {
            top: 395px;
            left: 1010px;
        }

        // 第二行
        .finished-row-2-1 {
            top: 442px;
            left: 200px;
        }
        .finished-row-2-2 {
            top: 442px;
            left: 365px;
        }
        .finished-row-2-3 {
            top: 442px;
            left: 680px;
        }
        .finished-row-2-4 {
            top: 442px;
            left: 830px;
        }
        .finished-row-2-5 {
            top: 442px;
            left: 1010px;
        }

        // 第三行
        .finished-row-3-1 {
            top: 495px;
            left: 200px;
        }
        .finished-row-3-2 {
            top: 495px;
            left: 365px;
        }
        .finished-row-3-3 {
            top: 495px;
            left: 680px;
        }
        .finished-row-3-4 {
            top: 495px;
            left: 830px;
        }
        .finished-row-3-5 {
            top: 495px;
            left: 1010px;
        }

        // 涂装车出
        .paint-car-out {
            top: 435px;
            left: 1325px;
        }
        .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>
