<script setup lang="ts">
const emits = defineEmits(['click'])
const toolList = ref([
  {
    name: '回退',
    value: 'back',
  },
  {
    name: '清除',
    value: 'clear',
  },
  {
    name: '投降',
    value: 'surrender',
  },
])

function handleClick(item: anyObj) {
  emits('click', item)
}
</script>
<template>
  <div class="tool_list">
    <div
      v-for="item in toolList"
      :key="item.value"
      class="tool_list_item"
      @click="handleClick(item)"
    >
      <Icon :name="item.value" :size="80"></Icon>
      <div :data-content="item.name" class="name">
        {{ item.name }}
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
//
.tool {
  width: 100%;
  &_list {
    width: 336px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    &_item {
      width: 6.67vh;
      position: relative;
      cursor: pointer;
      &:last-child {
        margin-right: 0;
      }
      .name {
        position: absolute;
        left: 50%;
        bottom: 1.33vh;
        transform: translate(-50%);
        text-align: center;

        color: white;
        font-family: $font-special;
        font-size: 1.67vh;
        @include font-stroke($font-color, 2px);
      }
    }
  }
}
</style>
