<template>
    <div class='floor-box'>
        <div class='floor-list'>
            <a-icon class='i-style1' v-if='showTopButton' type='caret-up' @click='removeTop' />
            <a-icon class='i-style1' v-if='!showTopButton' type='caret-up' style='color:#ccc' />
            <span class='floors'>
                <span class='font-group'>
                    <span
                        class='eq-floor'
                        v-for='(item,index) in floors'
                        :class='item.id==floorId?"isActive":""'
                        :key='index'
                        @click='tabFloor(item)'
                    >{{item.floorName}}</span>
                </span>
            </span>
            <a-icon class='i-style2' v-if='showBottomButton' type='caret-down' @click='removeBottom' />
            <a-icon class='i-style2' v-if='!showBottomButton' type='caret-down' style='color:#ccc' />
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            floorId: 'f1',
            floorName: 'F3',
            showTopButton: true,
            showBottomButton: true
        }
    },
    props: {
        floors: {
            default: []
        }
    },
    methods: {
        tabFloor(item) {
            this.showTopButton = true
            this.showBottomButton = true
            this.floorId = item.id
            this.floorName = item.floorName
            this.$emit('emitFloor', item)
            let tempFloorIdList = []
            this.floors.map(el => {
                tempFloorIdList.push(el.id)
            })
            tempFloorIdList.forEach((el, index) => {
                if (item.id == el) {
                    if (index == 0) {
                        this.showTopButton = false
                    }
                    if (index == this.floors.length - 1) {
                        this.showBottomButton = false
                    }
                }
            })
        },
        removeTop() {
            let tempFloorIdList = []
            let tempFloorIndex = 0
            let clickCount = 0
            this.floors.map(el => {
                tempFloorIdList.push(el.id)
            })
            tempFloorIdList.forEach((el, index) => {
                if (el == this.floorId) {
                    tempFloorIndex = index
                    if (tempFloorIndex == 1) {
                        this.showTopButton = false
                    }
                    if (tempFloorIndex != 0) {
                        tempFloorIndex--
                        clickCount += 1
                        let fontGroup = document.querySelector('.font-group')
                        fontGroup.style.top = 254 - clickCount * 40 + 'px'
                        this.showBottomButton = true
                    }
                    console.log(tempFloorIndex)
                }
            })
            this.floorId = tempFloorIdList[tempFloorIndex]
        },
        removeBottom() {
            let tempFloorIdList = []
            let tempFloorIndex = 0
            let clickCount = 0
            this.floors.map(el => {
                tempFloorIdList.push(el.id)
            })
            console.log(tempFloorIdList)
            tempFloorIdList.forEach((el, index) => {
                if (el == this.floorId) {
                    tempFloorIndex = index
                    if (tempFloorIndex == tempFloorIdList.length - 2) {
                        this.showBottomButton = false
                    }
                    if (tempFloorIndex != tempFloorIdList.length - 1) {
                        tempFloorIndex++
                        clickCount += 1
                        let fontGroup = document.querySelector('.font-group')
                        fontGroup.style.top += clickCount * 40 + 'px'
                        this.showTopButton = true
                    }
                }
            })
            this.floorId = tempFloorIdList[tempFloorIndex]
        }
    }
}
</script>
<style lang="less" scoped>
.floor-box {
    position: fixed;
    top: 154px;
    right: 32px;

    .floor-list {
        position: fixed;
        right: 32px;
        top: 208px;
        width: 40px;
        background: #ffffff;
        text-align: center;
        .floors {
            position: fixed;
            right: 32px;
            top: 234px;
            width: 40px;
            height: 140px;
            background: #ffffff;
            text-align: center;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            .font-group {
                position: fixed;
                right: 36px;
                top: 234px;
                width: 36px;
                background: #ffffff;
                text-align: center;
                display: flex;
                flex-direction: column;
                .eq-floor {
                    width: 36px;
                    height: 28px;
                    line-height: 28px;
                    text-align: center;
                    background: #fff;
                    display: block;
                    cursor: pointer;
                    font-size: 14px;
                    margin-left: 2px;
                    border-radius: 4px;
                }
                .isActive {
                    color: #025baa;
                    background: #e1f2ff;
                }
            }
        }
        .i-style1 {
            right: 32px;
            position: fixed;
            top: 210px;
            width: 40px;
            height: 28px;
            background: #fff;
            text-align: center;
            line-height: 28px;
        }
        .i-style2 {
            right: 32px;
            position: fixed;
            top: 374px;
            width: 40px;
            height: 28px;
            background: #fff;
            text-align: center;
            line-height: 28px;
        }
    }
}
</style>