<template>
  <radio-group class="radio-container" @change="handleChange">
    <label
      class="radio-item"
      v-for="(item, index) in options"
      :key="index"
      :class="{ selected: value === item.value }"
    >
      <view class="radio-icon">
        <view class="radio-inner"></view>
      </view>
      <text class="radio-label">{{ item.label }}</text>
      <radio :value="item.value" :checked="value === item.value" hidden />
    </label>
  </radio-group>
</template>

<script>
export default {
  name: "CommonRadio",
  props: {
    value: {
      type: [String, Number],
      default: "",
    },
    options: {
      type: Array,
      default: () => [
        { label: "正常", value: "normal" },
        { label: "异常", value: "abnormal" },
      ],
    },
  },
  methods: {
    handleChange(e) {
      this.$emit("input", e.detail.value);
      this.$emit("change", e.detail.value);
    },
  },
};
</script>

<style lang="less" scoped>
.radio-container {
  display: flex;
  gap: 16px;
  padding: 16px;
}

.radio-item {
  display: inline-block;
  height: 36px;
  line-height: 36px;
  text-align: center;
  min-width: 80px;
  padding: 0 10px;
  border-radius: 18px;
  transition: all 0.3s ease;
  background: #f2f2f2;

  .radio-label {
    font-size: 16px;
    color: #000000;
    font-weight: 400;
  }

  &.selected {
    background: #3774f6;
    .radio-label {
      color: #ffffff;
    }
  }

  /* 按压效果 */
  &:active {
    opacity: 0.9;
    transform: scale(0.98);
  }
}
</style>
