<template>
  <div class="tab-list flex">
    <div
      v-for="(tab, i) in tabList"
      class="my-tab flex flex-col items-center cursor-pointer"
      :class="{
        'my-tab-focused': tab.value === focusedTab,
      }"
      :key="i"
      @click="setFocusedTab(tab.value)"
    >
      <div class=" flex-shrink-0">
        {{ tab.name }}
      </div>
      <div
        class="my-tab-focused-underline mt-1 flex-shrink-0"
        v-if="tab.value === focusedTab"
      ></div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue, { PropType } from 'vue'
import { iTab } from './types'
export default Vue.extend({
  props: {
    tabList: Array as PropType<iTab[]>,
    focusedTab: String,
    setFocusedTab: Function,
  },
})
</script>

<style scoped>
.tab-list {
  height: 80px;
  background: #ffffff;
  border-radius: 4px;
}

.my-tab {
  font-size: 18px;
  font-family: PingFang-SC-Bold, PingFang-SC;
  font-weight: bold;
  color: #1f3470;
  margin: 0 30px;
  margin-top: 28px;
}

.my-tab-focused {
  color: #2545cb;
  margin-bottom: 19px;
}
.my-tab-focused-underline {
  width: 28px;
  height: 4px;
  background: #2545cb;
  border-radius: 4px;
}
</style>
