<script lang="ts" setup>
  import { ref, unref } from 'vue';
  import { useGenerateFormSchemasByObjectModel } from './useGenerateFormSchemasByObjectModel';
  import { ModalParamsType } from '/#/utils';
  import { DeviceModelOfMatterAttrs, DeviceRecord } from '/@/api/device/model/deviceModel';
  import { BasicForm, useForm } from '/@/components/Form';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { CommandTypeEnum } from '/@/enums/deviceEnum';
  import { DataTypeEnum, FunctionTypeEnum } from '/@/enums/objectModelEnum';
  import { useCommandDelivery } from '/@/hooks/business/useCommandDelivery';
  import { useMessage } from '/@/hooks/web/useMessage';

  defineEmits(['register']);
  const props = defineProps<{ deviceId: string; deviceName: string }>();

  const [registerForm, { setProps, getFieldsValue, resetFields, validate }] = useForm({
    schemas: [],
    showActionButtonGroup: false,
    layout: 'vertical',
  });

  const { getFormByObjectModel } = useGenerateFormSchemasByObjectModel();

  const currentParams = ref<{
    deviceDetail: DeviceRecord;
    objectModel: DeviceModelOfMatterAttrs;
  }>();

  const [register] = useModalInner(
    async (
      params: ModalParamsType<{ deviceDetail: DeviceRecord; objectModel: DeviceModelOfMatterAttrs }>
    ) => {
      const { record } = params;
      currentParams.value = record;
      const { objectModel, deviceDetail } = record;
      const schemas = getFormByObjectModel(objectModel, deviceDetail);
      setProps({ schemas });
      resetFields();
    }
  );

  const { createMessage } = useMessage();
  const loading = ref(false);
  const handleSend = async () => {
    try {
      loading.value = true;
      if (!props.deviceId) return;

      await validate();
      const { deviceDetail, objectModel } = unref(currentParams) || {};

      let value = getFieldsValue();
      if (objectModel?.detail.dataType.type !== DataTypeEnum.STRUCT) {
        value = value[objectModel!.identifier];
      }

      const { doCommandDelivery } = useCommandDelivery();

      await doCommandDelivery({
        deviceDetail,
        objectModel: {
          ...(objectModel || {}),
          functionName: objectModel!.name,
          identifier: objectModel!.identifier,
          functionType: FunctionTypeEnum.PROPERTIES,
          specs: objectModel?.detail,
        },
        cmdType: CommandTypeEnum.ATTRIBUTE,
        value,
      });

      createMessage.success('属性下发成功');
    } catch (error) {
      throw error;
    } finally {
      loading.value = false;
    }
  };
</script>

<template>
  <BasicModal
    title="属性下发"
    @register="register"
    :min-height="60"
    ok-text="属性下发"
    wrap-class-name="model-of-matter-send-command-modal"
    @ok="handleSend"
    :ok-button-props="{ loading }"
  >
    <BasicForm @register="registerForm" class="dynamic-form" />
  </BasicModal>
</template>

<style lang="less">
  .model-of-matter-send-command-modal {
    .dynamic-form {
      .ant-input-number {
        @apply !w-full;
      }
    }
  }
</style>