<template>
  <BasicDrawer
    v-bind="$attrs"
    @register="registerDrawer"
    :title="t('common.handleRecordText')"
    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 v-if="!isHandler" type="primary" @click="handleDeviceState">{{
        t('common.handleText')
      }}</a-button>
    </div>
  </BasicDrawer>
</template>
<script lang="ts" setup>
  import { reactive, ref } 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';
  import { useI18n } from '/@/hooks/web/useI18n';

  const emits = defineEmits(['success', 'register']);
  const { t } = useI18n();
  const { createMessage } = useMessage();

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

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

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

  const isHandler = ref(false);

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

  const handleDeviceState = async () => {
    const values = getFieldsValue();
    await deviceStateLogPost({
      ...record.obj,
      ...values,
    });
    emits('success');
    closeDrawer();
    createMessage.success(t('common.successfullyOkText'));
  };
</script>