<template>
  <a-modal
    v-model:visible="modalVisible"
    title="账号详情"
    width="800px"
    :footer="false"
  >
    <a-spin :loading="loading" style="width: 100%">
      <div v-if="accountDetail" class="account-detail">
        <!-- 基本信息 -->
        <a-card title="基本信息" class="detail-card">
          <a-descriptions :column="2" bordered>
            <a-descriptions-item label="账号名称">
              {{ accountDetail.accountName }}
            </a-descriptions-item>
            <a-descriptions-item label="手机号">
              {{ accountDetail.phone }}
            </a-descriptions-item>
            <a-descriptions-item label="状态">
              <a-tag :color="statusMapper(accountDetail.status).color">
                {{ statusMapper(accountDetail.status).text }}
              </a-tag>
            </a-descriptions-item>
            <a-descriptions-item label="最后使用时间">
              {{ accountDetail.lastUsedAt || '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="最后登录时间">
              {{ accountDetail.lastLoginAt || '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="Token过期时间">
              {{ accountDetail.tokenExpireAt || '-' }}
            </a-descriptions-item>
          </a-descriptions>
        </a-card>
      </div>

      <!-- 空状态 -->
      <a-empty v-else description="暂无数据" />
    </a-spin>
  </a-modal>
</template>

<script lang="ts" setup>
import { computed, onMounted, ref, watch } from 'vue';
import { jdV2AccountClient } from '@/api/index.ts';
import type { KamiApiCamelOilV1AccountStatisticsResAccountInfo } from '@/api/generated/models/index.ts';

// Props 定义
interface Props {
  visible: boolean;
  accountId: string;
}

const props = withDefaults(defineProps<Props>(), {
  visible: false,
  accountId: ''
});

// Emits 定义
interface Emits {
  (e: 'update:visible', value: boolean): void;
}

const emit = defineEmits<Emits>();

// 响应式数据
const loading = ref(false);
const accountDetail =
  ref<KamiApiCamelOilV1AccountStatisticsResAccountInfo | null>(null);

// 计算属性
const modalVisible = computed({
  get: () => props.visible,
  set: value => emit('update:visible', value)
});

/**
 * 获取账号详情
 */
const fetchAccountDetail = async () => {
  if (!props.accountId) return;

  loading.value = true;
  try {
    // 获取账号详情信息
    const { data } = await jdV2AccountClient.apiJdV2AccountStatisticsGet({
      accountId: parseInt(props.accountId)
    });

    accountDetail.value = data.accountInfo;
  } catch (error) {
    console.error('获取账号详情失败:', error);
    accountDetail.value = null;
  } finally {
    loading.value = false;
  }
};

/**
 * 状态映射器
 * @param status 状态值
 * @returns 状态文本和颜色
 */
const statusMapper = (
  status: number | undefined
): { text: string; color: string } => {
  if (!status) return { text: '未知状态', color: 'gray' };
  switch (status) {
    case 0:
      return { text: '待登录', color: 'orange' }; // 需要登录验证
    case 1:
      return { text: '发送验证码', color: 'blue' }; // 正在发送验证码
    case 2:
      return { text: '在线', color: 'green' }; // 账户在线，可用
    case 3:
      return { text: '已暂停', color: 'orange' }; // 账户被暂停使用
    case 4:
      return { text: '已失效', color: 'red' }; // 账户已失效
    default:
      return { text: '未知状态', color: 'gray' };
  }
};

// 监听弹窗显示状态
watch(
  () => props.visible,
  visible => {
    if (visible && props.accountId) {
      fetchAccountDetail();
    }
  },
  { immediate: true }
);

// 监听账号ID变化
watch(
  () => props.accountId,
  accountId => {
    if (accountId && props.visible) {
      fetchAccountDetail();
    }
  }
);
</script>

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

.detail-card {
  margin-bottom: 16px;
}

.detail-card:last-child {
  margin-bottom: 0;
}

:deep(.arco-descriptions-item-label) {
  font-weight: 600;
  background-color: var(--color-fill-2);
}
</style>
