<template>
  <a-modal
    :visible="visible"
    :title="'登录日志详情'"
    width="600px"
    :footer="false"
    @cancel="handleCancel"
  >
    <a-spin :loading="loading" style="width: 100%">
      <div v-if="loginLogData" class="detail-container">
        <a-descriptions :column="2" :size="'large'" bordered>
          <a-descriptions-item label="ID">
            {{ loginLogData.id || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="登录名">
            {{ loginLogData.loginName || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="登录IP">
            {{ loginLogData.ipAddr || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="登录地点" :span="2">
            {{ loginLogData.loginLocation || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="浏览器">
            {{ loginLogData.browser || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="操作系统">
            {{ loginLogData.os || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="登录状态">
            <a-tag v-if="loginLogData.status === 1" color="green">
              登录成功
            </a-tag>
            <a-tag v-else-if="loginLogData.status === 0" color="red">
              登录失败
            </a-tag>
            <a-tag v-else color="gray">未知</a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="登录时长">
            {{ loginLogData.loginTime || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="登录时间" :span="2">
            {{ formatDateTime(loginLogData.createdAt) }}
          </a-descriptions-item>
          <a-descriptions-item
            v-if="loginLogData.message"
            label="登录消息"
            :span="2"
          >
            <a-typography-text
              :type="loginLogData.status === 0 ? 'danger' : 'primary'"
            >
              {{ loginLogData.message }}
            </a-typography-text>
          </a-descriptions-item>
          <a-descriptions-item
            v-if="loginLogData.userAgent"
            label="User Agent"
            :span="2"
          >
            <a-typography-text copyable>
              {{ loginLogData.userAgent }}
            </a-typography-text>
          </a-descriptions-item>
          <a-descriptions-item
            v-if="loginLogData.module"
            label="登录模块"
            :span="1"
          >
            {{ loginLogData.module }}
          </a-descriptions-item>
        </a-descriptions>
      </div>
      <a-empty v-else-if="!loading" description="暂无数据" />
    </a-spin>

    <div class="modal-footer">
      <div class="action-section">
        <a-space>
          <a-button @click="handleCancel">关闭</a-button>
        </a-space>
      </div>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';
import useLoading from '@/hooks/loading';
import { Message } from '@arco-design/web-vue';
import { apiClient } from '@/api';
import { KamiInternalModelEntityV1SysUserLoginLog } from '@/api/generated/models';

interface Props {
  visible: boolean;
  loginLogId?: number;
}

interface Emits {
  (e: 'update:visible', visible: boolean): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

const { loading, setLoading } = useLoading();

const loginLogData = ref<KamiInternalModelEntityV1SysUserLoginLog>();

// 获取详情数据
const fetchDetail = async (id: number) => {
  if (!id) return;

  setLoading(true);
  try {
    const response = await apiClient.apiSysUserLoginLogDetailGet({ id });

    if (response.data?.data) {
      loginLogData.value = response.data.data;
    } else {
      Message.error('获取登录日志详情失败');
    }
  } catch (error) {
    console.error('获取登录日志详情失败:', error);
    Message.error('获取登录日志详情失败');
  } finally {
    setLoading(false);
  }
};

// 格式化日期时间
const formatDateTime = (dateTime?: string) => {
  if (!dateTime) return '-';

  try {
    return new Date(dateTime).toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit'
    });
  } catch {
    return dateTime;
  }
};

// 取消/关闭
const handleCancel = () => {
  emit('update:visible', false);
  loginLogData.value = undefined;
};

// 监听弹窗显示状态
watch(
  () => props.visible,
  visible => {
    if (visible && props.loginLogId) {
      fetchDetail(props.loginLogId);
    } else if (!visible) {
      loginLogData.value = undefined;
    }
  }
);
</script>

<style scoped>
.detail-container {
  padding: 16px 0;
}

.modal-footer {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border-2);
}

.action-section {
  display: flex;
  justify-content: flex-end;
}

:deep(.arco-descriptions-item) {
  padding-bottom: 12px;
}
</style>
