<script lang="ts" setup>
  import { getOrganizationList } from '/@/api/system/system';
  import { BasicForm, useForm } from '/@/components/Form';
  import { copyTransFun } from '/@/utils/fnUtils';
  import { watch } from 'vue';
  import { nextTick } from 'vue';
  import { findDictItemByCode } from '/@/api/system/dict';
  import { DictEnum } from '/@/enums/dictEnum';
  import { FormFieldsEnum } from '.';
  import { isObject } from '/@/utils/is';
  import { createPickerSearch } from '/@/utils/pickerSearch';
  import { doQueryDeviceProfileList } from '/@/api/device/deviceConfigApi';
  import { useI18n } from '/@/hooks/web/useI18n';

  const props = withDefaults(
    defineProps<{
      value?: Recordable;
      paramsOrg?: string;
    }>(),
    {
      value: () => ({}),
    }
  );

  const emit = defineEmits(['update:value', 'change']);

  const handleChange = (key: string, value: string | string[], option: Recordable) => {
    emit('change', key, value, option);
  };

  const handleEmit = async (key: string, value: string | string[], option: Recordable) => {
    await nextTick();
    let _value = getFieldsValue();
    _value = {
      ..._value,

      ...(key === FormFieldsEnum.DEVICE_TYPE
        ? {
            [FormFieldsEnum.DEVICE_PROFILE]: null,
          }
        : {}),
    };
    handleChange(key, value, option);
    emit('update:value', { ..._value });
  };

  const { t } = useI18n();
  const [register, { setFieldsValue, getFieldsValue, resetFields, updateSchema }] = useForm({
    schemas: [
      {
        field: FormFieldsEnum.DEVICE_TYPE,
        component: 'ApiSelect',
        label: '',
        componentProps: () => {
          return {
            api: findDictItemByCode,
            params: {
              dictCode: DictEnum.DEVICE_TYPE,
            },
            labelField: 'itemText',
            valueField: 'itemValue',
            placeholder: t('component.apiSelect.deviceType'),
            onChange(value: string, option: Recordable) {
              handleEmit(FormFieldsEnum.DEVICE_TYPE, value, option);
            },
            ...createPickerSearch(),
          };
        },
      },
      {
        field: FormFieldsEnum.ORGANIZATION,
        component: 'ApiTreeSelect',
        label: '',
        componentProps: () => {
          return {
            api: async () => {
              try {
                const data = await getOrganizationList();
                copyTransFun(data as any);
                return data;
              } catch (error) {
                console.error(error);
                return [];
              }
            },
            placeholder: t('component.apiSelect.organization'),
            labelField: 'name',
            valueField: 'id',
            childField: 'children',
            onChange(value: string, option: Recordable) {
              handleEmit(FormFieldsEnum.ORGANIZATION, value, option);
            },
            getPopupContainer: () => document.body,
          };
        },
      },
      {
        field: FormFieldsEnum.DEVICE_PROFILE,
        component: 'ApiSelect',
        label: '',
        componentProps: ({ formModel }) => {
          const deviceType = Reflect.get(formModel, FormFieldsEnum.DEVICE_TYPE);
          return {
            api: doQueryDeviceProfileList,
            params: {
              deviceType,
            },
            placeholder: t('component.apiSelect.product'),
            labelField: 'name',
            valueField: 'id',
            onChange(value: string, options: Recordable) {
              handleEmit(FormFieldsEnum.DEVICE_PROFILE, value, options);
            },
            ...createPickerSearch(),
          };
        },
      },
    ],
    showActionButtonGroup: false,
    layout: 'inline',
    baseColProps: { span: 8 },
  });

  const setValue = async () => {
    await nextTick();
    if (!props.value || (isObject(props.value) && !Object.values(props.value).length)) {
      resetFields();
      return;
    }
    setFieldsValue(props.value);
  };

  watch(
    () => props.value,
    () => {
      if (Reflect.has(props.value, 'paramsOrg')) {
        nextTick(() => {
          const { paramsOrg, change } = props.value;
          updateOrgSchema(paramsOrg, change);
        });
      }
      setValue();
    },
    {
      immediate: true,
    }
  );

  //更新组织，只能选择层级以下
  const getOrganizationLevelList = async (organizationId) => {
    const data = await getOrganizationList({ organizationId });
    copyTransFun(data as any);
    return data;
  };

  const updateOrgSchema = async (organizationId: string, change?: boolean) => {
    const data = await getOrganizationLevelList(organizationId);
    if (change) {
      setFieldsValue({
        [FormFieldsEnum.ORGANIZATION]: null,
        [FormFieldsEnum.DEVICE_PROFILE]: [],
      });
    }
    updateSchema({
      field: FormFieldsEnum.ORGANIZATION,
      componentProps: {
        treeData: data,
        onChange(value: string, option: Recordable) {
          handleEmit(FormFieldsEnum.ORGANIZATION, value, option);
        },
      },
    });
  };
  //
</script>

<template>
  <BasicForm @register="register" class="device-picker" />
</template>

<style lang="less" scoped>
  .device-picker {
    :deep(.ant-row) {
      width: 100%;
    }

    :deep(.ant-form-item-control-input-content) {
      div > div {
        width: 100%;
      }
    }
  }
</style>