<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'}">
      <i class="iconfont icon-shuxingxuanze" @click="groupSelect"></i>
    </div>
    <div>
      <i class="iconfont icon-maximize" @click="fitToWindow"></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'}">
      <el-dropdown size="mini" placement="top-start" @command="handleDivideCommand" :hide-on-click="false">
        <i class="iconfont icon-edit1" @click="divide"></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">
      <i class="iconfont icon-Erase" @click="clearDivide"></i>
    </div>
    <div v-if="config.isEdit">
      <i class="iconfont icon-Cancel" @click="undo"></i>
    </div>
    <div v-if="config.isEdit">
      <i class="iconfont icon-Anti-cancel" @click="redo"></i>
    </div>
    <div>
      <i class="iconfont icon-narrow" @click="reduce"></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>
      <i class="iconfont icon-zoom" @click="plus"></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>