<template>
    <div class="page-body">
        <div class="putty-content">
            <div class="putty-row-1-1">
                <p>CDA233231231231321312</p>
            </div>
            <div class="putty-row-1-2">
                <p>CDA213</p>
            </div>
            <div class="putty-row-1-3">
                <p>CDA213</p>
            </div>
            <div class="putty-row-1-4">
                <p>CDA213</p>
            </div>
            <div class="putty-row-1-5">
                <p>CDA213</p>
            </div>
            <div class="putty-row-1-6">
                <p>CDA213</p>
            </div>
            <div class="putty-row-2-1">
                <p>CDA213</p>
            </div>
            <div class="putty-row-2-2">
                <p>CDA213</p>
            </div>
            <div class="putty-row-2-3">
                <p>CDA213</p>
            </div>
            <div class="putty-row-2-4">
                <p>CDA213</p>
            </div>
            <div class="putty-row-2-5">
                <p>CDA213</p>
            </div>
            <div class="putty-row-2-6">
                <p>CDA213</p>
            </div>
            <div class="putty-row-3-1">
                <p>CDA213</p>
            </div>
            <div class="putty-row-3-2">
                <p>CDA213</p>
            </div>
            <div class="putty-row-3-3">
                <p>CDA213</p>
            </div>
            <div class="putty-row-3-4">
                <p>CDA213</p>
            </div>
            <div class="putty-row-3-5">
                <p>CDA213</p>
            </div>
            <div class="putty-row-3-6">
                <p>CDA213</p>
            </div>
            <div class="putty-row-4-1">
                <p>CDA213</p>
            </div>
            <div class="putty-row-4-2">
                <p>CDA213</p>
            </div>
            <div class="putty-row-4-3">
                <p>CDA213</p>
            </div>
            <div class="putty-row-4-4">
                <p>CDA213</p>
            </div>
            <div class="putty-row-4-5">
                <p>CDA213</p>
            </div>
            <div class="putty-row-4-6">
                <p>CDA213</p>
            </div>
            <div
                v-popover:nasdsd
                class="putty-row-5-6"
                @click="showPopover(data, data.pr56, 'popover2')"
            >
                <p>{{ data.pr56.name }}</p>
            </div>
        </div>
        <el-popover
            :ref="item.name"
            v-for="(item, index) in options"
            :key="Math.random(index)"
            placement="top"
            width="300"
            trigger="click"
        >
            <div class="flex-content">
                <p>111: <span>{{ item.car }}</span></p>
                <p>111: <span>{{ item.code }}</span></p>
                <p>111: <span>{{ item.name }}</span></p>
                <p>111: <span>{{ item.no }}</span></p>
                <p>111: <span>{{ item.time }}</span></p>
            </div>
        </el-popover>
    </div>
</template>
<script>
/**
 * @author MARS 2019-09-28 <wangyunfan@vtstar.net>
 * @fileoverview 腻子作业区
 */
export default {
    data () {
        return {
            show: true,
            data: {
                pr56: {
                    name: 'nasdsd',
                    code: '这是编码啊',
                    no: '2233123',
                    time: '2019-09-29',
                    car: '中通客车'
                },
                pr51: {
                    name: 'qqqname',
                    code: 'qqq这是编码啊',
                    no: 'qqq2233123',
                    time: '2222019-09-29',
                    car: '中通222客车'
                }
            },
            query: {},
            popover: null,
            options: []
        }
    },

    mounted () {},

    methods: {
        /**
         * @method 点击展示popover
         * @description
         */
        showPopover (data, val, item) {
            let keys = []
            let values = []
            for (let key in data) {
                keys.push(key)
                values.push(data[key])
            }
            let newArr = []
            newArr = _.cloneDeep(values)
            this.options = newArr.filter(item => val.name === item.name)
            console.log(this.options)
            console.log(this.$refs.nasdsd)
        }
    }
}
</script>
<style lang="scss" scoped>
.page-body {
    min-height: 100%;
    background: rgba(0, 7, 12, 1);

    .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;
        }
    }
}
</style>
