<template>
  <div class="custom-public-radio-group">
    <template v-for="item in list" :key="item.label">
      <TButton
        class="analog-button"
        :class="{
          'btn-active': item.value == CurrentValue,
        }"
        @click="GroupChange(item)"
        >{{ item.label }}</TButton
      >
    </template>
  </div>
</template>

<script lang="ts" setup>
import { Button as TButton } from 'tdesign-vue-next';
import { ref } from 'vue';
const props = defineProps({
  modelValue: [String, Number],
  list: Object as any,
});
const emit = defineEmits(['update:modelValue']);

const CurrentValue = ref(props.modelValue);
const GroupChange = (item: any) => {
  CurrentValue.value = item.value;
  emit('update:modelValue', item.value);
};
</script>

<style lang="less">
@import '@/style/variables.less';
.custom-public-radio-group {
  width: 100%;
  display: flex;
  justify-content: space-between;
  & > :not(:first-child):not(:last-child) {
    margin: 0 12px;
  }
  .analog-button {
    height: 35px;
    background: #2d2d2d;
    width: 131px;
    border-radius: 8px;
    font-weight: 700;
    font-size: @font-size-20;
    border: @main-border;
    --ripple-color: none !important;
    transition: all 0.2s;
    &:hover {
      background: #2d2d2d;
      border: @main-border;
    }
  }
  .btn-active {
    border: 2px solid #00dddd;
    color: #00dddd;
    transition: all 0.2s;
    &:hover {
      border: 2px solid #00dddd;
      color: #00dddd;
    }
  }
}
</style>
