<template>
  <PageContainer>
    <ProSearch :columns="columns" target="bind-channel" @search="handleSearch" />
    <FullPage>
      <JTable
        model="TABLE"
        :columns="columns"
        :defaultParams="{
          column: 'createTime',
          order: 'desc',
          alarmRecordId: id
        }"
        :request="queryHandleHistory"
        :params="params"
      >
        <template #headerTitle>
          <h3>记录列表</h3>
        </template>
        <template #handleTime="slotsProps">
          <span>
            {{ dayjs(slotsProps.handleTime).format('YYYY-MM-DD HH:mm:ss') }}
          </span>
        </template>
        <template #handleType="slotProps">
          <span>{{ slotProps.handleType.text }}</span>
        </template>
        <template #alarmTime="slotProps">
          <span>
            {{ dayjs(slotProps.alarmTime).format('YYYY-MM-DD HH:mm:ss') }}
          </span>
        </template>
      </JTable>
    </FullPage>
  </PageContainer>
</template>

<script lang="ts" setup>
  import { queryHandleHistory } from '../../../../../api/rule-engine/log';
  import dayjs from 'dayjs';
  import { useRoute } from 'vue-router';
  import { ref } from 'vue';
  import JTable from '../../../../../components/UI/Table/index';
  import { JSearch as ProSearch, FullPage } from '@jdlinker/ui';
  import { PageContainer } from 'linker-ui-components';

  const route = useRoute();
  const id = route.query?.id;
  const columns = [
    {
      title: '处理时间',
      dataIndex: 'handleTime',
      key: 'handleTime',
      scopedSlots: true,
      width: 180,
      search: {
        type: 'date'
      }
    },
    {
      dataIndex: 'handleType',
      title: '处理类型',
      key: 'handleType',
      scopedSlots: true,
      width: 120,
      search: {
        type: 'select',
        options: [
          {
            label: '系统',
            value: 'system'
          },
          {
            label: '人工',
            value: 'user'
          }
        ]
      }
    },
    {
      title: '告警时间',
      dataIndex: 'alarmTime',
      key: 'alarmTime',
      scopedSlots: true,
      search: {
        type: 'date'
      },
      width: 180
    },
    {
      title: '告警处理',
      dataIndex: 'description',
      key: 'description',
      ellipsis: true,
      search: {
        type: 'string'
      }
    }
  ];
  const params = ref();
  const emit = defineEmits(['closeLog']);
  /**
   * 关闭弹窗
   */

  const handleSearch = (e: any) => {
    params.value = e;
  };
</script>
<style lang="less" scoped></style>
