<template>
  <div class="tabs-detail">
    <div class="mt-4">
      <BasicForm @register="registerForm">
        <template #commandSlot>
          <JsonEditorVue class="editor" v-model="jsonData" @blur="jsonValidate" />
        </template>
      </BasicForm>
      <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';
  import JsonEditorVue from 'json-editor-vue3';

  export default defineComponent({
    components: { BasicForm, Button, JsonEditorVue },
    props: {
      deviceDetail: {
        type: Object,
        required: true,
      },
    },
    emits: ['register'],
    setup(props) {
      const { createMessage } = useMessage();
      const jsonData: any = ref({
        method: 'setGpio',
        params: {
          pin: 7,
          value: 1,
        },
      });
      const jsonValidate = async (editor) => {
        const res = await editor.validate();
        // res 是错误列表，如果是空数组，则表示检测没有错误
        // console.log(res);
        if (res.length !== 0) createMessage.error('请填写正确的命令下发json数据格式');
      };
      const disable = ref(false);
      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 valid = await validate();
        if (!valid) return;
        // 收集表单数据
        const field = getFieldsValue();
        jsonData.value.persistent = true;
        jsonData.value.additionalInfo = {
          cmdType: 'API',
        };
        commandIssuanceApi(field.commandType, props.deviceDetail.tbDeviceId, jsonData.value)
          .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,
        jsonData,
        jsonValidate,
      };
    },
  });
</script>
<style lang="less" scoped></style>