<template>
  <!-- 邮箱手机号身份证号 -->
  <a-input
    v-if="[5, 6, 7].includes(config.text_type)"
    :value="value"
    :placeholder="config.placeholder"
    :addonAfter="config.right_prompt"
    :addonBefore="config.left_prompt"
    @change="changeValue"
    :disabled="disabled"
  />
  <!-- 整数小数 -->
  <a-input
    v-else-if="config.text_type === 1 || config.text_type === 2"
    type="number"
    :value="value"
    :placeholder="config.placeholder"
    :addonAfter="config.right_prompt"
    :addonBefore="config.left_prompt"
    :step="config.text_type === 1 ? 1 : 1 / Math.pow(10, config.decimal_few || 0)"
    @change="changeValue"
    @blur="imposeNum"
    :disabled="disabled"
  />
  <!-- 其他 -->
  <div v-else>
    <!-- 多行 -->
    <a-textarea
      v-if="config.line_type"
      :value="value"
      :placeholder="config.placeholder"
      :addonAfter="config.right_prompt"
      :addonBefore="config.left_prompt"
      @change="changeValue"
      :disabled="disabled"
      :auto-size="{
        minRows: config.line_height,
        maxRows: config.line_height,
      }"
    />
    <!-- 单行 -->
    <a-input
      v-else
      :value="value"
      :placeholder="config.placeholder"
      :addonAfter="config.right_prompt"
      :addonBefore="config.left_prompt"
      @change="changeValue"
      :disabled="disabled"
    />
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";
import { message } from "ant-design-vue";

export default defineComponent({
  props: {
    // 配置
    config: {
      type: Object,
      default: () => {},
    },
    // 答案
    answer: {
      type: Object,
      default: () => {},
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, context) {
    const value = ref(""); // 值

    // 初始化
    function init() {
      if (props.answer) {
        value.value = props.answer.value;
      }
    }
    init();

    // 输入回调
    function changeValue(e) {
      let { value: val } = e.target;
      // 整数限制
      if (props.config.text_type === 1 && !/^-?[0-9]\d*$/.test(val) && val) {
        val = value.value;
      }
      // 小数位数限制
      if (props.config.text_type === 2) {
        if (val.split(".")[1]?.length > props.config.decimal_few) {
          val = value.value;
        }
      }
      // 数值限制(最大)
      if (
        val &&
        props.config.max !== "" &&
        val > props.config.max &&
        [1, 2].includes(props.config.text_type)
      ) {
        val = value.value;
      }
      // 长度限制(最大)
      if (
        props.config.max &&
        val.length > props.config.max &&
        [0, 3, 4].includes(props.config.text_type)
      ) {
        val = value.value;
      }
      value.value = val;
      context.emit("changeValue", val);
      // 更新答案
      if (val) {
        context.emit("update:answer", { value: val });
      } else {
        context.emit("update:answer", null);
      }
    }

    // 数值限制
    function imposeNum() {
      let val = value.value;
      if (!val) {
        return message.error(`请输入数字`);
      }
      
      if (!isNaN(val) && Number(val) < Number(props.config.min)) {
        changeValue({ target: { value: "" } });
        message.error(`请输入大于等于${props.config.min}的数字`);
      }
      if (!isNaN(val) && Number(val) > Number(props.config.max)) {
        changeValue({ target: { value: "" } });
        message.error(`请输入大于等于${props.config.max}的数字`);
      }
    }

    return { value, changeValue, imposeNum };
  },
});
</script>

<style lang="scss" scoped>
.ant-input {
  width: 225px;
}

.ant-input-group-wrapper {
  width: auto;

  :deep(.ant-input) {
    width: 225px;
  }
}
</style>
