<template>
  <BasicDrawer
    v-bind="$attrs"
    @register="registerDrawer"
    :title="t('log.operate.operationLogDetail')"
    width="40%"
  >
    <BasicForm @register="registerForm" />
  </BasicDrawer>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { BasicForm, useForm } from '/@/components/Form';
  import { formSchema } from './config.data';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import { getLogManageDetail } from '/@/api/log/logManager';
  import moment from 'moment';
  import { useI18n } from '/@/hooks/web/useI18n';

  const { t } = useI18n();

  export default defineComponent({
    name: 'ContactDrawer',
    components: { BasicDrawer, BasicForm },
    emits: ['success', 'register'],
    setup(_) {
      const [registerForm, { setFieldsValue, resetFields }] = useForm({
        labelWidth: 120,
        schemas: formSchema,
        showActionButtonGroup: false,
      });

      const [registerDrawer, { setDrawerProps }] = useDrawerInner(async (data) => {
        await resetFields();
        setDrawerProps({ confirmLoading: false });
        const res = await getLogManageDetail(data.record.id);
        const createdTime = moment(data.record.createdTime).format('YYYY-MM-DD');
        const actionData = JSON.stringify(res.actionData);
        await setFieldsValue(res || data.record);
        await setFieldsValue({ actionData });
        await setFieldsValue({ createdTime });
      });
      return {
        registerDrawer,
        registerForm,
        t,
      };
    },
  });
</script>