<script setup>
const props = defineProps({
  modelValue: String,
  tabs: Array
})

const emit = defineEmits(['update:modelValue', 'handler'])

const openTab = async (val) => {
  if(props.modelValue !== val.value) {
    emit('update:modelValue', val.value)
    emit('handler', val)
  }
}
</script>

<template>
  <nav class="detailRecordTab sd-none">
    <div class="tabs is-boxed">
      <ul>
        <li v-for="(tab, index) in tabs" :key="tab.value" :class="{'is-active': tab.value === modelValue}">
          <a @click="openTab(tab)">
            <span :class="{'fg-hex999': tab.value !== modelValue}">{{ tab.text }}</span>
          </a>
        </li>
      </ul>
    </div>
  </nav>
</template>

<style scoped>
.item:not(.active) {
  color: inherit;
}
</style>