<template>
    <div class="floors-container">
        <ol id='ul1' style="top: 0px;" ref="ul1">
            <li><button class="btn-select-floor" data-floor="F7">F7</button></li>
            <li><button class="btn-select-floor" data-floor="F6">F6</button></li>
            <li><button class="btn-select-floor" data-floor="F5">F5</button></li>
            <li><button class="btn-select-floor" data-floor="F4">F4</button></li>
            <li><button class="btn-select-floor" data-floor="F3">F3</button></li>
            <li><button class="btn-select-floor" data-floor="F2">F2</button></li>
            <li><button class="btn-select-floor selected" data-floor="F1">F1</button></li>
            <li><button class="btn-select-floor" data-floor="M">M</button></li>
            <li><button class="btn-select-floor" data-floor="B1">B1</button></li>
            <li><button class="btn-select-floor" data-floor="B2">B2</button></li>
            <li><button class="btn-select-floor" data-floor="B3">B3</button></li>
        </ol>
    </div>
</template>
<script>
    // import $ from jquery
    export default {
    name: "floorSelect",
        data() {
            return {
            };
        },
        props: {
            poiMap: {
                type: Object
            },
        },
        mounted(){
                var _this = this;
                _this.$refs.ul1.onclick = function(ev){
            　　　　var ev = ev || window.event;
            　　　　var target = ev.target || ev.srcElement;
            　　　　if(target.nodeName.toLowerCase() == 'button'){
                        target.style.color = '#fff'
                        target.style.background='#3385ff'
                        $(target).parent().siblings('li').addClass('unSelected')
                        let domLi = $(target).parent().siblings('li');
                        for(let i = 0;i<domLi.length;i++){
                            $(domLi[i]).children('button')[0].style.color='#333'
                            $(domLi[i]).children('button')[0].style.background='#fff'
                        }
                        if(target.innerText=='M'){                       
                            _this.showOrHide(false,false,false,true)
                            alert("广场层")
                        }else if(target.innerText=='F1'){
                            _this.showOrHide(true,false,false,false)
                            alert("0米层")
                        }else if(target.innerText=='F2'){
                            _this.showOrHide(false,true,false,false)
                            alert("8米层")
                        }else if(target.innerText=='F3'){
                            _this.showOrHide(false,false,true,false)
                            alert("16米层")
                        }
            　　　　}
            　　}
        },
        methods: {
            showOrHide(flag1,flag2,flag3,flag4) {
                this.visibleLikeSpatial('guozhanId0',this.poiMap,flag1)
                this.visibleLikeSpatial('guozhanId8',this.poiMap,flag2)
                this.visibleLikeSpatial('guozhanId16',this.poiMap,flag3)
                this.visibleLikeSpatial('guozhanIdsqura',this.poiMap,flag4)
            },
        }
    };
</script>

<style scoped>
.floors-container {
    position: absolute;
    height: 293px;
    z-index: 0;
    right: 30px;
    top:120px;
    width: 26px;
    font-size: 0;
    box-shadow: 1px 2px 1px rgba(0,0,0,.15);
    transition: right 200ms ease-in-out;
    overflow: hidden;
    background: #fff;
    cursor: pointer;
}
.floors-container>ol{
    position: relative;
    top: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    transition: top 120ms ease-in-out;
}
.floors-container>ol>li {
    display: list-item;
    text-align: -webkit-match-parent;
}
.floors-container>ol>li>button {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    cursor: pointer;
}
button.btn-select-floor {
    width: 26px;
    height: 26px;
    font-size: 12px;
    text-align: center;
    color: #333;
    background: #fff;
}
button.btn-select-floor.selected {
    color: #fff;
    background: #3385ff;
}
.unSelected {
    color: #333;
    background: #fff;
}
</style>
