<script lang="ts" setup>
import type { LoginLogApi } from '#/api/system/log/loginLog';

import { ref } from 'vue';

import { useVbenDrawer } from '@vben/common-ui';
import { DictEnum } from '@vben/constants';

import { Descriptions, DescriptionsItem } from 'ant-design-vue';

import { renderBrowserIcon, renderDict, renderOsIcon } from '#/utils/render';

// const emit = defineEmits<{
//   success: [];
// }>();
const loginLog = ref<LoginLogApi.LoginLog>();

// const formSchema: VbenFormSchema[] = [
//   {
//     component: 'Input',
//     fieldName: 'userName',
//     label: '用户名',
//     rules: 'required',
//   },
//   {
//     component: 'Input',
//     fieldName: 'clientKey',
//     label: '客户端密钥',
//     rules: 'required',
//   },
//   {
//     component: 'Select',
//     componentProps: {},
//     fieldName: 'deviceType',
//     label: '设备类型',
//     rules: 'selectRequired',
//   },
//   {
//     component: 'RadioGroup',
//     componentProps: {
//       buttonStyle: 'solid',
//       optionType: 'button',
//     },
//     fieldName: 'status',
//     label: '登录状态',
//     rules: 'required',
//   },
//   {
//     component: 'Input',
//     fieldName: 'ipaddr',
//     label: '登录IP地址',
//     rules: 'required',
//   },
//   {
//     component: 'Input',
//     fieldName: 'loginLocation',
//     label: '登录地点',
//     rules: 'required',
//   },
//   {
//     component: 'Input',
//     fieldName: 'browser',
//     label: '浏览器类型',
//     rules: 'required',
//   },
//   {
//     component: 'Input',
//     fieldName: 'os',
//     label: '操作系统',
//     rules: 'required',
//   },
//   {
//     component: 'Input',
//     fieldName: 'msg',
//     label: '提示消息',
//     rules: 'required',
//   },
//   {
//     component: 'DatePicker',
//     fieldName: 'loginTime',
//     label: '访问时间',
//     rules: 'required',
//   },
// ];

const [Drawer, drawerApi] = useVbenDrawer({
  onOpenChange(isOpen) {
    if (!isOpen) {
      return null;
    }
    const data = drawerApi.getData<LoginLogApi.LoginLog>();
    loginLog.value = data;
  },
  onClosed() {
    loginLog.value = undefined;
  },
});

// async function onSubmit() {
//   const { valid } = await formApi.validate();
//   if (valid) {
//     drawerApi.lock();
//     const data = await formApi.getValues<LoginLogApi.LoginLog>();
//     try {
//       await (formData.value?.id
//         ? apiUpdate({ id: formData.value.id, ...data })
//         : apiAdd(data));
//       resetInitialized();
//       emit('success');
//       drawerApi.close();
//     } finally {
//       drawerApi.unlock();
//     }
//   }
// }

// async function handleClosed() {
//   await formApi.resetForm();
//   resetInitialized();
// }

// const getDrawerTitle = computed(() =>
//   formData.value?.id ? '修改系统登录日志' : '新增系统登录日志',
// );
</script>
<template>
  <Drawer class="w-full max-w-[800px]" title="登录日志">
    <Descriptions v-if="loginLog" size="small" :column="1" bordered>
      <DescriptionsItem label="登录状态">
        <component
          :is="renderDict(loginLog.status, DictEnum.SYS_SUCCESS_STATUS)"
        />
      </DescriptionsItem>
      <DescriptionsItem label="登录平台">
        {{ loginLog.clientKey.toLowerCase() }}
      </DescriptionsItem>
      <DescriptionsItem label="账号信息">
        {{
          `账号: ${loginLog.userName} / ${loginLog.ipaddr} / ${loginLog.loginLocation}`
        }}
      </DescriptionsItem>
      <DescriptionsItem label="登录时间">
        {{ loginLog.loginTime }}
      </DescriptionsItem>
      <DescriptionsItem label="登录信息">
        <span
          class="font-semibold"
          :class="{ 'text-red-500': loginLog.status === 0 }"
        >
          {{ loginLog.msg }}
        </span>
      </DescriptionsItem>
      <DescriptionsItem label="登录设备">
        <component :is="renderOsIcon(loginLog.os)" />
      </DescriptionsItem>
      <DescriptionsItem label="浏览器">
        <component :is="renderBrowserIcon(loginLog.browser)" />
      </DescriptionsItem>
    </Descriptions>
  </Drawer>
</template>
