<template>
  <van-field
    label="内容限制"
    :border="false"
    label-align="left"
    input-align="right"
    is-link
    readonly
    :value="selectText"
    @click="selectTextTypeModel = true"
  >
    <template #input>
      <span>{{ selectText }}</span>
    </template>
  </van-field>
  <van-cell-group>
    <van-field
      v-if="[2].includes(actionQuestion.config.text_type)"
      v-model="actionQuestion.config.decimal_few"
      label="保留小数位"
      type="number"
      :border="false"
      label-align="left"
      input-align="right"
      class="action-field"
      placeholder="不限"
      max="4"
      min="0"
      @blur="emit('saveOption')"
      @update:model-value="
        (value) => {
          actionQuestion.config.line_height = value;
        }
      "
    >
      <template #right-icon>
        <span>位</span>
      </template>
    </van-field>
    <van-field
      v-if="[3, 4].includes(actionQuestion.config.text_type)"
      v-model="actionQuestion.config.decimal_few"
      label="允许输入标点符号"
      type="number"
      :border="false"
      label-align="left"
      input-align="right"
      class="action-field"
      label-width="8em"
      placeholder="不限"
      readonly
      @blur="emit('saveOption')"
      @update:model-value="
        (value) => {
          actionQuestion.config.line_height = value;
        }
      "
    >
      <template #input></template>
      <template #right-icon>
        <van-switch
          v-model="actionQuestion.config.include_mark"
          :active-value="1"
          :inactive-value="0"
          size="0.5rem"
          @change="emit('saveOption')"
        ></van-switch>
      </template>
    </van-field>
  </van-cell-group>

  <van-cell
    v-if="![5, 6, 7].includes(actionQuestion.config.text_type)"
    :title="`${[1, 2].includes(actionQuestion.config.text_type) ? '数值限制' : '字数限制'}`"
    :border="false"
    label-align="left"
  >
  </van-cell>
  <van-cell-group>
    <van-field
      v-if="![5, 6, 7].includes(actionQuestion.config.text_type)"
      v-model="actionQuestion.config.min"
      label="最少"
      type="digit"
      :border="false"
      label-align="left"
      input-align="right"
      class="action-field"
      placeholder="不限"
      @blur="minVaule"
      @update:model-value="
        (value) => {
          actionQuestion.config.min = value;
        }
      "
    >
      <template #right-icon>
        <span>个</span>
      </template>
    </van-field>
    <van-field
      v-if="![5, 6, 7].includes(actionQuestion.config.text_type)"
      v-model="actionQuestion.config.max"
      label="最多"
      type="digit"
      :min="Number(actionQuestion.config.min)"
      :border="false"
      placeholder="不限"
      input-align="right"
      class="action-field"
      @blur="emit('saveOption')"
      @update:model-value="
        (value) => {
          actionQuestion.config.max = value;
        }
      "
    >
      <template #right-icon>
        <span>个</span>
      </template>
    </van-field>
  </van-cell-group>
  <van-cell
    v-if="[0].includes(actionQuestion.config.text_type)"
    title="文本类型"
    :border="false"
    label-align="left"
  >
    <template #right-icon>
      <van-radio-group
        v-model="actionQuestion.config.line_type"
        icon-size="0.4rem"
        direction="horizontal"
        @change="editLineHeight"
      >
        <van-radio :name="0">单行</van-radio>
        <van-radio :name="1">多行</van-radio>
      </van-radio-group>
    </template>
  </van-cell>
  <van-cell-group>
    <van-field
      v-if="[0].includes(actionQuestion.config.text_type) && actionQuestion.config.line_type === 1"
      v-model="actionQuestion.config.line_height"
      label="文本高度"
      type="number"
      :border="false"
      label-align="left"
      input-align="right"
      class="action-field"
      placeholder="不限"
      @blur="emit('saveOption')"
      @update:model-value="
        (value) => {
          actionQuestion.config.line_height = value;
        }
      "
    >
      <template #right-icon>
        <span>行</span>
      </template>
    </van-field>
    <van-field
      v-model="actionQuestion.config.placeholder"
      label="输入框提示"
      :border="false"
      label-align="left"
      input-align="right"
      class="action-field"
      placeholder=""
      @blur="emit('saveOption')"
      @update:model-value="
        (value) => {
          actionQuestion.config.line_height = value;
        }
      "
    >
    </van-field>
  </van-cell-group>

  <van-popup v-model:show="selectTextTypeModel" position="bottom" round>
    <van-picker
      :columns="textTypeList"
      @confirm="confirm"
      @cancel="selectTextTypeModel = false"
    ></van-picker>
  </van-popup>
</template>
<script setup>
import { computed, defineEmits, ref } from 'vue';
const props = defineProps({
  modelValue: {
    type: Object,
    default: () => {
      return {};
    }
  }
});

const selectTextTypeModel = ref(false);
const textTypeList = [
  {
    text: '不限',
    value: 0
  },
  {
    text: '整数',
    value: 1
  },
  {
    text: '小数',
    value: 2
  },
  {
    text: '字母',
    value: 3
  },
  {
    text: '中文',
    value: 4
  },
  {
    text: 'email',
    value: 5
  },
  {
    text: '手机号',
    value: 6
  },
  {
    text: '身份证号',
    value: 7
  }
];

const emit = defineEmits(['update:modelValue', 'saveOption']);
//

const selectText = computed(() => {
  const item = textTypeList.find((item) => item.value === actionQuestion.value.config.text_type);
  return item?.text || '';
});
const confirm = ({ selectedValues }) => {
  actionQuestion.value.config.text_type = Number(selectedValues[0]);
  selectTextTypeModel.value = false;
  emit('saveOption');
};
const minVaule = (e) => {
  if (actionQuestion.value.config.max) {
    if (Number(e.target.value) > Number(actionQuestion.value.config.max)) {
      actionQuestion.value.config.min = actionQuestion.value.config.max;
    }
  }
  emit('saveOption');
};
const editLineHeight = () => {
  if (actionQuestion.value.config.line_type === 0) {
    actionQuestion.value.config.line_height = 1;
  }
  emit('saveOption');
};

const actionQuestion = computed({
  get() {
    return props.modelValue;
  },
  set(newValue) {
    emit('update:modelValue', newValue);
  }
});
</script>
<style scoped lang="scss">
.action-field {
  :deep(.van-field__label) {
    color: rgba(102, 102, 102, 1);
    //color: #bfbfbf;
    font-size: 14px;
  }
}
</style>
