<template>
  <van-cell title="选项数量" :border="false" label-align="left"> </van-cell>
  <van-field
    v-model="actionQuestion.config.min_select"
    label="最少"
    type="digit"
    :border="false"
    label-align="left"
    input-align="right"
    class="action-field"
    placeholder="不限"
    @blur="minVaule"
    @update:model-value="
      (value) => {
        actionQuestion.config.min_select = value;
      }
    "
  >
    <!--    <template #input>-->
    <!--      <van-step></van-step>-->
    <!--    </template>-->
    <template #right-icon>
      <span>个</span>
    </template>
  </van-field>
  <van-field
    v-model="actionQuestion.config.max_select"
    label="最多"
    type="digit"
    :border="false"
    placeholder="不限"
    input-align="right"
    class="action-field"
    @blur="maxValue"
    @update:model-value="
      (value) => {
        actionQuestion.config.max_select = value;
      }
    "
  >
    <template #right-icon>
      <span>个</span>
    </template>
  </van-field>
</template>
<script setup>
import { computed, defineEmits } from 'vue';
const props = defineProps({
  modelValue: {
    type: Object,
    default: () => {
      return {};
    }
  }
});

const emit = defineEmits(['update:modelValue', 'saveOption']);
const actionQuestion = computed({
  get() {
    return props.modelValue;
  },
  set(newValue) {
    emit('update:modelValue', newValue);
  }
});
// 最小大于最大 同步到最大
const minVaule = (e) => {
  if (actionQuestion.value.config.max_select) {
    if (Number(e.target.value) > Number(actionQuestion.value.config.max_select)) {
      actionQuestion.value.config.min_select = actionQuestion.value.config.max_select;
    }
  }
  emit('saveOption');
};

const maxValue = (e) => {
  if (actionQuestion.value.config.min_select && e.target.value != '') {
    if (Number(e.target.value) < Number(actionQuestion.value.config.min_select)) {
      actionQuestion.value.config.max_select = actionQuestion.value.config.min_select;
    }
  }
  emit('saveOption');
};
</script>
<style scoped lang="scss">
.action-field {
  & ::v-deep .van-field__label {
    color: #bfbfbf;
    font-size: 14px;
  }
}
</style>
