<template>
  <a-select :options="internalOptions" :mode="multiple ? 'multiple' : undefined" :value="stringValue"
    @update:value="handleValueChange" :disabled="see || disabled" :allowClear="true" :style="style"
    :placeholder="placeholder"  v-bind="$attrs" />
</template>

<script>
export default {
  name: "PaasSelect",
  inheritAttrs: false,
  computed: {
    see() {
      return this.$store?.forms?.see || false;
    }
  },
  props: {
    placeholder: { type: String, default: "" },
    multiple: { type: Boolean, default: false },
    disabled: { type: Boolean, default: false },
    modelValue: { type: [String, Number, Array], default: null },
    data: { type: Array, default: () => [] },
    params: { type: String, default: "" },
    style: { type: [String, Object], default: "width: 100%;" },
  },
  data() {
    return {
      stringValue: null,
      internalOptions: [],
      originMap: new Map(), // string → 原始 value
      isInternalUpdate: false,
    };
  },
  created() {
    this.initOptions();
  },
  watch: {
    modelValue: {
      handler(newVal) {
        this.isInternalUpdate = true;
        this.setInternalValue(newVal);
        this.$nextTick(() => {
          this.isInternalUpdate = false;
        });
      },
      immediate: true
    },
    data() {
      this.initOptions();
    },
    internalOptions: {
      handler() {
        if (this.originMap.size > 0 && this.modelValue != null) {
          this.setInternalValue(this.modelValue);
        }
      }
    },
    stringValue(newVal) {
      if (this.isInternalUpdate) return;

      if (this.multiple) {
        const originValues = Array.isArray(newVal)
          ? newVal.map(v => this.originMap.get(v)).filter(v => v !== undefined)
          : [];
        // 处理空数组的情况，确保能正确传递空值
        const joined = originValues.length > 0 ? originValues.join(",") : "";
        this.$emit("update:modelValue", joined);
        this.$emit("change", joined);
      } else {
        // 处理单选为空的情况，确保能正确传递空值
        const result = newVal != null && newVal !== "" ? this.originMap.get(newVal) ?? null : null;
        this.$emit("update:modelValue", result);
        this.$emit("change", result);
      }
    }
  },
  methods: {
    initOptions() {
      const rawOptions = this.data.length > 0
        ? this.data
        : (this.$store?.dicts?.[this.params] || []);

      this.originMap.clear();
      this.internalOptions = rawOptions.map(item => {
        const key = String(item.value);
        this.originMap.set(key, item.value); // 保存原始值
        return { ...item, value: key };      // option.value 必须是字符串
      });
    },
    setInternalValue(val) {
      if (this.multiple) {
        if (Array.isArray(val)) {
          this.stringValue = val.map(v => String(v));
        } else if (typeof val === "string" && val.trim() !== "") {
          this.stringValue = val.split(",").map(v => v.trim()).filter(Boolean);
        } else if (val != null) {
          this.stringValue = [String(val)];
        } else {
          this.stringValue = [];
        }
      } else {
        this.stringValue = val != null ? String(val) : null;
      }
    },
    handleValueChange(val) {
      this.stringValue = val;
    }
  }
};
</script>