<template>
  <div class="tabs-detail">
    <div class="mt-4">
      <BasicForm @register="registerForm" />
      <div>
        <Button :disabled="disable" type="primary" @click="handleOk" class="mr-2">确定</Button>
        <Button type="default" @click="handleCancel" class="mr-2">重置</Button>
      </div>
    </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';

  export default defineComponent({
    components: { BasicForm, Button },
    props: {
      deviceDetail: {
        type: Object,
        required: true,
      },
    },
    emits: ['register'],
    setup(props) {
      const disable = ref(false);
      const commandValueStr = JSON.stringify({
        method: 'setGpio',
        params: {
          pin: 7,
          value: 1,
        },
      });
      const [registerForm, { getFieldsValue, validate, resetFields }] = useForm({
        labelWidth: 100,
        schemas: CommandSchemas,
        labelAlign: 'right',
        showSubmitButton: false,
        showResetButton: false,
        wrapperCol: {
          span: 12,
        },
      });
      const handleCancel = () => {
        resetFields();
      };
      const handleOk = async () => {
        disable.value = true;
        const { createMessage } = useMessage();
        // 验证
        const valid = await validate();
        if (!valid) return;
        // 收集表单数据
        const field = getFieldsValue();
        const commandValue = JSON.parse(commandValueStr);
        commandValue.persistent = true;
        commandValue.additionalInfo = {
          cmdType: 'API',
        };
        commandIssuanceApi(field.commandType, props.deviceDetail.tbDeviceId, commandValue)
          .then((res) => {
            if (!res) return;
            createMessage.success('命令下发成功');
            disable.value = true;
            // 请求
            handleCancel();
          })
          .catch((e) => {
            if (e?.message) {
              createMessage.error(e?.message);
            }
          })
          .finally(() => {
            setTimeout(() => {
              disable.value = false;
            }, 300);
          });
      };
      return {
        registerForm,
        handleCancel,
        handleOk,
        disable,
      };
    },
  });
</script>
<style lang="less" scoped></style>