<template>
    <div>
        <div class='action-box'>
            <div class='small-block'>
                <el-dropdown size='mini' placement='top-start' @command='handleCommand'>
                    <i>
                        <img src='../../assets/imgs/dl.png' alt />
                    </i>
                    <el-dropdown-menu slot='dropdown'>
                        <el-dropdown-item command='savePng'>保存为png</el-dropdown-item>
                        <el-dropdown-item command='saveSvg'>保存为svg</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
            <div class='small-block' @click='showText'>
                <i>
                    <el-tooltip v-if='isShow' effect='dark' content='隐藏店铺名称' placement='top'>
                        <img src='../../assets/imgs/yl.png' alt />
                    </el-tooltip>
                    <el-tooltip v-else effect='dark' content='显示店铺名称' placement='top'>
                        <img src='../../assets/imgs/er.png' alt />
                    </el-tooltip>
                </i>
            </div>
            <div class='small-block' @click='fitToWindow'>
                <i>
                    <img src='../../assets/imgs/qp.png' alt />
                </i>
            </div>
            <div class='small-size' @click='reduce'>
                <i>-</i>
            </div>
            <div class='small-slide'>
                <el-slider tooltip-class='tooltip-class' :min='min' v-model='sliderVal' :show-tooltip='false' @input='scale' :max='max'></el-slider>
            </div>
            <div class='small-size' @click='plus'>
                <i>+</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: 400px;
    height: 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;
    align-items: center;
    overflow: hidden;
    .small-block {
        border-right: 1px solid #e4e5e7;
        padding: 12px;
        cursor: pointer;
        i {
            width: 16px;
            height: 16px;
            display: inline-block;
            img {
                width: 100%;
                height: 100%;
            }
        }
    }
    .small-size {
        cursor: pointer;
        padding: 12px;
        font-size: 28px;
    }
    .small-slide {
        flex: 1;
        height: 100%;
        padding: 0 8px;
        margin-top: 10px;
        border-left: 1px solid #e4e5e7;
        border-right: 1px solid #e4e5e7;
    }
}
</style>
<style lang="less">
.action-box {
    .el-slider__button {
        width: 13px;
        height: 13px;
        border: 2px solid #025baa;
    }
    .el-slider__runway {
        height: 3px;
        background-color: #e4e7ed;
        background: rgba(0, 0, 0, 0.45);
        border-radius: 1px;
    }
    .el-slider__button-wrapper {
        top: -17px;
    }
    .el-slider__bar {
        height: 3px;
        background-color: #025baa;
        border-top-left-radius: 1px;
        border-bottom-left-radius: 1px;
    }
    .action-box .el-slider__runway {
        background-color: #e8e8e8 !important;
        background: #e8e8e8 !important;
    }
}
</style>