<template>
    <el-row id="canvas-actions-box" :class="{ 'isEdit': config.isEdit }">
        <div v-if="config.isEdit&&config.groupSelect" :class="{ 'active': active === 'groupSelect' }" @click="groupSelect">
            <i class="iconfont icon-shuxingxuanze"></i>
        </div>
        <div @click="fitToWindow">
            <i class="iconfont icon-maximize"></i>
        </div>
        <div v-if="!config.isEdit">
            <el-dropdown size="mini" placement="top-start" @command="handleCommand">
                <i class="el-icon-download" style="font-size:20px;color:#fff;"></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-item command="saveJson">保存为Json</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
        <div v-if="config.isEdit&&config.divide" :class="{ 'active': active === 'divide' }" @click="divide">
            <el-dropdown size="mini" placement="top-start" @command="handleDivideCommand" :hide-on-click="false">
                <i class="iconfont icon-edit1"></i>
                <!-- <el-dropdown-menu slot='dropdown'>
                    <el-dropdown-item command="savePng">
                        吸附 <el-switch v-model="isSwitch"></el-switch>
                    </el-dropdown-item>
                </el-dropdown-menu> -->
            </el-dropdown>
        </div>
        <div v-if="config.isEdit&&config.divide" @click="clearDivide">
            <i class="iconfont icon-Erase"></i>
        </div>
        <div @click="reduce">
            <i class="iconfont icon-narrow"></i>
        </div>
        <div class="line">
            <el-slider tooltip-class="tooltip-class" :min="min" v-model="sliderVal" :show-tooltip="false" @input="scale" :max="max"></el-slider>
        </div>
        <div @click="plus">
            <i class="iconfont icon-zoom"></i>
        </div>
    </el-row>
</template>
<script lang="ts">
interface configFace {
    isEdit: boolean;
    divide: boolean;
    groupSelect: boolean;
}
import { Vue, Component, Prop } from "vue-property-decorator";
@Component
export default class canvasFun extends Vue {
    @Prop({
        type: Object,
        default: {
            isEdit: false,
            divide: true,
            groupSelect: false,
        },
    })
    config!: configFace;

    sliderVal = 1; // 滑块值
    active = "";
    min = 1;
    max = 1000;
    everyScale = 1; // 每份的放大倍数
    isSwitch = false; // 是否开启吸附

    groupSelect() {
        this.active = "groupSelect";
        this.$emit("groupSelect");
    }
    // 适配大小
    fitToWindow() {
        this.$emit("fit");
    }
    // 下拉菜单
    handleCommand(command: string) {
        this.$emit(command);
    }
    // 是否开启吸附
    handleDivideCommand() {
        this.$emit("changeAbsorb", this.isSwitch);
    }
    // 切割编辑
    divide() {
        this.active = "divide";
        this.$emit("divide");
    }
    // 清除编辑
    clearDivide() {
        this.active = "";
        this.$emit("clearDivide");
    }
    // 撤销
    undo() {
        this.$emit("undo");
    }
    // 反撤销
    redo() {
        this.$emit("redo");
    }
    // 减
    reduce() {
        this.sliderVal /= 1.1;
        if (this.sliderVal < this.min) {
            this.sliderVal = this.min;
        }
        this.scale(this.sliderVal);
    }
    // 缩放
    scale(val: number) {
        // 换算
        let scale = (val * this.everyScale) / 10;
        this.$emit("scale", scale);
    }
    // 加
    plus() {
        this.sliderVal *= 1.1;
        if (this.sliderVal > this.max) {
            this.sliderVal = this.max;
        }
        this.scale(this.sliderVal);
    }
}
</script>
<style lang="scss" scoped>
#canvas-actions-box {
    & > div {
        float: left;
        font-size: 20px;
        padding: 0 10px;
        color: #fff;
        background-color: #6da60f;
        line-height: 2;
        i {
            cursor: pointer;
            color: #fff;
        }
    }
    & > div:active {
        background-color: #4b7902;
    }
    & > div.active {
        background-color: #4b7902;
    }
    &.isEdit > div {
        background-color: #02a7f0;
    }
    &.isEdit > div:active {
        background-color: #027db4;
    }
    &.isEdit > div.active {
        background-color: #027db4;
    }
    & > div.line {
        width: 200px;
        height: 40px;
        padding: 0;
        ::v-deep .el-slider__runway {
            margin: 18px 0;
            height: 4px;
            .el-slider__bar {
                background-color: #fff;
                height: 4px;
            }
        }
    }
}
</style>