<script setup>
import { getTime } from '@/utils/utils.js'
const data = reactive({
  selectTime: {}
})
const { selectTime } = toRefs(data)
const props = defineProps(['arr', 'getData'])

let select = ref(null)
// 初始化 执行一次
onMounted(() => {
  props.arr.map((item) => {
    if (item.select) {
      select = item.value
    }
  })
  selectTime.value = getTime(select)
  props.getData(selectTime.value)
})
// 点击执行
const selectClick = (item) => {
  if (select === item.value) return
  select = item.value
  props.arr.map((ele) => {
    if (item.value === ele.value) {
      ele.select = true
    } else {
      ele.select = false
    }
  })
  selectTime.value = getTime(select)
  props.getData(selectTime.value)
}
</script>

<template>
  <div class="select-box">
    <div v-for="(item, index) in props.arr" :key="index" :class="item.select ? 'active' : ''" class="select-item" @click="selectClick(item)">
      {{ item.name }}
    </div>
  </div>
</template>
<style lang="scss" scoped>
.select-box {
  min-width: 2rem;
  height: 0.32rem;
  position: absolute;
  top: -0.02rem;
  right: 0.06rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
  .select-item {
    min-width: 0.6rem;
    height: 0.28rem;
    color: black;
    font-size: 0.14rem;
    line-height: 0.26rem;
    text-align: center;
    border: 1px solid rgb(220, 223, 230);
    background-color: white;
    cursor: pointer;
  }
  .active {
    color: #fff;
    border-width: 1px;
    background-color: rgb(64, 158, 255);
    border: 1px solid rgb(64, 158, 255);
    cursor: pointer;
  }
}
</style>
