<template>
  <a-col :span="colSpan ? colSpan : defaultColSpan">
    <a-form-item :label="label" :name="name" :icon="icon"
      :label-col="{ style: { width: !!textWidth ? textWidth : labelWidth } }" :wrapper-col="{ style: { flex: 1 } }">
      <a-input :type="type" :value="modelValue" @input="updateValue" :disabled="see || readonly"
        :placeholder="placeholder" :style="style" v-bind="$attrs" />
    </a-form-item>
  </a-col>
</template>

<script>
export default {
  name: "FormInput",
  inheritAttrs: false, // 禁用自动继承，手动控制透传
  inject: {
    labelWidth: {
      from: 'labelWidth',
      default: '90px'
    },
    defaultColSpan: {
      from: 'defaultColSpan',
      default: 12
    }
  },
  props: {
    placeholder: {
      type: String,
      default: "",
    },
    label: {
      type: String,
      default: ""
    },
    name: {
      type: String,
      default: ""
    },
    type: {
      type: String,
      default: "text"
    },
    modelValue: {
      type: [String, Number, Object],
      default: ""
    },
    textWidth: {
      type: String,
      default: ""
    },
    colSpan: { type: Number }, // 单个控件自定义列跨度，优先级高于 defaultColSpan
    icon: {
      type: String,
      default: ""
    },
    readonly: {
      type: Boolean,
      default: false
    },
    style: { type: Object, default: () => ({ width: "100%" }) }
  },
  computed: {
    see() {
      return this.$store.forms.see;
    },
  },
  emits: ["update:modelValue"],
  methods: {
    updateValue(event) {
      this.$emit("update:modelValue", event.target.value);
    }
  }
};
</script>
