<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 } }">
      <paas-tree :params="params" :disabled="see || disabled" :multiple="multiple" :modelValue="modelValue"
        @change="handleTreeChange" :url="url" :fieldNames="fieldNames" :open="open" :placeholder="placeholder"
        :style="style" v-bind="$attrs"></paas-tree>
    </a-form-item>
  </a-col>
</template>
<script>

export default {
  name: "FormTree",
  inheritAttrs: false, // 禁用自动继承，手动控制透传
  inject: {
    labelWidth: {
      from: 'labelWidth',
      default: '90px'
    },
    defaultColSpan: {
      from: 'defaultColSpan',
      default: 12
    }
  },
  props: {
    placeholder: {
      type: String,
      default: "",
    },
    textWidth: {
      type: String,
      default: ""
    },
    colSpan: { type: Number },
    multiple: {
      type: [Boolean, undefined],
      default: undefined
    },
    modelValue: {
      type: [String, Number, Array],
      default: null
    },
    open: {
      type: Boolean,
      default: false,
    },
    fieldNames: {
      type: Object,
      default: () => ({ children: 'children', title: 'title', key: 'id' })
    },
    params: {
      type: Object,
      default: () => ({})
    },
    label: {
      type: String,
      default: ""
    },
    name: {
      type: String,
      default: ""
    },
    disabled: {
      type: Boolean,
      default: false
    },
    url: {
      type: String,
      default: ""
    },
    onChange: {
      type: Function,
      default: null
    },
    style: { type: Object, default: () => ({ width: "100%" }) }
  },
  computed: {
    see() {
      return this.$store.forms.see;
    },
  },
  /*  watch: {
     modelValue(newValue) {
       console.log(this.modelValue, this.value)
       this.value = this.modelValue;
     }
   },
   data() {
     return {
       value: null,
     }
   }, */
  methods: {
    handleTreeChange(value) {
      this.$emit("update:modelValue", value);
      this.$emit("change", value);
    },
  }
};
</script>