<template>
    <div>
        <div class='action-box'>
            <div class='small-block' @click='fitToWindow'>
                <i class="iconfont wanda-suofang"></i>
            </div>
            <div class='small-block' @click='showText'>
                <i v-if='isShow' class="iconfont wanda-yulan" title="隐藏店铺名称"></i>
                <i v-else class="iconfont wanda-yincang" title="显示店铺名称"></i>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            sliderVal: 1, // 滑块值
            active: '',
            min: 1,
            max: 200,
            everyScale: 1, // 每份的放大倍数
            isSwitch: false, // 是否开启吸附
            isShow: false
        }
    },

    methods: {
        // 适配大小
        fitToWindow() {
            this.$emit('fit')
        },
        // 下拉菜单
        handleCommand(command) {
            this.$emit(command)
        },
        // 是否开启吸附
        handleDivideCommand(commond) {
            this.$emit('changeAbsorb', this.isSwitch)
        },
        // 切割编辑
        divide() {
            this.active = 'divide'
            this.$emit('divide')
        },
        // 清除编辑
        clearDivide() {
            this.active = ''
            this.$emit('clearDivide')
        },
        // 减
        reduce() {
            this.sliderVal /= 1.1
            if (this.sliderVal < this.min) {
                this.sliderVal = this.min
            }
            this.scale(this.sliderVal)
        },
        // 缩放
        scale(val) {
            // 换算
            let scale = (val * this.everyScale) / 10
            this.$emit('scale', scale)
        },
        // 加
        plus() {
            this.sliderVal *= 1.1
            if (this.sliderVal > this.maxScale) {
                this.sliderVal = this.maxScale
            }
            this.scale(this.sliderVal)
        },
        showText() {
            this.isShow = !this.isShow
            this.$emit('showText', this.isShow)
        }
    },
    mounted() {}
}
</script>
<style lang="less" scoped>
.action-box {
    width: 40px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 2px 15px 0px rgba(31, 36, 41, 0.08);
    border-radius: 2px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    .small-block {
        border-right: 1px solid #e4e5e7;
        padding: 12px;
        position: relative;
        cursor: pointer;
        i {
            width: 16px;
            height: 16px;
            display: inline-block;
            img {
                width: 100%;
                height: 100%;
            }
        }
        &::after {
            position: absolute;
            left: 50%;
            margin-left: -20%;
            bottom: 0;
            content: "";
            width: 14px;
            height: 1px;
            background: rgba(195, 199, 203, 1);
            border: 0px solid rgba(228, 229, 231, 1);
        }
    }
    .small-block:last-child {
        &::after {
            content: "";
            background: transparent;
            border: none;
        }
    }
    .small-block:active {
        background: #D2D9DF;
    }
}
</style>