<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, ref } from 'vue';
  import { BasicForm, useForm } from '/@/components/Form';
  import { CommandSchemas } 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';

  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 }] = useForm({
        labelWidth: 120,
        schemas: CommandSchemas(
          props.deviceDetail.deviceProfile.transportType as TransportTypeEnum
        ),
        labelAlign: 'right',
        showSubmitButton: false,
        showResetButton: false,
      });

      const handleCancel = () => {
        resetFields();
      };

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

          commandIssuanceApi(field.commandType, 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>
  .jsoneditor-transform {
    background-position: -144px -96px;
    display: none !important;
  }
</style>