<script lang="ts" setup>
  import { BasicTable, useTable } from '/@/components/Table';
  import { columns, searchFormSchema } from './config';
  import { JsonPreview } from '/@/components/CodeEditor';
  import { Button, Modal, Space } from 'ant-design-vue';
  import { h } from 'vue';
  import { EdgeDeviceItemType } from '/@/api/edgeManage/model/edgeInstance';
  import { deviceCommandRecordGetQuery } from '/@/api/device/deviceConfigApi';
  import { useModal } from '/@/components/Modal';
  import { DataActionModeEnum } from '/@/enums/toolEnum';
  import { CommandDeliveryModal } from './CommandDeliveryModal';

  const props = defineProps({
    recordData: {
      type: Object as PropType<EdgeDeviceItemType>,
      default: () => {},
    },
  });

  defineEmits(['register']);

  const [registerCommandDeliverModal, { openModal }] = useModal();

  const [registerTable] = useTable({
    columns,
    api: deviceCommandRecordGetQuery,
    beforeFetch: (params) => {
      return {
        ...params,
        tbDeviceId: props?.recordData?.id?.id,
      };
    },
    formConfig: {
      labelWidth: 120,
      schemas: searchFormSchema,
      fieldMapToTime: [['sendTime', ['startTime', 'endTime'], 'x']],
    },
    useSearchForm: true,
    showIndexColumn: false,
    clickToRowSelect: false,
    showTableSetting: true,
    bordered: true,
    rowKey: 'id',
  });

  const commonModalInfo = (title, value) => {
    Modal.info({
      title,
      width: 600,
      content: h(JsonPreview, { data: value }),
    });
  };

  const handleRecordContent = (record) => {
    if (!record?.request?.body) return;
    if (Object.prototype.toString.call(record?.request?.body) !== '[object Object]') return;
    const jsonParams = record?.request?.body?.params;
    commonModalInfo('命令下发内容', jsonParams);
  };

  const handleRecordResponseContent = (record) => {
    const jsonParams = record?.response;
    commonModalInfo('响应内容', jsonParams);
  };

  const handleEventIsCommand = () => {
    openModal(true, {
      mode: DataActionModeEnum.READ,
      record: props.recordData,
    } as ModalParamsType<EdgeDeviceItemType>);
  };
</script>

<template>
  <div>
    <BasicTable :clickToRowSelect="false" @register="registerTable">
      <template #toolbar>
        <Space>
          <Button type="primary" @click="handleEventIsCommand">命令下发</Button>
        </Space>
      </template>
      <template #recordContent="{ record }">
        <Button type="link" class="ml-2" @click="handleRecordContent(record)"> 查看 </Button>
      </template>
      <template #responseContent="{ record }">
        <div v-if="!record.request?.oneway">
          <Button v-if="record?.response === null" type="text" class="ml-2"> 未响应 </Button>
          <Button v-else type="link" class="ml-2" @click="handleRecordResponseContent(record)">
            查看
          </Button>
        </div>
        <div v-else>--</div>
      </template>
    </BasicTable>
    <CommandDeliveryModal @register="registerCommandDeliverModal" :deviceDetail="recordData" />
  </div>
</template>