<template>
  <div>
    <div class="date_switch_component" v-if="isYear">
      <span
        v-for="tab in tabs"
        :key="tab.value"
        :class="['date_tab', { active: activeTab === tab.value }]"
        @click="switchTab(tab.value)"
      >
        {{ tab.label }}
      </span>
    </div>
    <div class="date_switch_component" v-else>
      <span
        v-for="tab in tabs1"
        :key="tab.value"
        :class="['date_tab', { active: activeTab === tab.value }]"
        @click="switchTab(tab.value)"
      >
        {{ tab.label }}
      </span>
    </div>
  </div>
</template>

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

const props = defineProps({
  isYear: {
    type: Boolean,
    default: true
  }
})
const emit = defineEmits(['tab-change'])
// 当前激活的 tab
const activeTab = ref('day')

// tab 列表
const tabs = [
  { label: '年', value: 'year' },
  { label: '月', value: 'month' },
  { label: '周', value: 'week' },
  { label: '日', value: 'day' }
]
const tabs1 = [
  { label: '月', value: 'month' },
  { label: '周', value: 'week' },
  { label: '日', value: 'day' }
]
// 切换 tab 方法
const switchTab = (tab) => {
  activeTab.value = tab
  emit('tab-change', tab)
}
</script>

<style lang="less" scoped>
.date_switch_component {
  display: flex;
  align-items: center;
  background-color: #e0e0e0;
  border-radius: 20px;
  .date_tab {
    font-size: 12px;
    padding: 5px 8px;
    margin: 0 5px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s ease;

    &:hover {
      padding: 2px 8px;
      border-radius: 16px;
      background-color: #fff;
    }

    &.active {
      padding: 2px 8px;
      border-radius: 16px;
      background-color: #fff;
      // font-weight: bold;
    }
  }
}
</style>
