<template>
  <div class="fans-date-switch">
    <span
      class="medium-12px scale-item"
      :class="{ 'switch-active': timeScale === 'hour' }"
      @click="switchTimeScale('hour')"
      >{{ $t('global.datePicker.lastHour') }}</span
    >
    <span
      class="medium-12px scale-item"
      :class="{ 'switch-active': timeScale === 'day' }"
      @click="switchTimeScale('day')"
      >{{ $t('global.datePicker.lastDay') }}</span
    >
    <!--<span
      class="medium-12px scale-item"
      :class="{ 'switch-active': timeScale === 'week' }"
      @click="switchTimeScale('week')"
      >{{ $t('global.date.lastWeek') }}</span
    >
    <span
      class="medium-12px scale-item"
      :class="{ 'switch-active': timeScale === 'mounth' }"
      @click="switchTimeScale('mounth')"
      >{{ $t('global.date.lastMounth') }}</span
    >
    <span
      class="medium-12px scale-item"
      :class="{ 'switch-active': timeScale === 'year' }"
      @click="switchTimeScale('year')"
      >{{ $t('global.date.lastYear') }}</span
    >
    <div class="slider" />
    <div class="date-picker">
      <img src="@/assets/images/calendar-icon.svg" />
      <span class="medium-12px scale-item">{{
        $t('global.date.selectDate')
      }}</span>
    </div>-->
    <!-- <img class="date-clear" src="@/assets/images/icon-clear-red.svg" /> -->
  </div>
</template>

<script>
export default {
  props: {
    timeScale: {
      type: String,
      default: 'hour',
    },
    switchTimeScale: {
      type: Function,
      required: true,
    },
  },
};
</script>
<style lang="scss" scoped>
.fans-date-switch {
  position: relative;

  height: 48px;
  padding: 0 16px 0 32px;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 24px;
  border-bottom: 1px solid $gray-10;
}

.switch-active {
  color: $primary;
  transition: ease-in 0.15s;
}

.slider {
  position: absolute;
  height: 0px;
  border-bottom: 4px solid $primary;
  transition: ease-in 0.2s;
  bottom: 0px;
}

.scale-item {
  cursor: pointer;
}

.scale-item:nth-child(1).switch-active ~ .slider {
  width: 92px;
  left: 31px;
}

.scale-item:nth-child(2).switch-active ~ .slider {
  left: 135px;
  width: 105px;
}

.scale-item:nth-child(3).switch-active ~ .slider {
  left: 255px;
  width: 112px;
}

.scale-item:nth-child(4).switch-active ~ .slider {
  left: 383px;
  width: 107px;
}

.scale-item:nth-child(5).switch-active ~ .slider {
  left: 508px;
  width: 90px;
}

.date-picker {
  display: flex;
  align-items: center;
  gap: 9px;
}

.date-clear {
  margin-left: auto;
  cursor: pointer;
}
</style>
