<template>
  <div class="tabs-detail">
    <div>
      <BasicForm @register="registerForm" />
      <Space class="w-full justify-end py-2" justify="end">
        <Button :loading="loading" type="primary" @click="handleOk" class="mr-2">确定</Button>
        <Button type="default" @click="handleCancel" class="mr-2">重置</Button>
      </Space>
    </div>
  </div>
</template>
<script lang="ts">
  import { defineComponent, nextTick, ref } from 'vue';
  import { BasicForm, useForm } from '/@/components/Form';
  import { CommandFieldsEnum, CommandSchemas, CommandType, ValueType } from '../../config/data';
  import { commandIssuanceApi } from '/@/api/device/deviceManager';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { Button } from '/@/components/Button';
  import { Space } from 'ant-design-vue';
  import { DeviceRecord } from '/@/api/device/model/deviceModel';
  import { TransportTypeEnum } from '../../../profiles/components/TransportDescript/const';
  import { parseStringToJSON } from '/@/components/CodeEditor/src/JSONEditor';
  import { CommandDeliveryWayEnum } from '/@/enums/toolEnum';

  export default defineComponent({
    components: { BasicForm, Button, Space },
    props: {
      deviceDetail: {
        type: Object as PropType<DeviceRecord>,
        required: true,
      },
    },
    emits: ['register'],
    setup(props) {
      const { createMessage } = useMessage();
      const loading = ref(false);

      const [registerForm, { getFieldsValue, validate, resetFields, clearValidate }] = useForm({
        labelWidth: 120,
        schemas: CommandSchemas(
          props.deviceDetail.deviceProfile.transportType as TransportTypeEnum,
          props.deviceDetail.deviceProfileId
        ),
        baseColProps: { span: 20 },
        labelAlign: 'right',
        showSubmitButton: false,
        showResetButton: false,
      });

      const handleCancel = async () => {
        await resetFields();
        await nextTick();
        await clearValidate();
      };

      const handleOk = async () => {
        loading.value = true;
        try {
          // 验证
          const valid = await validate();
          if (!valid) return;
          // 收集表单数据
          const field = getFieldsValue();
          let command: Recordable = {
            persistent: true,
            method: 'methodThingskit',
            params: field[CommandFieldsEnum.COMMAND_TEXT],
          };

          if (field[CommandFieldsEnum.COMMAND_TYPE] === CommandType.CUSTOM) {
            if (field[CommandFieldsEnum.VALUE_TYPE] === ValueType.JSON) {
              const { json } = parseStringToJSON(field.commandValue);
              command.params = json;
            }
          } else {
            const { transportType } = props.deviceDetail.deviceProfile;
            command.params =
              transportType === TransportTypeEnum.TCP
                ? field[CommandFieldsEnum.TCP_SERVICE]
                : {
                    [field[CommandFieldsEnum.SERVICE]]: field[CommandFieldsEnum.MODEL_INPUT],
                  };
            command.additionalInfo = { cmdType: 1 };
          }
          commandIssuanceApi(
            field[CommandFieldsEnum.CUSTOM_TYPE] as CommandDeliveryWayEnum,
            props.deviceDetail.tbDeviceId,
            command
          )
            .then((res) => {
              if (!res) return;
              createMessage.success('命令下发成功');
              loading.value = true;
              // 请求
              handleCancel();
            })
            .catch((e) => {
              if (e?.message) {
                createMessage.error(e?.message);
              }
              handleCancel();
            })
            .finally(() => {
              setTimeout(() => {
                loading.value = false;
              }, 300);
            });
        } catch (e) {
          throw e;
        } finally {
          loading.value = false;
        }
      };
      return {
        registerForm,
        handleCancel,
        handleOk,
        loading,
      };
    },
  });
</script>
<style scoped lang="less">
  .jsoneditor-transform {
    background-position: -144px -96px;
    display: none !important;
  }

  .tabs-detail:deep(.object-model-validate-form) {
    > .ant-row {
      @apply w-full;
    }
  }
</style>