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

<style lang="scss" scoped>
$color: #1259A1;
.border_b {
  border-bottom: 1px dashed #E4E6E8;
}
.text_blue{
 color: $color;
}
</style>
