<!-- ToggleButtons.vue -->
<template>
  <div class="toggle-container">
    <span
      v-for="option in options"
      :key="option.value"
      class="toggle-button"
      :class="{ active: selectedValue === option.value }"
      @click="toggleSelection(option.value)"
    >
      {{ option.label }}
    </span>
  </div>
</template>

<script>
export default {
  name: "FlexRadio",
  props: {
    value: {
      type: [String, Number, null],
      default: null
    },
    options: {
      type: Array,
      required: true,
      validator: value => value.length === 2
    }
  },
  data() {
    return {
      selectedValue: this.value
    }
  },
  watch: {
    value(newVal) {
      this.selectedValue = newVal
    }
  },
  methods: {
    toggleSelection(value) {
      this.selectedValue = this.selectedValue === value ? null : value
      this.$emit('input', this.selectedValue)
      this.$emit('change', this.selectedValue)
    }
  }
}
</script>

<style scoped>
.toggle-container {
  //display: flex;
  //gap: 12px;
  //align-items: center;
}

.toggle-button {
  position: relative;
  padding: 5px;  /* 原 8px → 2px（减少75%） */
  line-height: 1.2;    /* 标准行高替代默认值 */
  margin-right: 10px;          /* 清除浏览器默认外边距 */
  align-content: center;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
  width: 70px;
  color: rgba(0, 0, 0, 0.85);
}

.toggle-button:hover {
  border-color: #40a9ff;
  color: #40a9ff;
}

.toggle-button.active {
  border-color: #1890ff;
  background-color: #e6f7ff;
  color: #1890ff;
  box-shadow: 0 2px 4px rgba(24, 144, 255, 0.2);
}
</style>