import { InputNumber } from "ant-design-vue";
import { defineComponent } from "vue";
import { any } from "vue-types";

export const GroupNumber = defineComponent({
  props: {
    value: any<number[]>().def([]),
    labels: any<string[]>().def([]),
  },
  emits: ["change"],
  setup(props, { emit }) {
    function changeVal(index: number, v: any) {
      const { value } = props;
      value[index] = parseInt(v) || 0;
      emit("change", value);
    }

    return () => (
      <div class="flex space-x-4px">
        {props.labels.map((label, i) => (
          <InputNumber
            value={props.value[i]}
            key={i}
            addon-before={label}
            onChange={changeVal.bind(null, i)}
          />
        ))}
      </div>
    );
  },
});
