<script setup>
import { computed } from 'vue'

const props = defineProps({
  /**
   * 選択tabの初期値
   * @example modelValue: 0
   */
  modelValue: {
    type: Number,
    default: 0,
  },
  /**タブ内のテキスト
   *
   * @example p_TabTitle: [
      { content: 'text', badgeNum:10 },
      { content: 'text' },
    ]
   */
  p_TabTitle: {
    type: Array,
    default: () => [],
  },
  /** 入力制限のフラグ
   *
   * @example p_ControlValue: true
   */
  p_ControlValue: {
    type: Boolean,
    default: true,
  },
  /**
   * ダイアログモード
   * @example p_DialogMode: true
   */
  p_DialogMode: { type: Boolean, default: false },
  /**
   * カラーを切り替える
   * @example p_Color: '_primary'
   */
  p_BatchFontColor: {
    type: String,
    default: 'primary',
    validator: (val) =>
      [
        'normal',
        'primary',
        'secondary',
        'negative',
        'positive',
        'accent',
        'dark',
        'negative',
        'info',
      ].includes(val),
  },
})

// v-modelの設定
const emit = defineEmits(['update:modelValue'])
const model = computed({
  get() {
    return props.modelValue
  },
  set(val) {
    emit('update:modelValue', val)
  },
})
// 選択されたタブのナンバーの変更
const clickBtn = (index) => {
  if (model.value != index && props.p_ControlValue) {
    model.value = index
  }
}
const tabTitle = computed(() => props.p_TabTitle)
</script>

<template>
  <div class="_tabs">
    <div
      v-for="(title, index) in tabTitle"
      :key="index"
      :class="[
        {
          _active_tab: model == index,
          _dialogmode_off: p_DialogMode == false,
          _dialogmode_on: p_DialogMode == true,
          _tabs_singleLayout: p_TabTitle.length === 1,
        },
        '_passive_tab',
      ]"
      @click="clickBtn(index)"
    >
      <div class="_tab_flex"></div>
      <div class="_tab_flex _tab_flex_center">
        {{ title.content }}
      </div>
      <div class="_tab_flex">
        <span v-if="title.badgeNum" :class="`_circle _type_${p_BatchFontColor}`">
          {{ title.badgeNum }}</span
        >
      </div>
    </div>
  </div>
</template>
<style lang="sass">
// タブの共通設定
._tabs
  background: #FFFFFF
  position: relative
  display: flex
  justify-content: center
  width: 100%
._passive_tab:not(:first-child)
  border-left: none

// 選択されていないタブの表示
._passive_tab
  width: 100%
  display: flex
  align-items: center
  justify-content: center
  cursor: pointer
  border: 1px solid #707070
  background-color: #ffffff
  color: #707070
._dialogmode_off
  height: 45px
  font-size: 16px
._dialogmode_on
  height: 30px
  font-size: 12px
._tabs_singleLayout
  width: 100%
  padding: 0 50px
  cursor: auto

// 選択されたタブの表示
._active_tab
  background: var(--q-primary, #5e421d)
  color:#ffffff

// tab内の均等表示
._tab_flex
  flex: 1
  align-items: center
  justify-content: center

._tab_flex_center
  text-align: center
  flex: 2
  flex-shrink: 1
  white-space: nowrap

// バッジ
._circle
  display: inline-block
  width: 25px
  height: 25px
  line-height: 27px
  border-radius: 50%
  color: #ffffff
  background: var(--q-accent, #f2961c)
  font-size: 12px
  font-weight: 500
  margin-left: 10px
  text-align: center
  padding-right: 1px
  &._type_normal
    color: #ffffff
  &._type_primary
    color: var(--q-primary, #3c4d58)
  &._type_secondary
    color: var(--q-secondary, #3c4d58)
  &._type_positive
    color: var(--q-positive, #3c4d58)
  &._type_negative
    color: var(--q-negative, #3c4d58)
  &._type_accent
    color: var(--q-accent, #f2961c)
  &._type_dark
    color: var(--q-dark, #f2961c)
  &._type_negative
    color: var(--q-negative, #f2961c)
  &._type_info
    color: var(--q-info, #f2961c)
</style>
