<template>
    <div class="page-body">
        <div class="coat-content">
            <div class="return-pack" @click="doReturnMonitorIndex"></div>
            <div
                class="coat-row-1-1"
                @click="doCarStationClick(query['HDG1-115'].busNo)"
                v-if="query.hasOwnProperty('HDG1-115') && query['HDG1-115'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-115'].busType, 'HDG1-115')"
            >
                <p>{{query['HDG1-115'].busNo}}</p>
            </div>
            <div
                class="coat-row-1-2"
                @click="doCarStationClick(query['HDG1-116'].busNo)"
                v-if="query.hasOwnProperty('HDG1-116') && query['HDG1-116'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-116'].busType, 'HDG1-116')"
            >
                <p>{{query['HDG1-116'].busNo}}</p>
            </div>
            <div
                class="coat-row-1-3"
                @click="doCarStationClick(query['HDG1-117'].busNo)"
                v-if="query.hasOwnProperty('HDG1-117') && query['HDG1-117'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-117'].busType, 'HDG1-117')"
            >
                <p>{{query['HDG1-117']}}</p>
            </div>
            <div
                class="coat-row-1-4"
                @click="doCarStationClick(query['HDG1-118'].busNo)"
                v-if="query.hasOwnProperty('HDG1-118') && query['HDG1-118'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-118'].busType, 'HDG1-118')"
            >
                <p>{{query['HDG1-118']}}</p>
            </div>
            <div
                class="coat-row-1-5"
                @click="doCarStationClick(query['HDG1-119'].busNo)"
                v-if="query.hasOwnProperty('HDG1-119') && query['HDG1-119'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-119'].busType, 'HDG1-119')"
            >
                <p>{{query['HDG1-119'].busNo}}</p>
            </div>
            <!-- 第二行 -->
            <div
                class="coat-row-2-1"
                @click="doCarStationClick(query['HDG1-120'].busNo)"
                v-if="query.hasOwnProperty('HDG1-120') && query['HDG1-120'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-120'].busType, 'HDG1-120')"
            >
                <p>{{query['HDG1-120'].busNo}}</p>
            </div>
            <div
                class="coat-row-2-2"
                @click="doCarStationClick(query['HDG1-121'].busNo)"
                v-if="query.hasOwnProperty('HDG1-121') && query['HDG1-121'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-121'].busType, 'HDG1-121')"
            >
                <p>{{query['HDG1-121'].busNo}}</p>
            </div>
            <div
                class="coat-row-2-3"
                @click="doCarStationClick(query['HDG1-122'].busNo)"
                v-if="query.hasOwnProperty('HDG1-122') && query['HDG1-122'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-122'].busType, 'HDG1-122')"
            >
                <p>{{query['HDG1-122'].busNo}}</p>
            </div>
            <div
                class="coat-row-2-4"
                @click="doCarStationClick(query['HDG1-123'].busNo)"
                v-if="query.hasOwnProperty('HDG1-123') && query['HDG1-123'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-123'].busType, 'HDG1-123')"
            >
                <p>{{query['HDG1-123'].busNo}}</p>
            </div>
            <div
                class="coat-row-2-5"
                @click="doCarStationClick(query['HDG1-124'].busNo)"
                v-if="query.hasOwnProperty('HDG1-124') && query['HDG1-124'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-124'].busType, 'HDG1-124')"
            >
                <p>{{query['HDG1-124'].busNo}}</p>
            </div>
            <div
                class="coat-row-2-6"
                @click="doCarStationClick(query['HDG5-18'].busNo)"
                v-if="query.hasOwnProperty('HDG5-18') && query['HDG5-18'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG5-18'].busType, 'HDG5-18')"
            >
                <p>{{query['HDG5-18']}}</p>
            </div>
            <!-- 第三行 -->
            <div
                class="coat-row-3-1"
                @click="doCarStationClick(query['HDG1-125'].busNo)"
                v-if="query.hasOwnProperty('HDG1-125') && query['HDG1-125'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-125'].busType, 'HDG1-125')"
            >
                <p>{{query['HDG1-125'].busNo}}</p>
            </div>
            <div
                class="coat-row-3-2"
                @click="doCarStationClick(query['HDG1-126'].busNo)"
                v-if="query.hasOwnProperty('HDG1-126') && query['HDG1-126'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-126'].busType, 'HDG1-126')"
            >
                <p>{{query['HDG1-126'].busNo}}</p>
            </div>
            <div
                class="coat-row-3-3"
                @click="doCarStationClick(query['HDG1-127'].busNo)"
                v-if="query.hasOwnProperty('HDG1-127') && query['HDG1-127'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-127'].busType, 'HDG1-127')"
            >
                <p>{{query['HDG1-127'].busNo}}</p>
            </div>
            <div
                class="coat-row-3-4"
                @click="doCarStationClick(query['HDG1-128'].busNo)"
                v-if="query.hasOwnProperty('HDG1-128') && query['HDG1-128'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-128'].busType, 'HDG1-128')"
            >
                <p>{{query['HDG1-128'].busNo}}</p>
            </div>
            <div
                class="coat-row-3-5"
                @click="doCarStationClick(query['HDG1-129'].busNo)"
                v-if="query.hasOwnProperty('HDG1-129') && query['HDG1-129'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-129'].busType, 'HDG1-129')"
            >
                <p>{{query['HDG1-129'].busNo}}</p>
            </div>
            <div
                class="coat-row-3-6"
                @click="doCarStationClick(query['HDG5-19'].busNo)"
                v-if="query.hasOwnProperty('HDG5-19') && query['HDG5-19'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG5-19'].busType, 'HDG5-19')"
            >
                <p>{{query['HDG5-19'].busNo}}</p>
            </div>
            <!-- 第四行 -->
            <div
                class="coat-row-4-1"
                @click="doCarStationClick(query['HDG1-130'].busNo)"
                v-if="query.hasOwnProperty('HDG1-130') && query['HDG1-130'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-130'].busType, 'HDG1-130')"
            >
                <p>{{query['HDG1-130'].busNo}}</p>
            </div>
            <div
                class="coat-row-4-2"
                @click="doCarStationClick(query['HDG1-131'].busNo)"
                v-if="query.hasOwnProperty('HDG1-131') && query['HDG1-131'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-131'].busType, 'HDG1-131')"
            >
                <p>{{query['HDG1-131'].busNo}}</p>
            </div>
            <div
                class="coat-row-4-3"
                @click="doCarStationClick(query['HDG1-132'].busNo)"
                v-if="query.hasOwnProperty('HDG1-132') && query['HDG1-132'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-132'].busType, 'HDG1-132')"
            >
                <p>{{query['HDG1-132'].busNo}}</p>
            </div>
            <div
                class="coat-row-4-4"
                @click="doCarStationClick(query['HDG1-133'].busNo)"
                v-if="query.hasOwnProperty('HDG1-133') && query['HDG1-133'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-133'].busType, 'HDG1-133')"
            >
                <p>{{query['HDG1-133'].busNo}}</p>
            </div>
            <div
                class="coat-row-4-5"
                @click="doCarStationClick(query['HDG5-20'].busNo)"
                v-if="query.hasOwnProperty('HDG5-20') && query['HDG5-20'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG5-20'].busType, 'HDG5-20')"
            >
                <p>{{query['HDG5-20'].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: 'MonitorMiddleCoat',
    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: {
        // 获取中涂作业区实时信息
        getMiddleCoatInformation () {
            this.$fetch('area-controller/realTime-get', { areaNo: '5' }).then(
                res => {
                    for (let item of res) {
                        if (item.code === '5') {
                            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.getMiddleCoatInformation();
            this.timer = setInterval(() => {
                this.carPostionInfo = {};
                // 获取电泳作业区实时信息
                this.getMiddleCoatInformation();
            }, 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;
        }
    }
    .coat-content {
        position: relative;
        margin: 0 auto;
        width: 1600px;
        height: 900px;
        background: url("../../../assets/images/Monitor/coat-bg.png") no-repeat;

        .coat-row-1-1,
        .coat-row-1-2,
        .coat-row-1-3,
        .coat-row-1-4,
        .coat-row-1-5,
        .coat-row-2-1,
        .coat-row-2-2,
        .coat-row-2-3,
        .coat-row-2-4,
        .coat-row-2-5,
        .coat-row-2-6,
        .coat-row-3-1,
        .coat-row-3-2,
        .coat-row-3-3,
        .coat-row-3-4,
        .coat-row-3-5,
        .coat-row-3-6,
        .coat-row-4-1,
        .coat-row-4-2,
        .coat-row-4-3,
        .coat-row-4-4,
        .coat-row-4-5 {
            position: absolute;
            width: 105px;
            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: 12px;
                margin: 0;
                color: #ffffff;
                font-weight: bold;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }

        // ? 第一行 top
        .coat-row-1-1,
        .coat-row-1-2,
        .coat-row-1-3,
        .coat-row-1-4,
        .coat-row-1-5 {
            top: 355px;
        }
        // ? 第一行 left
        .coat-row-1-1,
        .coat-row-3-1,
        .coat-row-4-1 {
            left: 172px;
        }
        .coat-row-1-2,
        .coat-row-3-2 {
            left: 348px;
        }
        .coat-row-1-3,
        .coat-row-3-3,
        .coat-row-4-2 {
            left: 533px;
        }
        .coat-row-1-4,
        .coat-row-3-4 {
            left: 713px;
        }
        .coat-row-1-5,
        .coat-row-3-5 {
            left: 893px;
        }

        // ?第二行 top
        .coat-row-2-1,
        .coat-row-2-2,
        .coat-row-2-3,
        .coat-row-2-4,
        .coat-row-2-5,
        .coat-row-2-6 {
            top: 425px;
        }
        // ?第二行 left
        .coat-row-2-1 {
            left: 217px;
        }
        .coat-row-2-2 {
            left: 395px;
        }
        .coat-row-2-3 {
            left: 575px;
        }
        .coat-row-2-4,
        .coat-row-4-3 {
            left: 755px;
        }
        .coat-row-2-5,
        .coat-row-4-4 {
            left: 935px;
        }
        .coat-row-2-6 {
            left: 1260px;
        }

        // ?第三行 top
        .coat-row-3-1,
        .coat-row-3-2,
        .coat-row-3-3,
        .coat-row-3-4,
        .coat-row-3-5 {
            top: 495px;
        }
        .coat-row-3-6 {
            top: 515px;
        }
        .coat-row-3-6 {
            left: 1260px;
        }

        // ?第四行 top
        .coat-row-4-1 {
            top: 569px;
        }
        .coat-row-4-2,
        .coat-row-4-3,
        .coat-row-4-4 {
            top: 589px;
        }
        .coat-row-4-5 {
            top: 603px;
            left: 1260px;
        }
        .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>
