<script setup lang="ts">
import { onMounted, ref, watch } from 'vue';
import MainSupplier from './codes/mainSupplier.vue'; // '/codes/mainSupplier.vue';
// 删除这行导入，因为路径不正确
// import { request } from '@/service/request';

// 主体框架内置的第三方方法通过window对象暴露、供外部组件使用
// 引入消息提示
const message = (window as any).$message;
// 添加axios的引用
const axios = (window as any).$axios;
// 引入对话框
const dialog = (window as any).$dialog;
// 获取主题状态（已删除，因为使用naive ui组件不需要自定义主题计算）

const loading = ref<boolean>(false);
const searchText = ref<string>('');
const statusFilter = ref<string>('');
const timeFilter = ref<string>('');

// 搜索防抖定时器
const searchTimer = ref<NodeJS.Timeout | null>(null);

// 控制弹窗显示状态
const showMainSupplier = ref(false);
// 添加当前选中项的Item对象
const currentItem = ref({});

// 统计数据
const statistics = ref({
  totalApplications: { value: 0, change: 12.5, label: '总申请数' },
  monthlyApplications: { value: 0, change: 8.3, label: '本月申请' },
  passRate: { value: 0, change: 5.2, label: '认证通过率' },
  pendingReview: { value: 0, label: '待审查数量', note: '30天内' }
});

// 申请列表数据类型定义
interface ApplicationItem {
  Kvid: string;
  ReportId: string;
  SampleName: string;
  StatusType: string;
  SampleManufacturerName: string;
  SampleManufacturerContactName: string;
  SampleManufacturerContactNumber: string;
  SampleManufacturerAddress: string;
  DealDate: string;
  CreateTime: string;
  status: string;
  statusColor: string;
  applyDate: string;
  progress: number;
  actions: string[];
}

// 申请列表数据
const applicationList = ref<ApplicationItem[]>([]);

// 筛选选项
const statusOptions = [
  { label: '全部状态', value: '' },
  { label: '草稿', value: 0 },
  { label: '待审核', value: 100 },
  { label: '文件审核', value: 300 },
  { label: '现场评审', value: 400 },
  { label: '比对测试', value: 500 },
  { label: '认证签发', value: 700 },
  { label: '认证完成', value: 2147483647 }
];

const timeOptions = [
  { label: '全部时间', value: '' },
  { label: '近7天', value: '7d' },
  { label: '近30天', value: '30d' },
  { label: '近3个月', value: '3m' }
];

// 辅助函数：根据状态获取颜色
const getStatusColor = (status: string) => {
  const statusColorMap: { [key: string]: string } = {
    待审核: '#f56a00', // 橙色 - 待处理
    文件审核: '#1890ff', // 蓝色 - 进行中
    现场评审: '#722ed1', // 紫色 - 重要评审
    比对测试: '#eb2f96', // 粉红色 - 测试阶段
    认证签发: '#13c2c2', // 青色 - 即将完成
    认证完成: '#52c41a' // 绿色 - 已完成
  };
  return statusColorMap[status] || '#666';
};

// 辅助函数：根据状态获取进度
const getProgressByStatus = (status: string) => {
  const progressMap: { [key: string]: number } = {
    草稿: 0,
    待审核: 20,
    文件审核: 40,
    现场评审: 60,
    比对测试: 80,
    认证签发: 90,
    认证完成: 100
  };
  return progressMap[status] || 0;
};

// 辅助函数：根据状态获取操作按钮
const getActionsByStatus = (status: string) => {
  const actionsMap: { [key: string]: string[] } = {
    草稿: ['查看详情', '提交申请', '删除'],
    待审核: ['查看详情'],
    文件审核: ['查看详情'],
    现场评审: ['查看详情'],
    比对测试: ['查看详情'],
    认证签发: ['查看详情'],
    认证完成: ['查看详情']
  };
  return actionsMap[status] || ['查看详情'];
};

// 辅助函数：将API的StatusType映射为显示状态
const mapStatusType = (statusType: string) => {
  const statusMap: { [key: string]: string } = {
    Unsupported: '草稿',
    CommissionAccept: '待审核',
    TaskAssign: '文件审核',
    DataEntry: '现场评审',
    ReportPreparation: '比对测试',
    ReportIssue: '认证签发',
    ReportCollected: '认证完成'
  };
  return statusMap[statusType] || '待审核';
};

// 辅助函数：格式化日期
const formatDate = (dateString: string) => {
  if (!dateString) return '';
  try {
    const date = new Date(dateString);
    return date
      .toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit'
      })
      .replace(/\//g, '-');
  } catch (error) {
    return dateString;
  }
};

// 获取数据
const fetchData = async () => {
  loading.value = true;
  try {
    // 使用axios替代request
    const response = await axios.post('/Restful/Kivii.Lims.Entities.Report/Query.json', {
      // 根据实际API参数调整
      ...(searchText.value && {
        QueryKeys: 'ReportId,SampleManufacturerName,SampleName,SampleManufacturerContactName,SampleManufacturerAddress',
        QueryValues: searchText.value
      }),
      ...(statusFilter.value && { Status: statusFilter.value }),
      ...(timeFilter.value && { timeRange: timeFilter.value }),
      ...{ OrderBy: 'Status' }
    });

    const data = response.data;

    if (!data) {
      // console.error('获取数据失败: 无响应数据');
      message.error('获取数据失败，请稍后重试');
      return;
    }

    // 统计数据继续使用模拟数据，但更新总数
    const totalCount = data.Total || (data.Results ? data.Results.length : 0);
    statistics.value.totalApplications.value = totalCount;

    // 更新申请列表数据
    if (data.Results && Array.isArray(data.Results)) {
      applicationList.value = data.Results.map((item: any) => ({
        // 直接使用API字段名
        ...item,

        // 保留转换后的自定义字段
        status: mapStatusType(item.StatusType),
        statusColor: getStatusColor(mapStatusType(item.StatusType)),
        applyDate: formatDate(item.DealDate),
        progress: getProgressByStatus(mapStatusType(item.StatusType)),
        actions: getActionsByStatus(mapStatusType(item.StatusType))
      }));

      message.success('数据获取成功');
    } else {
      message.error('获取数据失败：响应格式错误');
    }
  } catch (error: any) {
    // console.error('获取数据失败:', error);
    message.error('获取数据失败，请稍后重试');
  } finally {
    loading.value = false;
  }
};

// 新增认证
const handleAddApplication = () => {
  showMainSupplier.value = true;
};

// 查看详情
const handleViewDetail = (item: any) => {
  showMainSupplier.value = true;
  // 传递当前项的Item对象给mainSupplier组件
  currentItem.value = item;
};

// 提交申请
const handleSubmitApplication = (item: any) => {
  message.info(`提交申请 ${item.SampleName}`);
};

// 封装删除实体的方法
async function deleteEntities(kvids: string[]) {
  if (!kvids || kvids.length === 0) {
    message.error('请选择要删除的项目');
    return false;
  }

  try {
    loading.value = true;

    const response = await axios.post('/Restful/Kivii.Lims.Entities.Report/Delete.json', {
      Kvids: kvids
    });

    if (response.data && response.data.Results && response.data.Results.length > 0) {
      message.success(`成功删除 ${kvids.length} 个申请`);
      return true;
    }
    message.error(response.data?.Message || '删除失败');
    return false;
  } catch (error) {
    console.error('删除申请失败:', error);
    message.error('删除申请失败，请稍后重试');
    return false;
  } finally {
    loading.value = false;
  }
}

// 删除
const handleDelete = (item: any) => {
  if (!item.Kvid) {
    message.error('无效的申请ID');
    return;
  }

  // 数据验证：检查状态是否允许删除
  const currentStatus = item.StatusType || item.Status || 0;

  // 将状态映射为数值进行比较
  let statusValue = 0;
  if (typeof currentStatus === 'string') {
    const statusMap: { [key: string]: number } = {
      Unsupported: 0,
      CommissionAccept: 100,
      TaskAssign: 300,
      DataEntry: 400,
      ReportPreparation: 500,
      ReportIssue: 700,
      ReportCollected: 2147483647
    };
    statusValue = statusMap[currentStatus] || 0;
  } else {
    statusValue = Number(currentStatus) || 0;
  }

  // 状态验证：Status >= 100 时不允许删除
  if (statusValue >= 100) {
    message.warning(`申请"${item.SampleName}"已进入${item.status || '待审核'}状态，无法删除`);
    return;
  }

  // 使用对话框确认删除
  dialog.warning({
    title: '确认删除',
    content: `确定要删除申请"${item.SampleName}"吗？此操作不可撤销。`,
    positiveText: '确定删除',
    negativeText: '取消',
    onPositiveClick: async () => {
      // 调用删除接口
      const success = await deleteEntities([item.Kvid]);

      if (success) {
        // 删除成功后刷新数据
        await fetchData();
      }
    }
  });
};

// 开始审核
const handleStartReview = (item: any) => {
  message.info(`开始审核 ${item.SampleName}`);
};

// 文件评审
const handleDocumentReview = (item: any) => {
  message.info(`文件评审 ${item.SampleName}`);
};

// 现场评审
const handleSiteReview = (item: any) => {
  message.info(`现场评审 ${item.SampleName}`);
};

// 测试管理
const handleTestManagement = (item: any) => {
  message.info(`测试管理 ${item.SampleName}`);
};

// 签发证书
const handleIssueCertificate = (item: any) => {
  message.info(`签发证书给 ${item.SampleName}`);
};

// 下载证书
const handleDownloadCertificate = (item: any) => {
  message.info(`下载 ${item.SampleName} 的证书`);
};

// 防抖搜索函数
const debouncedSearch = () => {
  if (searchTimer.value) {
    clearTimeout(searchTimer.value);
  }
  searchTimer.value = setTimeout(() => {
    fetchData();
  }, 500); // 500ms延时
};

// 监听筛选条件变化，自动重新获取数据
watch(searchText, () => {
  debouncedSearch();
});

// 状态和时间筛选立即执行
watch(
  [statusFilter, timeFilter],
  () => {
    fetchData();
  },
  { deep: true }
);

onMounted(() => {
  fetchData();
});

// 处理关闭并刷新数据
const handleCloseAndRefresh = () => {
  // console.log('关闭mainSupplier组件并刷新数据');
  showMainSupplier.value = false;
  currentItem.value = {}; // 清空当前Item
  fetchData();
};
</script>

<template>
  <div>
    <MainSupplier v-if="showMainSupplier" :item="currentItem" @close-and-refresh="handleCloseAndRefresh"></MainSupplier>
    <NSpace v-if="!showMainSupplier" vertical size="large" style="padding: 20px">
      <!-- 统计卡片区域 -->
      <NGrid cols="4" x-gap="20" responsive="screen" :collapsed-rows="1">
        <NGridItem>
          <NCard>
            <template #header>
              <NSpace align="center" justify="space-between">
                <NSpace align="center" size="small">
                  <NIcon size="20" color="#1890ff">
                    <svg viewBox="0 0 24 24">
                      <path
                        d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"
                      />
                    </svg>
                  </NIcon>
                  <NText depth="3" style="font-size: 14px">{{ statistics.totalApplications.label }}</NText>
                </NSpace>
                <NText type="success" style="font-size: 12px; font-weight: 500">
                  ↑{{ statistics.totalApplications.change }}%
                </NText>
              </NSpace>
            </template>
            <NStatistic :value="statistics.totalApplications.value"></NStatistic>
          </NCard>
        </NGridItem>

        <NGridItem>
          <NCard>
            <template #header>
              <NSpace align="center" justify="space-between">
                <NSpace align="center" size="small">
                  <NIcon size="20" color="#722ed1">
                    <svg viewBox="0 0 24 24">
                      <path
                        d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,19H5V5H19V19Z"
                      />
                    </svg>
                  </NIcon>
                  <NText depth="3" style="font-size: 14px">{{ statistics.monthlyApplications.label }}</NText>
                </NSpace>
                <NText type="success" style="font-size: 12px; font-weight: 500">
                  ↑{{ statistics.monthlyApplications.change }}%
                </NText>
              </NSpace>
            </template>
            <NStatistic :value="statistics.monthlyApplications.value"></NStatistic>
          </NCard>
        </NGridItem>

        <NGridItem>
          <NCard>
            <template #header>
              <NSpace align="center" justify="space-between">
                <NSpace align="center" size="small">
                  <NIcon size="20" color="#52c41a">
                    <svg viewBox="0 0 24 24">
                      <path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z" />
                    </svg>
                  </NIcon>
                  <NText depth="3" style="font-size: 14px">{{ statistics.passRate.label }}</NText>
                </NSpace>
                <NText type="success" style="font-size: 12px; font-weight: 500">
                  ↑{{ statistics.passRate.change }}%
                </NText>
              </NSpace>
            </template>
            <NStatistic :value="statistics.passRate.value" suffix="%"></NStatistic>
          </NCard>
        </NGridItem>

        <NGridItem>
          <NCard>
            <template #header>
              <NSpace align="center" justify="space-between">
                <NSpace align="center" size="small">
                  <NIcon size="20" color="#fa8c16">
                    <svg viewBox="0 0 24 24">
                      <path
                        d="M12,20A7,7 0 0,1 5,13A7,7 0 0,1 12,6A7,7 0 0,1 19,13A7,7 0 0,1 12,20M19.03,7.39L20.45,5.97C20,5.46 19.55,5 19.04,4.56L17.62,6C16.07,4.74 14.12,4 12,4A9,9 0 0,0 3,13A9,9 0 0,0 12,22C17,22 21,17.97 21,13C21,10.88 20.26,8.93 19.03,7.39M11,14H13V8H11M15,1H9V3H15V1Z"
                      />
                    </svg>
                  </NIcon>
                  <NText depth="3" style="font-size: 14px">{{ statistics.pendingReview.label }}</NText>
                </NSpace>
                <NText depth="3" style="font-size: 12px">{{ statistics.pendingReview.note }}</NText>
              </NSpace>
            </template>
            <NStatistic :value="statistics.pendingReview.value"></NStatistic>
          </NCard>
        </NGridItem>
      </NGrid>

      <!-- 搜索和筛选区域 -->
      <NCard>
        <NSpace align="center" justify="space-between">
          <NInput v-model:value="searchText" placeholder="搜索实验室名称/编号/负责人" style="width: 400px" clearable>
            <template #prefix>
              <NIcon>
                <svg viewBox="0 0 24 24">
                  <path
                    d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"
                  />
                </svg>
              </NIcon>
            </template>
          </NInput>

          <NSpace>
            <NSelect
              v-model:value="statusFilter"
              :options="statusOptions"
              placeholder="状态筛选"
              style="width: 120px"
              clearable
            ></NSelect>
            <NSelect
              v-model:value="timeFilter"
              :options="timeOptions"
              placeholder="时间筛选"
              style="width: 120px"
              clearable
            ></NSelect>
          </NSpace>

          <NButton type="primary" @click="handleAddApplication">
            <template #icon>
              <NIcon>
                <svg viewBox="0 0 24 24">
                  <path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
                </svg>
              </NIcon>
            </template>
            新增认证
          </NButton>
        </NSpace>
      </NCard>

      <!-- 申请列表 -->
      <NCard>
        <template #header>
          <NSpace justify="space-between">
            <NText style="font-size: 16px; font-weight: 600">认证申请列表</NText>
            <NText depth="3" style="font-size: 14px">共 {{ applicationList.length }} 条记录</NText>
          </NSpace>
        </template>

        <NSpace vertical size="large">
          <!-- 空状态显示 -->
          <div v-if="applicationList.length === 0 && !loading" style="text-align: center; padding: 60px 0">
            <NIcon size="64" depth="3" style="margin-bottom: 16px">
              <svg viewBox="0 0 24 24">
                <path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z" />
              </svg>
            </NIcon>
            <NText depth="3" style="font-size: 16px; display: block; margin-bottom: 8px">暂无申请记录</NText>
            <NText depth="3" style="font-size: 14px">请尝试调整筛选条件或添加新的认证申请</NText>
          </div>

          <!-- 加载状态 -->
          <div v-if="loading" style="text-align: center; padding: 60px 0">
            <NIcon size="32" style="animation: spin 1s linear infinite; margin-bottom: 16px">
              <svg viewBox="0 0 24 24">
                <path d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
              </svg>
            </NIcon>
            <NText depth="3" style="font-size: 16px">加载中...</NText>
          </div>

          <NCard v-for="item in applicationList" :key="item.Kvid" embedded>
            <template #header>
              <NSpace justify="space-between" align="center">
                <NSpace align="center">
                  <NText style="font-size: 18px; font-weight: 600">{{ item.SampleName }}</NText>
                  <NTag type="info" :color="{ color: item.statusColor, textColor: 'white' }">
                    {{ item.status }}
                  </NTag>
                </NSpace>
                <NSpace>
                  <NButton
                    v-if="item.actions.includes('查看详情')"
                    quaternary
                    type="primary"
                    @click="handleViewDetail(item)"
                  >
                    查看详情
                  </NButton>
                  <NButton
                    v-if="item.actions.includes('提交申请')"
                    type="primary"
                    @click="handleSubmitApplication(item)"
                  >
                    提交申请
                  </NButton>
                  <NButton
                    v-if="
                      item.actions.includes('删除') &&
                      (item.StatusType === 'Unsupported' ||
                        !item.StatusType ||
                        (typeof item.StatusType === 'number' && item.StatusType < 100))
                    "
                    type="error"
                    @click="handleDelete(item)"
                  >
                    删除
                  </NButton>
                  <NButton v-if="item.actions.includes('开始审核')" type="primary" @click="handleStartReview(item)">
                    开始审核
                  </NButton>
                  <NButton v-if="item.actions.includes('文件评审')" type="primary" @click="handleDocumentReview(item)">
                    文件评审
                  </NButton>
                  <NButton v-if="item.actions.includes('现场评审')" type="primary" @click="handleSiteReview(item)">
                    现场评审
                  </NButton>
                  <NButton v-if="item.actions.includes('测试管理')" type="primary" @click="handleTestManagement(item)">
                    测试管理
                  </NButton>
                  <NButton
                    v-if="item.actions.includes('签发证书')"
                    type="warning"
                    @click="handleIssueCertificate(item)"
                  >
                    签发证书
                  </NButton>
                  <NButton
                    v-if="item.actions.includes('下载证书')"
                    type="success"
                    @click="handleDownloadCertificate(item)"
                  >
                    下载证书
                  </NButton>
                </NSpace>
              </NSpace>
            </template>

            <NSpace vertical>
              <NSpace align="center">
                <NText depth="3">申请编号：</NText>
                <NText strong>{{ item.ReportId }}</NText>
              </NSpace>

              <NGrid cols="5" x-gap="16" y-gap="16" responsive="screen">
                <NGridItem>
                  <NSpace align="center" size="small">
                    <NIcon size="16" depth="3">
                      <svg viewBox="0 0 24 24">
                        <path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" />
                      </svg>
                    </NIcon>
                    <NText depth="3">所属机构</NText>
                    <NText>{{ item.SampleManufacturerName || '暂无' }}</NText>
                  </NSpace>
                </NGridItem>

                <NGridItem>
                  <NSpace align="center" size="small">
                    <NIcon size="16" depth="3">
                      <svg viewBox="0 0 24 24">
                        <path
                          d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"
                        />
                      </svg>
                    </NIcon>
                    <NText depth="3">负责人</NText>
                    <NText>{{ item.SampleManufacturerContactName || '暂无' }}</NText>
                  </NSpace>
                </NGridItem>

                <NGridItem>
                  <NSpace align="center" size="small">
                    <NIcon size="16" depth="3">
                      <svg viewBox="0 0 24 24">
                        <path
                          d="M6.62,10.79C8.06,13.62 10.38,15.94 13.21,17.38L15.41,15.18C15.69,14.9 16.08,14.82 16.43,14.93C17.55,15.3 18.75,15.5 20,15.5A1,1 0 0,1 21,16.5V20A1,1 0 0,1 20,21A17,17 0 0,1 3,4A1,1 0 0,1 4,3H7.5A1,1 0 0,1 8.5,4C8.5,5.25 8.7,6.45 9.07,7.57C9.18,7.92 9.1,8.31 8.82,8.59L6.62,10.79Z"
                        />
                      </svg>
                    </NIcon>
                    <NText depth="3">联系电话</NText>
                    <NText>{{ item.SampleManufacturerContactNumber || '暂无' }}</NText>
                  </NSpace>
                </NGridItem>

                <NGridItem>
                  <NSpace align="center" size="small">
                    <NIcon size="16" depth="3">
                      <svg viewBox="0 0 24 24">
                        <path
                          d="M12,2C8.13,2 5,5.13 5,9C5,14.25 12,22 12,22S19,14.25 19,9C19,5.13 15.87,2 12,2M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5Z"
                        />
                      </svg>
                    </NIcon>
                    <NText depth="3">地址</NText>
                    <NText>{{ item.SampleManufacturerAddress || '暂无' }}</NText>
                  </NSpace>
                </NGridItem>

                <NGridItem>
                  <NSpace align="center" size="small">
                    <NIcon size="16" depth="3">
                      <svg viewBox="0 0 24 24">
                        <path
                          d="M19,19H5V8H19M16,1V3H8V1H6V3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3H18V1M17,12H12V17H17V12Z"
                        />
                      </svg>
                    </NIcon>
                    <NText depth="3">申请日期</NText>
                    <NText>{{ item.applyDate }}</NText>
                  </NSpace>
                </NGridItem>
              </NGrid>

              <NSpace vertical size="small">
                <NSpace justify="space-between" align="center">
                  <NText depth="3">认证进度</NText>
                  <NText style="font-size: 12px; color: #1890ff">{{ item.progress }}% 完成</NText>
                </NSpace>
                <NProgress
                  type="line"
                  :percentage="item.progress"
                  :color="item.statusColor"
                  :show-indicator="false"
                  :height="8"
                  :border-radius="4"
                ></NProgress>
                <NSpace justify="space-between" style="margin-top: 8px">
                  <NSpace
                    v-for="(step, index) in ['待审核', '文件审核', '现场评审', '比对测试', '认证签发', '认证完成']"
                    :key="index"
                    vertical
                    size="small"
                    align="center"
                  >
                    <div
                      :style="{
                        width: '12px',
                        height: '12px',
                        borderRadius: '50%',
                        backgroundColor: item.progress >= (index + 1) * 20 ? item.statusColor : '#e8e8e8',
                        border:
                          item.progress >= (index + 1) * 20 ? `2px solid ${item.statusColor}` : '2px solid #e8e8e8'
                      }"
                    ></div>
                    <NText
                      :style="{
                        fontSize: '12px',
                        color: item.progress >= (index + 1) * 20 ? item.statusColor : '#999',
                        fontWeight: item.progress >= (index + 1) * 20 ? '500' : 'normal'
                      }"
                    >
                      {{ step }}
                    </NText>
                  </NSpace>
                </NSpace>
              </NSpace>
            </NSpace>
          </NCard>
        </NSpace>
      </NCard>
    </NSpace>
  </div>
</template>

<style scoped>
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
