<template>
  <a-modal
    :visible="visible"
    title="Cookie详情"
    width="700px"
    footer
    @cancel="handleCancel"
  >
    <a-descriptions v-if="cookieDetail" :column="2" bordered size="small">
      <a-descriptions-item label="Cookie ID">
        <a-typography-text copyable>
          {{ cookieDetail.cookieId }}
        </a-typography-text>
      </a-descriptions-item>
      <a-descriptions-item label="状态">
        <a-tag v-if="cookieDetail.status === 0" color="gray">未知</a-tag>
        <a-tag v-else-if="cookieDetail.status === 1" color="green">正常</a-tag>
        <a-tag v-else-if="cookieDetail.status === 2" color="orange">暂停</a-tag>
        <a-tag v-else-if="cookieDetail.status === 3" color="red">失效</a-tag>
        <a-tag v-else color="gray">未知</a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="账户名称">
        {{ cookieDetail.accountName || '-' }}
      </a-descriptions-item>
      <a-descriptions-item label="连续失败次数">
        <a-tag
          v-if="cookieDetail.failureCount && cookieDetail.failureCount > 0"
          color="red"
        >
          {{ cookieDetail.failureCount }}次
        </a-tag>
        <a-tag v-else color="green">0次</a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="最后使用时间">
        {{ cookieDetail.lastUsedAt || '-' }}
      </a-descriptions-item>
      <a-descriptions-item label="暂停解除时间">
        {{ cookieDetail.suspendUntil || '-' }}
      </a-descriptions-item>
      <a-descriptions-item label="创建时间">
        {{ cookieDetail.createdAt || '-' }}
      </a-descriptions-item>
      <a-descriptions-item label="更新时间">
        {{ cookieDetail.updatedAt || '-' }}
      </a-descriptions-item>
      <a-descriptions-item label="备注" :span="2">
        {{ cookieDetail.remark || '-' }}
      </a-descriptions-item>
      <a-descriptions-item label="Cookie内容" :span="2">
        <a-typography-text class="cookie-content" copyable>
          {{ cookieDetail.cookieValue || '-' }}
        </a-typography-text>
      </a-descriptions-item>
    </a-descriptions>
    <a-empty v-else description="暂无数据" />
  </a-modal>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';
import { Message } from '@arco-design/web-vue';
import { jdCookieClient } from '@/api';
import type { KamiApiJdCookieV1CookieAccountInfo } from '@/api/generated';

interface Props {
  visible: boolean;
  cookieId: string;
}

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

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

const cookieDetail = ref<KamiApiJdCookieV1CookieAccountInfo | null>(null);
const loading = ref(false);

// 处理取消
const handleCancel = (): void => {
  emit('update:visible', false);
};

// 监听弹窗显示状态
watch(
  () => props.visible,
  newVal => {
    if (newVal && props.cookieId) {
      fetchCookieDetail();
    } else {
      cookieDetail.value = null;
    }
  }
);

// 获取Cookie详情
const fetchCookieDetail = async (): Promise<void> => {
  if (!props.cookieId) return;

  loading.value = true;
  try {
    const response = await jdCookieClient.apiJdCookieAccountGetGet({
      cookieId: props.cookieId
    });
    cookieDetail.value = response.data.account || null;
  } catch (error) {
    Message.error('获取Cookie详情失败');
    cookieDetail.value = null;
  } finally {
    loading.value = false;
  }
};
</script>

<style scoped>
.cookie-content {
  font-family: monospace;
  font-size: 12px;
  word-break: break-all;
  background: var(--color-fill-2);
  padding: 8px;
  border-radius: 4px;
  display: block;
}
</style>
