<script setup lang="ts">
import type { FormInstance } from 'element-plus';

import { ref } from 'vue';

import { formatDate } from '@easyflow/utils';

import { ElDatePicker, ElTable, ElTableColumn } from 'element-plus';

import HeaderSearch from '#/components/headerSearch/HeaderSearch.vue';
import ListPageShell from '#/components/page/ListPageShell.vue';
import PageData from '#/components/page/PageData.vue';
import { $t } from '#/locales';

import SysLogModal from './SysLogModal.vue';

const pageDataRef = ref();
const saveDialog = ref();
const DEFAULT_RANGE_DAYS = 30;
const timeRange = ref<string[]>(createDefaultTimeRange());
const actionName = ref('');
const initialQueryParams = buildTimeQuery(timeRange.value);

function createDefaultTimeRange(): string[] {
  const end = new Date();
  const start = new Date(end);
  start.setDate(start.getDate() - (DEFAULT_RANGE_DAYS - 1));
  return [formatDate(start), formatDate(end)];
}

function buildTimeQuery(range: string[]) {
  return {
    createdStart: range?.[0] ? `${range[0]} 00:00:00` : undefined,
    createdEnd: range?.[1] ? `${range[1]} 23:59:59` : undefined,
  };
}

function applyQuery() {
  pageDataRef.value?.setQuery({
    keyword: actionName.value || undefined,
    ...buildTimeQuery(timeRange.value),
  });
}

const handleSearch = (params: string) => {
  actionName.value = params.trim();
  applyQuery();
};
const handleTimeRangeChange = () => {
  applyQuery();
};
const handleFilterReset = () => {
  timeRange.value = createDefaultTimeRange();
};
function reset(formEl?: FormInstance) {
  formEl?.resetFields();
  applyQuery();
}
</script>

<template>
  <div class="flex h-full flex-col gap-6 p-6">
    <SysLogModal ref="saveDialog" @reload="reset" />
    <ListPageShell>
      <template #filters>
        <HeaderSearch
          :search-placeholder="$t('sysLog.searchPlaceholder')"
          @reset="handleFilterReset"
          @search="handleSearch"
        >
          <template #middle>
            <ElDatePicker
              v-model="timeRange"
              class="w-full sm:w-[280px]"
              type="daterange"
              unlink-panels
              value-format="YYYY-MM-DD"
              :start-placeholder="$t('sysLog.startDate')"
              :end-placeholder="$t('sysLog.endDate')"
              @change="handleTimeRangeChange"
            />
          </template>
        </HeaderSearch>
      </template>
      <PageData
        ref="pageDataRef"
        page-url="/api/v1/sysLog/page"
        :page-size="10"
        :extra-query-params="initialQueryParams"
      >
        <template #default="{ pageList }">
          <ElTable :data="pageList" border>
            <ElTableColumn prop="accountId" :label="$t('sysLog.accountId')">
              <template #default="{ row }">
                {{ row.account?.nickname }}
              </template>
            </ElTableColumn>
            <ElTableColumn prop="actionName" :label="$t('sysLog.actionName')">
              <template #default="{ row }">
                {{ row.actionName }}
              </template>
            </ElTableColumn>
            <ElTableColumn prop="actionType" :label="$t('sysLog.actionType')">
              <template #default="{ row }">
                {{ row.actionType }}
              </template>
            </ElTableColumn>
            <ElTableColumn prop="actionClass" :label="$t('sysLog.actionClass')">
              <template #default="{ row }">
                {{ row.actionClass }}
              </template>
            </ElTableColumn>
            <ElTableColumn
              prop="actionMethod"
              :label="$t('sysLog.actionMethod')"
            >
              <template #default="{ row }">
                {{ row.actionMethod }}
              </template>
            </ElTableColumn>
            <ElTableColumn prop="actionIp" :label="$t('sysLog.actionIp')">
              <template #default="{ row }">
                {{ row.actionIp }}
              </template>
            </ElTableColumn>
            <ElTableColumn prop="created" :label="$t('sysLog.created')">
              <template #default="{ row }">
                {{ row.created }}
              </template>
            </ElTableColumn>
          </ElTable>
        </template>
      </PageData>
    </ListPageShell>
  </div>
</template>

<style scoped></style>
