<template>
  <BasicDrawer v-bind="$attrs" @register="registerDrawer" title="处理上下线记录" width="30%">
    <Description :column="3" size="middle" @register="registeDesc" />
    <div style="height: 30px"></div>
    <BasicForm @register="registerForm" />
    <div class="flex flex-end" style="float: right">
      <a-button type="primary" @click="handleDeviceState">处理</a-button>
    </div>
  </BasicDrawer>
</template>
<script lang="ts" setup>
  import { reactive } from 'vue';
  import { BasicForm, useForm } from '/@/components/Form';
  import { formHandleSchema, formDetailSchema } from './config.data';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import { deviceStateLogPost } from '/@/api/device/deviceManager';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useDescription } from '/@/components/Description';
  import { Description } from '/@/components/Description/index';

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

  const { createMessage } = useMessage();

  const record = reactive({
    obj: {},
  });

  const [registerForm, { resetFields, getFieldsValue }] = useForm({
    schemas: formHandleSchema,
    showActionButtonGroup: false,
  });

  const [registeDesc, { setDescProps }] = useDescription({
    schema: formDetailSchema,
    column: 2,
    layout: 'vertical',
  });

  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
    await resetFields();
    setDrawerProps({ confirmLoading: false });
    record.obj = data.record;
    setDescProps({ data: data.record });
  });

  const handleDeviceState = async () => {
    const values = getFieldsValue();
    await deviceStateLogPost({
      ...record.obj,
      ...values,
    });
    emits('success');
    closeDrawer();
    createMessage.success('处理成功');
  };
</script>