<template>
  <a-col :span="colSpan ? colSpan : defaultColSpan">
    <a-form-item :label="label" :name="name" :label-col="{ style: { width: !!textWidth ? textWidth : labelWidth } }"
      :wrapper-col="{ style: { flex: 1 } }">
      <a-switch :checked="modelValue" :checked-children="checkedText"
        :un-checked-children="unCheckedText" :disabled="isDisabled" @change="handleChange" :style="style" v-bind="$attrs" />
    </a-form-item>
  </a-col>
</template>

<script>
export default {
  name: "FormSwitch",
  inheritAttrs: false, // 禁用自动继承，手动控制透传
  inject: {
    labelWidth: {
      from: "labelWidth",
      default: "90px",
    },
    defaultColSpan: {
      from: 'defaultColSpan',
      default: 12
    }
  },
  props: {
    placeholder: String, // 无需默认值，a-switch 不使用
    label: String,
    name: String,
    colSpan: { type: Number }, // 自定义列跨度
    textWidth: {
      type: String,
      default: ""
    },
    modelValue: {
      type: [Number, Boolean],
      required: true,
    },
    checkedText: {
      type: String,
      default: "开",
    },
    unCheckedText: {
      type: String,
      default: "关",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    style: { type: Object, default: () => ({}) }
  },
  computed: {
    isDisabled() {
      return this.see || this.disabled;
    },
    see() {
      return this.$store?.forms?.see || false;
    }
  },
  methods: {
    handleChange(value) {
      // Ant Design Vue 的 a-switch 在 change 事件中返回的是 value（非对象）
      this.$emit("update:modelValue", value);
      this.$emit("change", value);
    },
  },
};
</script>
