<template>
  <el-row id="canvas-actions-box" :class="{'isEdit':config.isEdit}">
    <!-- <div :class="{'active':active=='move'}">
      <i class="iconfont icon-move" @click="moveCanvas"></i>
    </div> -->
    <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 v-if="config.isEdit" @click="undo">
      <i class="iconfont icon-Cancel"></i>
    </div>
    <div v-if="config.isEdit" @click="redo">
      <i class="iconfont icon-Anti-cancel"></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>
export default {
  data() {
    return {
      sliderVal: 1, // 滑块值
      active: '',
      min: 1,
      max: 1000,
      everyScale: 1, // 每份的放大倍数
      isSwitch: false, // 是否开启吸附
    }
  },
  props: {
    config: {
      type: Object,
      default: {
        isEdit: false,
        divide: true,
        groupSelect: false
      }
    }
  },
  computed: {
  },
  methods: {
    // 移动画布
    // moveCanvas() {
    //   this.active = this.active != "move" ? "move" : '';
    //   this.$emit('move', this.active == 'move');
    // },
    //
    groupSelect() {
      this.active = 'groupSelect';
      this.$emit('groupSelect');
    },
    // 适配大小
    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');
    },
    // 撤销
    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) {
      // 换算
      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);
    }
  }
}
</script>
<style lang="less" scoped>
#canvas-actions-box {
  // min-width: 542px;
  & > div {
    float: left;
    font-size: 20px;
    padding: 0 10px;
    color: #fff;
    background-color: #6da60f;
    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;
    /deep/.el-slider__runway {
      margin: 18px 0;
      height: 4px;
      .el-slider__bar {
        background-color: #fff;
        height: 4px;
      }
    }
  }
}
</style>