import { computed, h, ref } from 'vue';
import { NTag } from 'naive-ui';
import { FormSchema } from '@/components/Form';
import { useDictStore } from '@/store/modules/dict';
import { defRangeShortcuts } from '@/utils/dateUtil';

const dict = useDictStore();

export const schemas = ref<FormSchema[]>([
  { field: 'keyword', component: 'NInput', label: '会员', componentProps: { placeholder: '编号、用户名或手机号' } },
  { field: 'loginType', component: 'NSelect', label: '登录方式', componentProps: { options: computed(() => dict.getOptionUnRef('appMemberLoginTypeOptions')), clearable: true } },
  { field: 'status', component: 'NSelect', label: '登录状态', componentProps: { options: computed(() => dict.getOptionUnRef('sys_login_status')), clearable: true } },
  { field: 'loginDomain', component: 'NInput', label: '登录域名', componentProps: { placeholder: '请输入登录域名' } },
  { field: 'loginIp', component: 'NInput', label: '登录IP', componentProps: { placeholder: '请输入IP脱敏值' } },
  { field: 'loginAt', component: 'NDatePicker', label: '登录时间', componentProps: { type: 'datetimerange', clearable: true, shortcuts: defRangeShortcuts() } },
]);

const tag = (type: string, value: number) =>
  h(NTag, { type: dict.getType(type, value), bordered: false }, { default: () => dict.getLabel(type, value) || '-' });

export const columns = [
  { title: '日志ID', key: 'id', width: 90 },
  { title: '会员编号', key: 'memberNo', width: 170, render: (row) => row.memberNo || '-' },
  { title: '用户名', key: 'username', width: 130, render: (row) => row.username || '-' },
  { title: '手机号', key: 'mobileMask', width: 130, render: (row) => row.mobileMask || '-' },
  { title: '登录方式', key: 'loginType', width: 110, render: (row) => tag('appMemberLoginTypeOptions', row.loginType) },
  { title: '状态', key: 'status', width: 90, render: (row) => tag('sys_login_status', row.status) },
  { title: '登录时间', key: 'loginAt', width: 180 },
  { title: '登录IP', key: 'loginIpMask', width: 130, render: (row) => row.loginIpMask || '-' },
  { title: '登录地区', key: 'loginRegion', width: 160, render: (row) => row.loginRegion || '-' },
  { title: '登录域名', key: 'loginDomain', width: 220, render: (row) => row.loginDomain || '-' },
  { title: '操作系统', key: 'os', width: 140 },
  { title: '浏览器', key: 'browser', width: 150 },
  { title: '失败原因', key: 'errMsg', width: 180, ellipsis: { tooltip: true }, render: (row) => row.errMsg || '-' },
];

export function loadOptions() {
  dict.loadOptions(['appMemberLoginTypeOptions', 'sys_login_status']);
}