<template>
  <van-cell v-if="[9, 10].includes(actionQuestion.question_type)" title="选项随机" :border="false">
    <template #right-icon>
      <van-switch
        v-model="actionQuestion.config.select_random"
        class="option-action-sheet-switch"
        size="0.5rem"
        :active-value="1"
        :inactive-value="0"
        @change="emit('saveOption')"
      ></van-switch>
    </template>
  </van-cell>
  <van-field
    v-if="
      [9, 10].includes(actionQuestion.question_type) && actionQuestion.config.select_random === 1
    "
    v-model="actionQuestion.config.min_select"
    label=""
    :border="false"
    label-align="left"
    input-align="right"
    class="action-field"
    placeholder="不限"
    @blur="emit('saveOption')"
    @update:model-value="
      (value) => {
        actionQuestion.config.min_select = value;
      }
    "
  >
    <template #input>
      <div class="flex">
        <van-checkbox
          v-model="actionQuestion.config.row_random"
          shape="square"
          name="actionQuestion.config.row_random"
          icon-size="0.5rem"
          @change="emit('saveOption')"
        >
          行随机
        </van-checkbox>
        <van-checkbox
          v-model="actionQuestion.config.cell_random"
          class="ml10"
          shape="square"
          icon-size="0.5rem"
          name="actionQuestion.config.cell_random"
          @change="emit('saveOption')"
        >
          列随机
        </van-checkbox>
      </div>
    </template>
  </van-field>
  <!--  <van-cell-->
  <!--    title="右极文字"-->
  <!--    type="number"-->
  <!--    :border="false"-->
  <!--    label-align="left"-->
  <!--    input-align="right"-->
  <!--    label-width="8em"-->
  <!--    placeholder="不限"-->
  <!--    readonly-->
  <!--    @blur="emit('saveOption')"-->
  <!--  >-->
  <!--    <template #right-icon>-->
  <!--      <van-switch-->
  <!--        v-model="actionQuestion.config.is_limit_right_content"-->
  <!--        :active-value="1"-->
  <!--        :inactive-value="0"-->
  <!--        size="0.5rem"-->
  <!--        @change="emit('saveOption')"-->
  <!--      ></van-switch>-->
  <!--    </template>-->
  <!--  </van-cell>-->
  <!--  每行可选数量-->
  <van-cell
    v-if="[10].includes(actionQuestion.question_type)"
    title="每行可选数量"
    :border="false"
    label-align="left"
  >
  </van-cell>
  <van-cell-group v-if="[10].includes(actionQuestion.question_type)">
    <van-field
      v-model="actionQuestion.config.min_select"
      label="最少"
      type="digit"
      :border="false"
      label-align="left"
      input-align="right"
      class="action-field"
      placeholder="不限"
      @blur="minMax"
      @update:model-value="
        (value) => {
          actionQuestion.config.min_select = value;
        }
      "
    >
      <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="emit('saveOption')"
      @update:model-value="
        (value) => {
          actionQuestion.config.max_select = value;
        }
      "
    >
      <template #right-icon>
        <span>个</span>
      </template>
    </van-field>
  </van-cell-group>
</template>
<script setup>
import { computed, defineEmits } from 'vue';
// import { saveQuestion } from '@/api/design/index.js';
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 minMax = (e) => {
  // 如果大于最大的 max_select ， 那么就设置为 max_select
  if (Number(e.target.value) > Number(actionQuestion.value.config.max_select)) {
    //   其他情况， 如果 max_select 没有数值，那么就仅设置 min_select
    if (
      typeof actionQuestion.value.config.max_select === 'string' &&
      actionQuestion.value.config.max_select.length === 0
    ) {
      actionQuestion.value.config.min_select = e.target.value;
    } else {
      // 其他的情况下，如果 max_select 有数值，那么就重置 max_select
      actionQuestion.value.config.max_select = e.target.value;
    }
  }
  emit('saveOption');
};
</script>
<style scoped lang="scss">
.action-field {
  & ::v-deep .van-field__label {
    color: #bfbfbf;
    font-size: 14px;
  }
}
</style>
