<template>
  <div class="custom-img-size-radio">
    <template v-for="item in list" :key="item.value">
      <template v-if="item.type == 'custom'">
        <div
          class="custom-input-parent"
          :class="{ active: item.value == Current_btn }"
          @click="onBtnChange(item)"
        >
          <div class="input-box-t">
            <CustomInput
              type="number"
              v-model="item.value1"
              placeholder=""
            ></CustomInput>
            <span class="center-text">x</span>
            <CustomInput
              type="number"
              v-model="item.value2"
              placeholder=""
            ></CustomInput>
          </div>
          <div class="label-text">{{ item.label }}</div>
        </div>
      </template>
      <template v-else>
        <div
          class="custom-radio-box"
          :class="{ active: item.value == Current_btn }"
          @click="onBtnChange(item)"
        >
          <div class="img-size-text">{{ item.value }}</div>
          <div class="label-text">{{ item.label }}</div>
        </div>
      </template>
    </template>
  </div>
</template>

<script lang="ts" setup>
import CustomInput from '@/components/custom/input/index.vue';
import { ref, watch } from 'vue';
const props = withDefaults(
  defineProps<{
    list: any[];
    modelValue: string;
  }>(),
  {}
);
const emit = defineEmits(['update:modelValue']);
// 当前选择的下标
const Current_btn = ref(props.modelValue);
const onBtnChange = (item: any) => {
  emit('update:modelValue', item.value);
};

watch(
  () => props.modelValue,
  (v) => {
    Current_btn.value = v;
  }
);
watch(
  () => Current_btn.value,
  (v) => {
    emit('update:modelValue', v);
  }
);
</script>

<style lang="less">
@import '@/style/variables.less';
.custom-img-size-radio {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 12px;
  .custom-input-parent {
    transition: all 0.3s;
    width: 50%;
    min-width: 250px;
    height: 94px;
    background: #181818;
    border: @main-border;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-direction: column;
    cursor: pointer;
    .input-box-t {
      display: flex;
      align-items: center;
      justify-content: center;
      .custom-input-global {
        width: 100px !important;
        height: 35px;
        .custom-input-box {
          width: 100%;
          height: 100%;
        }
      }
      .center-text {
        font-weight: 700;
        font-size: @font-size-20;
        color: #ffffff;
        padding: 0 12px;
      }
    }
    .label-text {
      color: #b1b5c4;
      font-size: @font-size-12;
    }
  }
  .custom-radio-box {
    transition: all 0.3s;
    width: 20%;
    min-width: 125px;
    height: 94px;
    background: #181818;
    border: @main-border;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    cursor: pointer;
    .img-size-text {
      font-weight: 700;
      font-size: @font-size-20;
    }
    .label-text {
      font-size: @font-size-12;
      color: #b1b5c4;
    }
  }
  .active {
    transition: all 0.3s;
    border-color: #00f9f9;
    .img-size-text,
    .label-text {
      color: #00f9f9;
    }
  }
}
</style>
