<template>
  <div class="lyf-ui-tab" 
    :class="{
      sticky
    }"
    :style="{
      top: sticky ? offsetTop + 'px' : ''
    }"
  >
    <div class="lyf-ui-tab-inner">
      <div 
        ref="lyfUiTabItemsRef" 
        class="lyf-ui-tab-items"
        :class="{
          'scrollable': tabs.length > 4,
          'widest': tabs.length > 8
        }"
      >
        <div 
          class="lyf-ui-tab-item" 
          :class="{
            active: idx === value
          }"
          :style="{
            color: idx === value ? activeColor : ''
          }"
          v-for="(tab, idx) in tabs" 
          :key="idx"
          @click="tabItemClick(idx)"
        >{{ tab }}
          <div 
            class="lyf-ui-tab-line" 
            :style="{
              color: activeColor,
              backgroundColor: activeColor
            }"></div>
        </div>
      </div>
    </div>
    <div class="lyf-ui-tab-more" v-if="tabs.length > 8">
      <lyf-icon icon="list1" :size="22"></lyf-icon>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LyfTab',
  props: {
    tabs: {
      type: Array,
      default: () => []
    },
    value: {
      type: Number,
      default: 0
    },
    activeColor: String,
    sticky: Boolean,
    offsetTop: {
      type: Number,
      default: 0
    }
  },
  emits: ['change'],
  methods: {
    tabItemClick(i) {
      if (this.value === i) return
      this.$emit('input', i)
      this.$emit('change')
    },
  }
}
</script>

<style scoped>
.lyf-ui-tab .lyf-ui-tab-items::-webkit-scrollbar {
  display: none;
}
.lyf-ui-tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  padding: 0 var(--space_16);
  background-color: var(--background-color_2);
}
.lyf-ui-tab.sticky {
  position: sticky;
  top: 0;
  left: 0;
}
.lyf-ui-tab .lyf-ui-tab-inner {
  flex: 1;
  overflow: hidden;
}
.lyf-ui-tab .lyf-ui-tab-items {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 44px;
  overflow-x: auto;
}
.lyf-ui-tab .lyf-ui-tab-items .lyf-ui-tab-item {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  color: var(--font-color_2);
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap;
}
.lyf-ui-tab .lyf-ui-tab-item .lyf-ui-tab-line {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  border-radius: var(--space_16) var(--space_16) 0 0;
  visibility: hidden;
}
.lyf-ui-tab .lyf-ui-tab-items .lyf-ui-tab-item.active {
  color: var(--primary-color);
  font-weight: 500;
}
.lyf-ui-tab .lyf-ui-tab-item.active .lyf-ui-tab-line {
  background-color: var(--primary-color);
  visibility: visible;
}
.lyf-ui-tab .lyf-ui-tab-items.scrollable {
  justify-content: flex-start;
  flex-shrink: 0;
}
.lyf-ui-tab .lyf-ui-tab-items.scrollable .lyf-ui-tab-item {
  margin: 0 var(--space_12);
}
.lyf-ui-tab .lyf-ui-tab-items.scrollable .lyf-ui-tab-item:first-child {
  margin-left: 0;
}
.lyf-ui-tab .lyf-ui-tab-items.scrollable .lyf-ui-tab-item:last-child {
  margin-right: 0;
}
.lyf-ui-tab .lyf-ui-tab-items.widest .lyf-ui-tab-item:last-child {
  padding-right: var(--space_12);
}
.lyf-ui-tab .lyf-ui-tab-more {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 24px;
  height: 90%;
  background-color: var(--tab-shadow-color);
}
</style>