<template>
    <default-layout class="ol-popup" v-show="show">
        <todo-list>
            <div slot="title">{{ title }}</div>
            <div slot="options">
                <a-button shape="circle" icon="close" @click="handleCloseCancel" />
            </div>
            <div slot="content">
                <region-popup ref="region" v-if="type === 'region'"></region-popup>
                <single-popup ref="single" v-else></single-popup>
            </div>
        </todo-list>
    </default-layout>
</template>
<script>
import SinglePopup from '@/views/dashboard/components/popup/SinglePopup'
import RegionPopup from '@/views/dashboard/components/popup/RegionPopup'
export default {
    components: { SinglePopup, RegionPopup },
    data() {
        return {
            title: "汇总信息",
            data: null,
            type: 'region',
            show: false
        }
    },
    methods: {
        init(data, type, title) {
            this.show=true
            this.data = data
            this.type = type
            if (title) {
                this.title = title
            } else {
                this.title = data.factoryName
            }
            this.$nextTick(() => {
                this.getPropup()
            })
        },
        handleCloseCancel() {
            this.$emit('close');
            this.data = null
            this.type = "region"
            this.show=false
        },
        getPropup() {
            console.log(this.$refs)
            this.$refs[this.type].init(this.data)
        }
    }
}
</script>
<style scoped>
.ol-popup {
    position: absolute;
    background-color: white;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #cccccc;
    bottom: 12px;
    left: -50px;
    min-width: 1200px;
}

.ol-popup:after,
.ol-popup:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.ol-popup:after {
    border-top-color: white;
    border-width: 10px;
    left: 48px;
    margin-left: -10px;
}

.ol-popup:before {
    border-top-color: #cccccc;
    border-width: 11px;
    left: 48px;
    margin-left: -11px;
}

.ol-popup-closer {
    text-decoration: none;
}
</style>