<script setup>
import { ref, computed } from 'vue';
 
const props = defineProps({
  tool: {
    type: String,
    default: 'brush',
  },
});
const emit = defineEmits(['change-tool']);
 
const toolSelected = computed(() => props.tool);
 
const toolList = ref([
  { name: 'brush', title: '画笔', icon: 'icon-qianbi' },
  { name: 'eraser', title: '橡皮擦', icon: 'icon-xiangpi' },
  { name: 'clear', title: '清空', icon: 'icon-qingchu' },
  { name: 'undo', title: '撤销', icon: 'icon-chexiao' },
  { name: 'save', title: '保存', icon: 'icon-fuzhi' },
]);
 
function onChangeTool(tool) {
  emit('change-tool', tool);
}
</script>
 
<template>
  <div class="tools">
    <button
      v-for="item of toolList"
      :class="{ active: toolSelected === item.name }"
      :title="item.title"
      @click="onChangeTool(item.name)"
    >
      <i :class="['iconfont', item.icon]"></i>
    </button>
  </div>
</template>
 
<style scoped>
.tools button {
  /* border-radius: 50%; */
  width: 32px;
  height: 32px;
  background-color: rgba(255, 255, 255, 0.7);
  border: 1px solid #eee;
  outline: none;
  cursor: pointer;
  box-sizing: border-box;
  margin: 0 8px;
  padding: 0;
  text-align: center;
  color: #ccc;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
  transition: 0.3s;
}
 
.tools button.active,
.tools button:active {
  /* box-shadow: 0 0 15px #00CCFF; */
  color: #00ccff;
}
 
.tools button i {
  font-size: 20px;
}
</style>