<template>
  <div class="time-tab-pane-wrapper">
    <div 
    class="time-item" 
    :class="{'time-item-active': item.active}"
    v-for="item,index in timeList" 
    :key="index"
    @click="handleTimeClick(item,index)"
    >
  <div class="icon" v-if="item.active">
    <img src="./calendat-icon.svg" alt="">
  </div>
  <div class="text text-tip-1" :class="{'text-active': item.active}">{{ item.time }}</div>
  
  </div>
  </div>
</template>

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

const props = defineProps({
  activeTime: {
    typeof: String,
    default: '近一周'
  }
})

const timeList = ref([
  {
    time: '近一周',
    active: true
  },
   {
    time: '近一月',
    active: false
  },
   {
    time: '近一年',
    active: false
  },
])

onMounted(() => {
  timeList.value.forEach(item => { item.active = item.time === props.activeTime })
})

const handleTimeClick = (item, index) => {
  timeList.value.forEach(time => {
    time.active = false
  })
  timeList.value[index].active = true
  emit('time-click', item)
}

const emit = defineEmits(['time-click'])

</script>


<style lang="scss" scoped>
.time-tab-pane-wrapper{
  display: flex;
  width: 248px;
  height: 36px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50px;
  border: 2px solid rgba(255,255,255,1);
  .time-item{
    height: 32px;
    box-sizing: border-box;
    padding: 4px 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    .icon{
      width: 16px;
      height: 16px;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .text{
      color: var(--text-primary-50-color);
    }
    .text-active{
      color: var(--text-primary-80-color)
    }
  }
  .time-item-active{
    background: rgba(255, 255, 255, 0.65);
    border-radius: 50px;
    			box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
  }
}
</style>