<template>
    <!-- 电泳工作区 -->
    <div class="page-pack">
        <div class="elect-content">
            <!-- 第 1 行 -->
            <div
                class="elect-row-1-1"
                @click="clickBtn(query['STC1-1'].busNo)"
                v-if="query.hasOwnProperty('STC1-1') && query['STC1-1'].state !== 'N'"
                :class="judgeCarTypeAndcarStationstyle(query['STC1-1'].busType, 'STC1-1')"
            >
                <p>{{query['STC1-1'].busNo}}</p>
            </div>
            <div
                class="elect-row-1-2"
                @click="clickBtn()"
                v-if="query.hasOwnProperty('STC1-8') && query['STC1-8'].state !== 'N'"
                :class="judgeCarTypeAndcarStationstyle(query['STC1-8'].busType, 'STC1-8')"
            >
                <p>{{query['STC1-8'].busNo}}</p>
            </div>
            <div
                class="elect-row-1-3"
                v-if="query.hasOwnProperty('HDG1-31') && query['HDG1-31'].state !== 'N'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-31'].busType, 'HDG1-31')"
            >
                <p>{{query['HDG1-31'].busNo}}</p>
            </div>
            <!-- 第 2 行 -->
            <div
                class="elect-row-2-1"
                v-if="query['HDG1-31'].state==='Y'?true:false"
                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
            >
                <p>{{query['HDG1-31'].busNo}}</p>
            </div>
            <div
                class="elect-row-2-2"
                v-if="query['HDG1-31'].state==='Y'?true:false"
                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
            >
                <p>{{query['HDG1-31'].busNo}}</p>
            </div>
            <div
                class="elect-row-2-3"
                v-if="query['HDG1-31'].state==='Y'?true:false"
                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
            >
                <p>CDA11323</p>
            </div>
            <!-- 第 3 行 -->
            <div
                class="elect-row-3-1"
                v-if="query['HDG1-31'].state==='Y'?true:false"
                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
            >
                <p>CDA11323</p>
            </div>
            <div
                class="elect-row-3-2"
                v-if="query['HDG1-31'].state==='Y'?true:false"
                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
            >
                <p>CDA11323</p>
            </div>
            <div
                class="elect-row-3-3"
                v-if="query['HDG1-31'].state==='Y'?true:false"
                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
            >
                <p>CDA11323</p>
            </div>
            <!-- 第 4 行 -->
            <div
                class="elect-row-4-1"
                v-if="query['HDG1-31'].state==='Y'?true:false"
                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
            >
                <p>CDA11323</p>
            </div>
            <div
                class="elect-row-4-2"
                v-if="query['HDG1-31'].state==='Y'?true:false"
                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
            >
                <p>CDA11323</p>
            </div>
            <div
                class="elect-row-4-3"
                v-if="query['HDG1-31'].state==='Y'?true:false"
                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
            >
                <p>CDA11323</p>
            </div>
            <!-- 第 5 行 -->
            <div
                class="elect-row-5-1"
                v-if="query['HDG1-31'].state==='Y'?true:false"
                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
            >
                <p>CDA11323</p>
            </div>
            <div
                class="elect-row-5-2"
                v-if="query['HDG1-31'].state==='Y'?true:false"
                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
            >
                <p>CDA11323</p>
            </div>
            <div
                class="elect-row-5-3"
                v-if="query['HDG1-31'].state==='Y'?true:false"
                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
            >
                <p>CDA11323</p>
            </div>
            <!-- 第 6 行 -->
            <div
                class="elect-row-6-1"
                v-if="query['HDG1-31'].state==='Y'?true:false"
                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
            >
                <p>CDA11323</p>
            </div>
            <div
                class="elect-row-6-2"
                v-if="query['HDG1-31'].state==='Y'?true:false"
                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
            >
                <p>CDA11323</p>
            </div>
            <div
                class="elect-row-6-3"
                v-if="query['HDG1-31'].state==='Y'?true:false"
                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
            >
                <p>CDA11323</p>
            </div>
            <!-- 6.5行 -->
            <div
                class="elect-row-6-4"
                v-if="query['HDG1-31'].state==='Y'?true:false"
                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
            >
                <p>CDA11323</p>
            </div>
            <!-- 第 7 行 -->
            <div
                class="elect-row-7-1"
                v-if="query['HDG1-31'].state==='Y'?true:false"
                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
            >
                <p>CDA11323</p>
            </div>
            <div
                class="elect-row-7-2"
                v-if="query['HDG1-31'].state==='Y'?true:false"
                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
            >
                <p>CDA11323</p>
            </div>
            <div
                class="elect-row-7-3"
                v-if="query['HDG1-31'].state==='Y'?true:false"
                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
            >
                <p>CDA11323</p>
            </div>
            <!-- 第 8 行 -->
            <div
                class="elect-row-8-1"
                v-if="query['HDG1-31'].state==='Y'?true:false"
                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
            >
                <p>CDA11323</p>
            </div>
            <div
                class="elect-row-8-2"
                v-if="query['HDG1-31'].state==='Y'?true:false"
                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
            >
                <p>CDA11323</p>
            </div>
            <div
                class="elect-row-8-3"
                v-if="query['HDG1-31'].state==='Y'?true:false"
                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
            >
                <p>CDA11323</p>
            </div>
            <!-- 第 9 行 -->
            <div
                class="elect-row-9-1"
                v-if="query['HDG1-31'].state==='Y'?true:false"
                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
            >
                <p>CDA11323</p>
            </div>
            <div
                class="elect-row-9-2"
                v-if="query['HDG1-31'].state==='Y'?true:false"
                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
            >
                <p>CDA11323</p>
            </div>
            <div
                class="elect-row-9-3"
                v-if="query['HDG1-31'].state==='Y'?true:false"
                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
            >
                <p>CDA11323</p>
            </div>
            <div
                class="elect-row-9-4"
                v-if="query['HDG1-31'].state==='Y'?true:false"
                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
            >
                <p>CDA11323</p>
            </div>
            <!-- 第 10 行 -->
            <div
                class="elect-row-10-1"
                v-if="query['HDG1-31'].state==='Y'?true:false"
                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
            >
                <p>CDA11323</p>
            </div>
            <div
                class="elect-row-10-2"
                v-if="query['HDG1-31'].state==='Y'?true:false"
                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
            >
                <p>CDA11323</p>
            </div>
            <div
                class="elect-row-10-3"
                v-if="query['HDG1-31'].state==='Y'?true:false"
                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
            >
                <p>CDA11323</p>
            </div>
            <div
                class="elect-row-10-4"
                v-if="query['HDG1-31'].state==='Y'?true:false"
                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
            >
                <p>CDA11323</p>
            </div>
            <div
                class="elect-row-10-5"
                v-if="query['HDG1-31'].state==='Y'?true:false"
                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
            >
                <p>CDA11323</p>
            </div>
            <!-- 第 11 行 -->
            <div
                class="elect-row-11-1"
                v-if="query['HDG1-31'].state==='Y'?true:false"
                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
            >
                <p>CDA11323</p>
            </div>
            <div
                class="elect-row-11-2"
                v-if="query['HDG1-31'].state==='Y'?true:false"
                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
            >
                <p>CDA11323</p>
            </div>
            <div
                class="elect-row-11-3"
                v-if="query['HDG1-31'].state==='Y'?true:false"
                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
            >
                <p>CDA11323</p>
            </div>
            <div
                class="elect-row-11-4"
                v-if="query['HDG1-31'].state==='Y'?true:false"
                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
            >
                <p>CDA11323</p>
            </div>
            <div
                class="elect-row-11-5"
                v-if="query['HDG1-31'].state==='Y'?true:false"
                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
            >
                <p>CDA11323</p>
            </div>
            <!-- 第 12 行 -->
            <div
                class="elect-row-12-1"
                v-if="query['HDG1-31'].state==='Y'?true:false"
                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
            >
                <p>CDA11323</p>
            </div>
            <div
                class="elect-row-12-2"
                v-if="query['HDG1-31'].state==='Y'?true:false"
                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
            >
                <p>CDA11323</p>
            </div>
            <div
                class="elect-row-12-3"
                v-if="query['HDG1-31'].state==='Y'?true:false"
                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
            >
                <p>CDA11323</p>
            </div>
            <div
                class="elect-row-12-4"
                v-if="query['HDG1-31'].state==='Y'?true:false"
                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
            >
                <p>CDA11323</p>
            </div>
            <div
                class="elect-row-12-5"
                v-if="query['HDG1-31'].state==='Y'?true:false"
                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
            >
                <p>CDA11323</p>
            </div>
            <!-- 第 13 行 -->
            <div
                class="elect-row-13-1"
                v-if="query['HDG1-31'].state==='Y'?true:false"
                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
            >
                <p>CDA11323</p>
            </div>
            <div
                class="elect-row-13-2"
                v-if="query['HDG1-31'].state==='Y'?true:false"
                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
            >
                <p>CDA11323</p>
            </div>
            <div
                class="elect-row-13-3"
                v-if="query['HDG1-31'].state==='Y'?true:false"
                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
            >
                <p>CDA11323</p>
            </div>
            <div
                class="elect-row-13-4"
                v-if="query['HDG1-31'].state==='Y'?true:false"
                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
            >
                <p>CDA11323</p>
            </div>

            <div
                class="elect-row-13-5"
                v-if="query['HDG1-31'].state==='Y'?true:false"
                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
            >
                <p>CDA11323</p>
            </div>
            <Tooltip
                ref="toolRef"
                :query="BusInformation"
            ></Tooltip>
        </div>
    </div>
</template>

<script>
import Tooltip from './Tooltip';
export default {
    components: {
        Tooltip
    },
    data () {
        return {
            // 电泳作业区域实时信息
            query: {
                'STC1-1': {
                    areaId: 0,
                    areaName: 'DF20191010',
                    busNo: 'DF20191010',
                    busType: 'Out', //IN/OUT
                    code: 'string',
                    id: 0,
                    keyStation: true,
                    laneCode: 'string',
                    laneId: 0,
                    sequence: 0,
                    skidID: 0,
                    state: 'Y', //0.1 Y/N
                    workshopCode: 'string'
                },
                'STC1-8': {
                    areaId: 0,
                    areaName: 'DF205411010',
                    busNo: 'DF20191010',
                    busType: 'In', //IN/OUT
                    code: 'string',
                    id: 0,
                    keyStation: true,
                    laneCode: 'string',
                    laneId: 0,
                    sequence: 0,
                    skidID: 0,
                    state: 'Y', //0.1 Y/N
                    workshopCode: 'string'
                },
                'HDG1-31': {
                    areaId: 0,
                    areaName: 'DF205411010',
                    busNo: 'DF20191010',
                    busType: 'Out', //IN/OUT
                    code: 'string',
                    id: 0,
                    keyStation: true,
                    laneCode: 'string',
                    laneId: 0,
                    sequence: 0,
                    skidID: 0,
                    state: 'Y', //0.1 Y/N
                    workshopCode: 'string'
                }
            },
            // 根据车身号获得当前车体信息
            BusInformation: {
                'saleOrderNo': '201905201252',
                'planOrderNo': '83848484',
                'code': 'EDSCSFDGVG',
                'busType': 'car',
                'orderSize': '20',
                'unit': 'From China',
                'shop': '二号车间',
                'line': '4-25'
            }
        };
    },
    mounted () {
        this.getElectrophoresisInformation();
        for (let key in this.query) {
            console.log(key)
        }
    },
    methods: {
        // 点击车位弹出车体信息
        clickBtn (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)
            })
            // this.BusInformation = {
            //     name: '111',
            //     code: '222'
            // };
        },
        getElectrophoresisInformation () {
            this.$fetch('area-controller/realTime-get', { areaNo: '2' })
                .then(res => {
                    console.log('getall', res);
                })
                .catch(error => {
                    reject(error);
                });
        },
        judgeCarTypeAndcarStationstyle (outOrIn, station) {
            //根据车位编码Station 判断是否该车位已经被定位
            /* .... */
            console.log('outorin', outOrIn);
            console.log('车位', station);
            if (outOrIn === 'Out') {
                return 'carOutFactory';
            } else {
                return '';
            }
        }
    }
};
</script>

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

    .elect-content {
        position: relative;
        margin: 0 auto;
        width: 1600px;
        height: 900px;
        background: url("../../../assets/images/Monitor/monitor_electrophoresis.png") no-repeat;
        .elect-row-1-1,
        .elect-row-1-2,
        .elect-row-1-3,
        .elect-row-2-1,
        .elect-row-2-2,
        .elect-row-2-3,
        .elect-row-3-1,
        .elect-row-3-2,
        .elect-row-3-3,
        .elect-row-4-1,
        .elect-row-4-2,
        .elect-row-4-3,
        .elect-row-5-1,
        .elect-row-5-2,
        .elect-row-5-3,
        .elect-row-6-1,
        .elect-row-6-2,
        .elect-row-6-3,
        .elect-row-6-4,
        .elect-row-7-1,
        .elect-row-7-2,
        .elect-row-7-3,
        .elect-row-8-1,
        .elect-row-8-2,
        .elect-row-8-3,
        .elect-row-9-1,
        .elect-row-9-2,
        .elect-row-9-3,
        .elect-row-9-4,
        .elect-row-10-1,
        .elect-row-10-2,
        .elect-row-10-3,
        .elect-row-10-4,
        .elect-row-10-5,
        .elect-row-11-1,
        .elect-row-11-2,
        .elect-row-11-3,
        .elect-row-11-4,
        .elect-row-11-5,
        .elect-row-12-1,
        .elect-row-12-2,
        .elect-row-12-3,
        .elect-row-12-4,
        .elect-row-12-5,
        .elect-row-13-1,
        .elect-row-13-2,
        .elect-row-13-3,
        .elect-row-13-4,
        .elect-row-13-5 {
            position: absolute;
            width: 140px;
            height: 40px;
            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
        .elect-row-1-1,
        .elect-row-1-2 {
            top: 165px;
        }
        .elect-row-1-3 {
            top: 180px;
        }
        // ?第一行 left
        .elect-row-1-1,
        .elect-row-2-1,
        .elect-row-3-1,
        .elect-row-4-1,
        .elect-row-5-1,
        .elect-row-6-1,
        .elect-row-7-1,
        .elect-row-8-1 {
            left: 680px;
        }
        .elect-row-1-2,
        .elect-row-2-2,
        .elect-row-3-2,
        .elect-row-4-2,
        .elect-row-5-2,
        .elect-row-6-2,
        .elect-row-7-2,
        .elect-row-8-2 {
            left: 915px;
        }
        .elect-row-1-3,
        .elect-row-2-3,
        .elect-row-3-3,
        .elect-row-4-3,
        .elect-row-8-3 {
            left: 1090px;
        }

        .elect-row-5-3,
        .elect-row-6-3,
        .elect-row-6-4,
        .elect-row-7-3 {
            left: 1130px;
        }
        // ?第二行top
        .elect-row-2-1 {
            top: 210px;
        }
        .elect-row-2-2 {
            top: 240px;
        }
        .elect-row-2-3 {
            top: 230px;
        }
        // ?第三行top
        .elect-row-3-1 {
            top: 255px;
        }
        .elect-row-3-2 {
            top: 290px;
        }
        .elect-row-3-3 {
            top: 278px;
        }
        // ?第四行
        .elect-row-4-1 {
            top: 342px;
        }
        .elect-row-4-2 {
            top: 338px;
        }
        .elect-row-4-3 {
            top: 325px;
        }
        // ?第五行
        .elect-row-5-1,
        .elect-row-5-2 {
            top: 386px;
        }
        .elect-row-5-3 {
            top: 370px;
        }
        // ?第六行
        .elect-row-6-1,
        .elect-row-6-2 {
            top: 435px;
        }
        .elect-row-6-3 {
            top: 405px;
        }
        .elect-row-6-4 {
            top: 440px;
        }
        // ?第七行
        .elect-row-7-1,
        .elect-row-7-2,
        .elect-row-7-3 {
            top: 480px;
        }
        // ?第八行
        .elect-row-8-1,
        .elect-row-8-2,
        .elect-row-8-3 {
            top: 542px;
        }
        // ?第九行
        .elect-row-9-1,
        .elect-row-9-2,
        .elect-row-9-3,
        .elect-row-9-4 {
            top: 596px;
        }
        .elect-row-9-1,
        .elect-row-10-1,
        .elect-row-11-1,
        .elect-row-12-1,
        .elect-row-13-1 {
            left: 420px;
        }
        .elect-row-9-2 {
            left: 725px;
        }
        .elect-row-9-3 {
            left: 960px;
        }
        .elect-row-9-4 {
            left: 1130px;
        }
        // ?第十行
        .elect-row-10-1 {
            top: 640px;
        }
        .elect-row-10-2,
        .elect-row-10-3,
        .elect-row-10-4,
        .elect-row-10-5 {
            top: 675px;
        }
        .elect-row-10-2,
        .elect-row-11-2,
        .elect-row-12-2 {
            left: 660px;
        }
        .elect-row-10-3,
        .elect-row-11-3 {
            left: 797px;
        }
        .elect-row-10-4,
        .elect-row-11-4 {
            left: 935px;
        }
        .elect-row-10-5,
        .elect-row-12-5 {
            left: 1095px;
        }
        // ?第十一行
        .elect-row-11-1 {
            top: 685px;
        }
        .elect-row-11-2,
        .elect-row-11-3,
        .elect-row-11-4,
        .elect-row-11-5 {
            top: 732px;
        }
        .elect-row-11-5,
        .elect-row-13-5 {
            left: 1137px;
        }
        // ?第十二行
        .elect-row-12-1 {
            top: 729px;
        }
        .elect-row-12-2,
        .elect-row-12-3,
        .elect-row-12-4,
        .elect-row-12-5 {
            top: 782px;
        }
        .elect-row-12-3,
        .elect-row-13-3 {
            left: 840px;
        }
        .elect-row-12-4,
        .elect-row-13-4 {
            left: 975px;
        }
        // ?第十三行
        .elect-row-13-1,
        .elect-row-13-2,
        .elect-row-13-3,
        .elect-row-13-4,
        .elect-row-13-5 {
            top: 825px;
        }
        .elect-row-13-2 {
            left: 708px;
        }
        .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;
        }
    }
}
</style>
