<template>
  <AdvancedSearch
    :columns="columns"
    target="device-instance-log"
    @search="handleSearch"
    type="simple"
    class="device-log-search"
  />
  <JTable
    ref="instanceRefLog"
    :columns="columns"
    :request="(e: Record<string, any>) => queryLog(instanceStore.current.id, e)"
    model="TABLE"
    :defaultParams="{ pageIndex: 0, pageSize: 20 }"
    :params="params"
    :bodyStyle="{ padding: 0 }"
  >
    <template #type="slotProps">
      {{ slotProps?.type?.text }}
    </template>
    <template #timestamp="slotProps">
      {{ slotProps.timestamp ? dayjs(slotProps.timestamp).format('YYYY-MM-DD HH:mm:ss') : '' }}
    </template>
    <template #action="slotProps">
      <Space>
        <template v-for="i in getActions(slotProps, 'table')" :key="i.key">
          <JButton @click="i.onClick" type="link" style="padding: 0">
            <template #icon><JAIcon :type="i.icon" /></template>
          </JButton>
        </template>
      </Space>
    </template>
  </JTable>
</template>

<script lang="ts" setup>
  import { queryLog } from '../../../../../api/device/instance';
  import { useInstanceStore } from '@jdlinker/func';
  import dayjs from 'dayjs';
  import { h } from '@vue/runtime-core';
  // @ts-ignore
  import { Modal, Textarea, Button as JButton, AIcon as JAIcon, AdvancedSearch, Space } from 'linker-ui-components';
  import JTable from '../../../../../components/UI/Table/index';
  import { ref } from 'vue';

  const params = ref<any>({});
  const instanceStore = useInstanceStore();

  const columns = [
    {
      title: '类型',
      dataIndex: 'type',
      key: 'type',
      scopedSlots: true,
      ellipsis: true,
      search: {
        type: 'select'
        // options: () =>
        //     new Promise((resolve) => {
        //         queryLogsType().then((resp: any) => {
        //             resolve(
        //                 resp.result.map((item: any) => ({
        //                     label: item.text,
        //                     value: item.value,
        //                 })),
        //             );
        //         });
        //     }),
      }
    },
    {
      title: '时间',
      dataIndex: 'timestamp',
      key: 'timestamp',
      scopedSlots: true,
      ellipsis: true,
      search: {
        type: 'date'
      }
    },
    {
      title: '内容',
      ellipsis: true,
      dataIndex: 'content',
      key: 'content',
      scopedSlots: true,
      search: {
        type: 'string'
      }
    },
    {
      title: '操作',
      key: 'action',
      fixed: 'right',
      width: 250,
      scopedSlots: true
    }
  ];

  const getActions = (data: Partial<any>, type: 'card' | 'table'): any[] => {
    if (!data) return [];
    return [
      {
        key: 'view',
        text: '查看',
        tooltip: {
          title: '查看'
        },
        icon: 'SearchOutlined',
        onClick: () => {
          let content = '';
          try {
            content = JSON.stringify(JSON.parse(data.content), null, 2);
          } catch (error) {
            content = data.content;
          }
          Modal.info({
            title: '详细信息',
            width: 700,
            content: h(Textarea, {
              bordered: false,
              rows: 15,
              value: content
            })
          });
        }
      }
    ];
  };

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

<style lang="less">
  @import 'linker-ui-components/es/Search/style/Search.less';
  @import 'linker-ui-components/es/Search/style/Item.less';
  .device-log-search {
    padding: 0;
  }
  .JSearch-item .JSearch-item--value {
    display: flex;
    width: 0;
    flex-grow: 1;
  }
  .custom-button.stroke-btn {
    background-color: #f1f1f1;
    border-color: #e6e6e6;
  }
</style>
