<template>
    <view class="container" style="paddingBottom:1rpx;">
      <u-navbar
			leftIconSize="40rpx"
			leftIconColor="#333333"
			title="征信查询记录统计"
		>
		</u-navbar>
      <view class="section">
        <view class="summary-card">
          <view class="summary-icon">
            <uni-icons type="checkmarkempty" size="32" color="#52c41a"></uni-icons>
          </view>
          <view class="summary-info">
            <text class="summary-label">总查询次数</text>
            <text class="summary-value">{{ detailInfo.lastAllYears || 0 }}次</text>
          </view>
        </view>

        <view class="stats-grid">
          <view class="grid-item">
            <text class="item-value">{{ detailInfo.lastOneMonths || 0 }}</text>
            <text class="item-label">近1个月</text>
          </view>
          <view class="grid-item">
            <text class="item-value">{{ detailInfo.lastTwoMonths || 0 }}</text>
            <text class="item-label">近2个月</text>
          </view>
          <view class="grid-item">
            <text class="item-value">{{ detailInfo.lastThreeMonths || 0 }}</text>
            <text class="item-label">近3个月</text>
          </view>
          <view class="grid-item">
            <text class="item-value">{{ detailInfo.lastSixMonths || 0 }}</text>
            <text class="item-label">近6个月</text>
          </view>
          <view class="grid-item">
            <text class="item-value">{{ detailInfo.lastOneYears || 0 }}</text>
            <text class="item-label">近1年</text>
          </view>
          <view class="grid-item">
            <text class="item-value">{{ detailInfo.lastTwoYears || 0 }}</text>
            <text class="item-label">近2年</text>
          </view>
        </view>

        <view class="tips-card">
          <view class="tips-icon">
            <uni-icons type="info-filled" size="20" color="#667eea"></uni-icons>
          </view>
          <view class="tips-content">
            <text class="tips-title">温馨提示</text>
            <text class="tips-text">过多的征信查询可能会影响信用评分，建议控制查询频率。</text>
          </view>
        </view>
      </view>
      <u-toast ref="uToast"></u-toast>
    </view>
  </template>
  
<script setup>
import { getCreditRecordAnalysis} from '@/api/invest/creditQueryRecord'
import {onLoad} from "@dcloudio/uni-app";
import {reactive ,toRefs,ref }from "vue";
const id = ref('')
const data = reactive({
  detailInfo: {} 
})
const {detailInfo} = toRefs(data)
onLoad((option) => {
    id.value = option.id
    getInfo()
  })
  function getInfo() {
    const today = new Date()
    const queryDateStart= today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-' + ('0' + today.getDate()).slice(-2)
    getCreditRecordAnalysis({queryDateStart: queryDateStart}).then(res => {
          detailInfo.value = res.data
        })
  }
  </script>
  
  <style lang="scss" scoped>
  .section {
    padding: 24rpx;
  
    .summary-card {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-radius: 24rpx;
      padding: 24rpx 28rpx;
      margin-bottom: 24rpx;
      display: flex;
      align-items: center;
      gap: 16rpx;
      box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);

      .summary-icon {
        width: 56rpx;
        height: 56rpx;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }

      .summary-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 4rpx;

        .summary-label {
          font-size: 24rpx;
          color: rgba(255, 255, 255, 0.9);
          font-weight: 500;
        }

        .summary-value {
          font-size: 42rpx;
          color: #ffffff;
          font-weight: 700;
          line-height: 1.2;
        }
      }
    }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24rpx;
      margin-bottom: 24rpx;

      .grid-item {
        background: #ffffff;
        border-radius: 20rpx;
        padding: 32rpx 24rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12rpx;
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);
        border: 2rpx solid #f0f0f0;
        transition: all 0.3s ease;

        &:active {
          transform: scale(0.98);
          box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
        }

        .item-value {
          font-size: 48rpx;
          color: #667eea;
          font-weight: 700;
          line-height: 1;
        }

        .item-label {
          font-size: 26rpx;
          color: #999;
          font-weight: 500;
        }
      }
    }

    .tips-card {
      background: #fff9e6;
      border-radius: 16rpx;
      padding: 24rpx;
      display: flex;
      gap: 16rpx;
      border-left: 6rpx solid #faad14;

      .tips-icon {
        width: 40rpx;
        height: 40rpx;
        border-radius: 50%;
        background: rgba(102, 126, 234, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }

      .tips-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 8rpx;

        .tips-title {
          font-size: 28rpx;
          color: #333;
          font-weight: 600;
        }

        .tips-text {
          font-size: 24rpx;
          color: #666;
          line-height: 1.6;
        }
      }
    }
  }
  </style>