<template>
  <div class="time-range-group">
    <div
        class="time-range-button"
        :class="{ 'time-range-button-active': selectButton == index }"
        @click="select(index)"
        v-for="(item, index) in buttonList"
        :key="index"
    >
      <div class="time-range-text">{{ item }}</div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  // 按钮列表
  buttonList: {
    type: Array,
    default: () => [],
  },
  // 按钮选中的值
  modelValue: {
    type: Number,
    default: 0,
  },
  width: {
    type: String,
    default: "auto",
  },
});
const emit = defineEmits(["update:modelValue", "select"]);

const selectButton = ref(props.modelValue);

const select = (index) => {
  if (selectButton.value === index) return;
  selectButton.value = index;
  emit("update:modelValue", index);
  emit("select", index);
};

watchEffect(() => {
  selectButton.value = props.modelValue;
});
</script>

<style scoped lang="scss">
.time-range-group {
  //width: 254px;
  //height: 78px;
  border: 2px solid #0F82AF;
  border-radius: 10px;
  background: #062247;
  display: flex;
  font-size: 40px;
  .time-range-button {
    cursor: pointer;
    padding: 18px 24px;
    box-sizing: border-box;
    color: #FFFFFF;
    &.time-range-button-active {
      background: #264A78;
      border-radius: 10px;
      color: #FFFFFF;
    }
  }
}
</style>
