<template>
  <ProSearch
    class="device-running-search"
    type="simple"
    :columns="searchFormSchema"
    target="device-instance-running-events"
    @search="handleSearch"
  />
  <JTable
    ref="eventsRef"
    :columns="columns"
    :request="_getEventList"
    model="TABLE"
    :params="params"
    :bodyStyle="{ padding: '0 0 0 24px' }"
  >
    <template #timestamp="slotProps">
      {{ dayjs(slotProps.timestamp).format('YYYY-MM-DD HH:mm:ss') }}
    </template>
    <template #action="slotProps">
      <JButton type="link" @click="detail(slotProps)">
        <AIcon type="SearchOutlined" />
      </JButton>
    </template>
  </JTable>
  <Modal :width="600" v-model:visible="visible" title="详情" class="device-running-event-modal">
    <!--    <JsonViewer :value="info" />-->
    <template #footer>
      <JButton type="primary" @click="visible = false">关闭</JButton>
    </template>
  </Modal>
</template>

<script lang="ts" setup>
  import dayjs from 'dayjs';
  import { getEventList } from '../../../../../../api/device/instance';
  import { useInstanceStore } from '@jdlinker/func';
  // import JsonViewer from 'vue-json-viewer';
  import { FormSchema, JSearch as ProSearch } from '@jdlinker/ui';
  import { ref, watchEffect } from 'vue';
  import { AIcon, Button as JButton, Modal } from 'linker-ui-components';
  import JTable from '../../../../../../components/UI/Table/index';

  const events = defineProps({
    data: {
      type: Object,
      default: () => {}
    }
  });
  const instanceStore = useInstanceStore();

  const searchFormSchema: FormSchema[] = [
    {
      label: '时间',
      field: 'timestamp',
      component: 'DatePicker'
    }
  ];

  const defaultColumns = [
    {
      title: '时间',
      dataIndex: 'timestamp',
      key: 'timestamp',
      scopedSlots: true,
      search: {
        type: 'date'
      }
    },
    {
      title: '操作',
      dataIndex: 'action',
      key: 'action',
      scopedSlots: true
    }
  ];

  const columns = ref<Array<Record<string, any>>>([...defaultColumns]);
  const params = ref<Record<string, any>>({
    pageIndex: 0,
    pageSize: 20
  });
  const visible = ref<boolean>(false);
  const info = ref<Record<string, any>>({});

  const _getEventList = (_params: any) => getEventList(instanceStore.current.id || '', events.data.id || '', _params);

  watchEffect(() => {
    columns.value = [...defaultColumns];
    if (events.data?.valueType?.type === 'object') {
      (events.data.valueType?.properties || []).reverse().map((i: any) => {
        columns.value.splice(0, 0, {
          key: i.id,
          title: i.name,
          dataIndex: `${i.id}_format`,
          search: {
            type: i?.valueType?.type || 'string',
            rename: i.id
          }
        });
      });
    } else {
      columns.value.splice(0, 0, {
        title: '数据',
        dataIndex: 'value'
      });
    }
  });

  const handleSearch = (_params: any) => {
    params.value = _params;
  };

  const detail = (_info: any) => {
    info.value = _info;
    visible.value = true;
  };
</script>

<style lang="less">
  .device-running-search {
    margin: 0 0 24px 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .device-running-event-modal {
    .ant-modal-body {
      padding: 0 20px;
    }
  }
</style>
