<template>
  <div class="menu">
    <div
      :class="['menu-item', item.value == selected ? 'menu-item--selected' : '']"
      v-for="item in data"
      :key="item.value"
      @click="handleClick(item)"
    >
      {{ item.label }}
    </div>
  </div>
</template>

<script setup lang="ts">
  interface Props {
    data: Array<{
      label: string;
      value: string;
    }>;
    selected: string;
  }
  withDefaults(defineProps<Props>(), {
    data: () => [],
    selected: '0',
  });
  const emit = defineEmits(['itemClick']);
  function handleClick(data) {
    emit('itemClick', data);
  }
</script>

<style lang="less" scoped>
  .menu {
    &-item {
      display: block;
      width: 160px;
      height: 48px;
      cursor: pointer;

      &:hover {
        background: #f6f8fa;
      }

      &--selected {
        background: #f6f8fa;
        font-size: 14px;
        font-weight: 600;
        color: #0075ff;
        box-shadow: 1px 0 0 0 #efefef, inset 3px 0 0 0 #0075ff;
      }
    }
  }
</style>
