<template>
  <div class="LayerControl">
    <a-button type="primary" class="blue line-up" @click="drawClick" :icon="h(EditOutlined)"
      >绘制</a-button
    >
    <a-button type="primary" class="blue line-up" :icon="h(FormOutlined)">编辑</a-button>
    <a-button type="primary" class="blue last-line-up" :icon="h(BlockOutlined)">合并</a-button>
    <a-button type="primary" class="orange line-up" :icon="h(SplitCellsOutlined)">分割</a-button>
    <a-button type="primary" class="orange last-line-up" :icon="h(DeleteOutlined)">删除</a-button>
    <a-button type="primary" class="green line-up" :icon="h(DragOutlined)">移动</a-button>
    <a-button type="primary" class="green line-up" :icon="h(RollbackOutlined)">撤回</a-button>
    <a-button type="primary" class="green" :icon="h(CloseCircleOutlined)">取消</a-button>
  </div>
</template>

<script setup lang="ts">
  import {
    EditOutlined,
    FormOutlined,
    BlockOutlined,
    SplitCellsOutlined,
    DragOutlined,
    DeleteOutlined,
    RollbackOutlined,
    CloseCircleOutlined,
  } from '@ant-design/icons-vue';
  import { h } from 'vue';
  const emit = defineEmits(['draw']);
  function drawClick() {
    emit('draw');
  }
</script>

<style lang="scss" scoped>
  .LayerControl {
    position: absolute;
    top: 20px;
    left: 386px;
    background-color: #fff;
    border-radius:8px;
    padding: 13px 13px 8px 13px;
    button {
      margin-bottom: 5px;
    }
  }
  .blue {
    background-color: #0081ff;
  }
  .orange {
    background-color: #ff8a48;
  }
  .green {
    background-color: #09b66d;
  }
  .line-up {
    margin-right: 10px;
  }
  .last-line-up {
    margin-right: 15px;
  }
</style>
