<template>
  <div class="faqiren">
    <ns-form :model="data" :schemas="formSchema" />
  </div>
</template>
<script lang="ts" setup>
  import { nextTick, ref, watch } from 'vue';
  const emits = defineEmits(['update:modelValue', 'change']);
  const props = defineProps({
    modelValue: {
      type: Object,
    },
  });
  let data = ref({
    compareType: 'in',
    numberAfterCompareType: false,
    paramKey: 'departmentMainUuid',
    value: [],
    valueType: 'number',
    checkbox: 'departmentMainUuid',
    dotDesc: null,
  });
  emits('update:modelValue', data.value);
  if (props.modelValue) {
    if (props.modelValue.checkbox == 'departmentMainUuid') {
      data.value = props.modelValue;
      data.value.departmentMainUuid = props.modelValue.value;
      emits('update:modelValue', data.value);
    }
  }

  const formSchema = ref([
    {
      field: 'departmentMainUuid',
      label: '主部门',
      component: 'NsSelectApi',
      componentProps: {
        placeholder: '请选择主部门',
        api: '/api/community/objs/admin/Department',
        resultField: 'data.data',
        labelField: 'departmentName',
        valueField: 'departmentUuid',
        filterOption: (input, option) => {
          return option.departmentName.indexOf(input) >= 0;
        },
        mode: 'multiple',
        showSearch: true,
        onChange: (v, o) => {
          console.log(o);
          if (o && o.length > 1) o.splice(0, 1);
          if (v && v.length > 1) v.splice(0, 1);
          let str = '';
          str = '主部门为' + o[0]?.departmentName;
          data.value.dotDesc = str;
          data.value.value = v;
        },
        immediate: true,
      },
    },
  ]);
  watch(
    () => data.value,
    (val) => {
      emits('update:modelValue', val);
    },
    { deep: true },
  );
</script>
<style lang="less" scoped></style>
