<script setup>
const props = defineProps({
  label: String,
  items: Array,
  fields: {
    default: ['v', 'n']
  },
  modelValue: String
})

const emits = defineEmits(['update:modelValue', 'change'])

function handleClick(row) {
  emits('update:modelValue', row[props.fields[0]])
  emits('change', row)
}

</script>

<template>
  <div class="flex">
    <div class="font-bold mr-4 min-w-10">{{ label }}</div>
    <div class="flex-auto flex-wrap">
      <label v-for="i in items" :for="i[props.fields[0]]"
        class="text-hex-949494 mx-3 px-4px py-px rounded cursor-pointer"
        :class="i[props.fields[0]] === modelValue && 'text-hex-00A3FF bg-hex-00A3FF bg-opacity-10'"
        @click="handleClick(i)">
        <span class="whitespace-nowrap">{{ i[props.fields[1]] }}</span>
      </label>
      <div class="border_b my-2"></div>
    </div>
  </div>
</template>

<style scoped>
.border_b {
  border-bottom: 1px solid #E4E6E8;
}
</style>
