import { computed, ref } from 'vue';
import { cloneDeep } from 'lodash-es';
import { FormSchema } from '@/components/Form';
import { defRangeShortcuts } from '@/utils/dateUtil';
import { loadImTenantOptions } from '@/views/imTenantOptions';

export const tenantOptions = ref<any[]>([]);

export class State {
  public tenantId = 0;
  public tenantName = '';
  public id = 0;
  public actorUid = 0;
  public actorRole = '';
  public action = '';
  public targetType = '';
  public targetId = '';
  public reason = '';
  public requestId = '';
  public ip = '';
  public userAgent = '';
  public beforeSnapshot = '';
  public afterSnapshot = '';
  public metadata = '';
  public createdAt = '';

  constructor(state?: Partial<State>) {
    if (state) Object.assign(this, state);
  }
}

export function newState(state: State | Record<string, any> | null): State {
  if (state !== null) {
    if (state instanceof State) return cloneDeep(state);
    return new State(state);
  }
  return new State();
}

export const schemas = ref<FormSchema[]>([
  {
    field: 'tenantId',
    component: 'NSelect',
    label: '商户',
    componentProps: {
      clearable: false,
      options: computed(() => tenantOptions.value),
      placeholder: '请选择商户',
    },
  },
  {
    field: 'actorUid',
    component: 'NInput',
    label: '操作人UID',
    componentProps: { placeholder: '请输入操作人UID' },
  },
  {
    field: 'action',
    component: 'NInput',
    label: '动作',
    componentProps: { placeholder: '请输入操作类型' },
  },
  {
    field: 'targetType',
    component: 'NInput',
    label: '目标类型',
    componentProps: { placeholder: '请输入目标类型' },
  },
  {
    field: 'targetId',
    component: 'NInput',
    label: '目标ID',
    componentProps: { placeholder: '请输入目标ID' },
  },
  {
    field: 'requestId',
    component: 'NInput',
    label: '请求ID',
    componentProps: { placeholder: '请输入请求ID' },
  },
  {
    field: 'keyword',
    component: 'NInput',
    label: '关键词',
    componentProps: { placeholder: '请输入动作/目标/原因关键词' },
  },
  {
    field: 'createdAt',
    component: 'NDatePicker',
    label: '操作时间',
    componentProps: {
      type: 'datetimerange',
      clearable: true,
      shortcuts: defRangeShortcuts(),
    },
  },
]);

export const columns = [
  { title: 'ID', key: 'id', align: 'left', width: 90 },
  { title: '操作人UID', key: 'actorUid', align: 'left', width: 120 },
  { title: '角色', key: 'actorRole', align: 'left', width: 120 },
  { title: '动作', key: 'action', align: 'left', width: 190 },
  { title: '目标类型', key: 'targetType', align: 'left', width: 120 },
  { title: '目标ID', key: 'targetId', align: 'left', width: 170 },
  { title: '原因', key: 'reason', align: 'left', width: 220 },
  { title: '请求ID', key: 'requestId', align: 'left', width: 190 },
  { title: 'IP', key: 'ip', align: 'left', width: 130 },
  { title: '操作时间', key: 'createdAt', align: 'left', width: 180 },
];

export async function loadTenantOptions() {
  return loadImTenantOptions(tenantOptions, { page: 1, perPage: 20 });
}