<template>
    <div>
        <div id="changemap">
            <div v-for="(n,i) in layerArr" :key="i">
                <div :title="n.text" @click="change(i,n.basemap)">
                    <img :src="require('../../assets/images/map/'+n.img)" />
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span>{{n.text}}</span>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        props:{
           viewId:{
               type:String,
               default:""
           }
        },
        data() {
            return {
                layerArr: [
                    {
                        img: "shiliang.png",
                        text: "矢量图",
                        basemap: '' //hybrid img
                    },
                    {
                        img: "yingxiang.png",
                        text: "影像图",
                        basemap: 'hybrid' //hybrid img
                    }
                ]
            };
        },
        methods: {
            change(index, basemap) {
                /*var view = maps.threeDView,map = null;
                if(view){
                    map = view.map;
                }else {
                    console.log("mapView不存在");
                }
                map.basemap = basemap;    // streets
                index > 0 && this.layerArr.unshift(this.layerArr.splice(index, 1)[0]);*/
            }
        }
    };
</script>
<style scoped>
    #changemap {
        /* background-color: #0ff; */
        display: flex;
        flex-wrap: wrap-reverse;
        flex-direction: row-reverse;
        align-content: flex-start;
        max-width: 75px;
        max-height: 75px;
        overflow: auto;
    }
    #changemap > div {
        width: 75px;
        height: 75px;
        box-sizing: border-box;
        padding: 5px;
    }
    #changemap:hover {
        max-width: 300px;
        max-height: 300px;
        transition: max-height 0.3s linear 0s;
    }
    #changemap > div > div {
        height: 100%;
        width: 100%;
        border: 1px solid #ccc;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        overflow: hidden;
        cursor: pointer;
    }
    #changemap > div > div > img {
        height: 100%;
        width: 100%;
        display: block;
    }
    #changemap > div > div > span {
        transition: all 0.4s linear 0s;
        position: absolute;
        height: 50%;
        width: 50%;
        background-color: rgba(0, 0, 0, 0.4);
    }
    #changemap > div > div > span:nth-of-type(1) {
        top: 0px;
        left: 0px;
    }
    #changemap > div > div > span:nth-of-type(2) {
        top: 0px;
        right: 0px;
    }
    #changemap > div > div > span:nth-of-type(3) {
        bottom: 0px;
        left: 0px;
    }
    #changemap > div > div > span:nth-of-type(4) {
        bottom: 0px;
        right: 0px;
    }
    #changemap > div > div > span:nth-of-type(5) {
        width: 100%;
        height: 30%;
        bottom: 0px;
        left: 0px;
        color: #fafafa;
        overflow: hidden;
        /* text-align: center; */
        font-size: 12px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #changemap > div > div:hover span:nth-of-type(1) {
        left: -50%;
        top: -50%;
    }
    #changemap > div > div:hover span:nth-of-type(2) {
        top: -50%;
        right: -50%;
    }
    #changemap > div > div:hover span:nth-of-type(3) {
        bottom: -50%;
        left: -50%;
    }
    #changemap > div > div:hover span:nth-of-type(4) {
        bottom: -50%;
        right: -50%;
    }
</style>