<script setup lang="ts">
import { computed } from 'vue';
import TableSearchFields, { type SearchField } from '@/components/custom/table-search-fields.vue';

defineOptions({ name: 'LoginLogSearch' });

const emit = defineEmits<{
  reset: [];
  search: [];
}>();

const model = defineModel<Api.SystemLog.Login.SearchParams>('model', { required: true });

const statusOptions = [
  { label: '成功', value: 1 },
  { label: '失败', value: 0 }
];

const fields = computed<SearchField[]>(() => [
  {
    key: 'username',
    label: '账号',
    type: 'input',
    placeholder: '请输入用户账号'
  },
  {
    key: 'userIp',
    label: '登录IP',
    type: 'input',
    placeholder: '请输入登录 IP'
  },
  {
    key: 'status',
    label: '登录结果',
    type: 'select',
    placeholder: '请选择登录结果',
    options: statusOptions,
    transformValue: value => {
      if (value === undefined || value === null || value === '') return undefined;
      return Number(value) === 1;
    },
    resolveValue: value => {
      if (value === undefined || value === null) return undefined;
      return value ? 1 : 0;
    }
  },
  {
    key: 'createTime',
    label: '登录时间',
    type: 'dateRange',
    placeholder: '请选择登录时间',
    valueFormat: 'YYYY-MM-DD HH:mm:ss',
    format: 'YYYY-MM-DD HH:mm:ss'
  }
]);
</script>

<template>
  <TableSearchFields v-model="model" :fields="fields" :columns="4" @reset="emit('reset')" @search="emit('search')" />
</template>
