<template>
  <BasicModal v-bind="$attrs" :width="480" @register="register" @ok="handleSubmit">
    <Typography>
      <TypographyParagraph>
        <blockquote class="bg-gray-100">{{ blockContent }}</blockquote>
      </TypographyParagraph>
    </Typography>
    <ObjectModelForm
      ref="objectModelElRef"
      :mode="openModalMode"
      :device-record="record"
      :transport-type="(record.transportType as TransportTypeEnum)"
    />
  </BasicModal>
</template>
<script lang="ts" setup>
  import { ref, unref, nextTick } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { Typography, TypographyParagraph } from 'ant-design-vue';
  import { ModelOfMatterParams } from '/@/api/device/model/modelOfMatterModel';
  import {
    createModel,
    updateModel,
    createModelCategory,
    updateModelCategory,
  } from '/@/api/device/modelOfMatter';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useRole } from '/@/hooks/business/useRole';
  import { ObjectModelForm } from '../../../components/ObjectModelForm';
  import { TransportTypeEnum } from '/@/enums/deviceEnum';
  import { DataActionModeEnum, DataActionModeNameEnum } from '/@/enums/toolEnum';
  import { DeviceProfileDetail } from '/@/api/device/model/deviceConfigModel';

  const { isPlatformAdmin, isSysadmin, isTenantAdmin } = useRole();

  const emit = defineEmits(['register', 'success']);

  const objectModelElRef = ref<InstanceType<typeof ObjectModelForm>>();

  const props = defineProps<{
    record: DeviceProfileDetail;
  }>();

  const blockContent = `属性一般是指设备的运行状态，如当前温度等；服务是指设备可被调用的方法，支持定义参数，如执行某项任务；事件则是指设备上报的通知，如告警，需要被及时处理。`;

  const openModalMode = ref<DataActionModeEnum>(DataActionModeEnum.CREATE);

  const { createMessage } = useMessage();

  const currentActionModel = ref<ModelOfMatterParams>();

  const [register, { closeModal, setModalProps }] = useModalInner(
    async (data: ModalParamsType<ModelOfMatterParams>) => {
      const { mode, record } = data;
      openModalMode.value = mode;
      if (record) {
        await nextTick();
      }
      const title = `${DataActionModeNameEnum[mode]}物模型`;
      setModalProps({
        showOkBtn: mode !== DataActionModeEnum.READ,
        title,
      });

      unref(objectModelElRef)?.resetFieldsValue?.();
      if (mode !== DataActionModeEnum.CREATE && record) {
        currentActionModel.value = record;
        unref(objectModelElRef)?.setFieldsValue(record || {});
      }
    }
  );

  const handleSubmit = async () => {
    try {
      setModalProps({ loading: false, okButtonProps: { loading: true } });
      await unref(objectModelElRef)?.validate?.();
      const value = unref(objectModelElRef)!.getFieldsValue();

      const isCategoryAction =
        unref(isSysadmin) ||
        unref(isPlatformAdmin) ||
        (unref(isTenantAdmin) && props.record.ifShowClass);

      const submitFn =
        unref(openModalMode) === DataActionModeEnum.CREATE
          ? isCategoryAction
            ? createModelCategory
            : createModel
          : isCategoryAction
          ? updateModelCategory
          : updateModel;

      value[isCategoryAction ? 'categoryId' : 'deviceProfileId'] = props.record.id;

      if (unref(openModalMode) !== DataActionModeEnum.CREATE)
        value.id = unref(currentActionModel)?.id;

      await submitFn(value);

      createMessage.success('操作成功');
      closeModal();
      emit('success');
    } catch (error) {
      throw Error(error as string);
    } finally {
      setModalProps({ loading: false, okButtonProps: { loading: false } });
    }
  };
</script>

<style lang="less" scope></style>