<template>
  <div class="p-4">
    <ChartGroupCard class="enter-y" :loading="loading" type="chart" :statistics="statistics" />
    <SaleTabCard class="!my-4 enter-y" :loading="loading" :barData="barData" :buttonStats="buttonStats" />
    <a-row>
      <a-col :span="24">
        <a-card :loading="loading" :bordered="false" title="最近一周访问量统计">
          <div class="infoArea">
            <HeadInfo title="今日IP" :iconColor="ipColor" :content="loginfo.todayIp" icon="environment" />
            <HeadInfo title="今日访问" :iconColor="visitColor" :content="loginfo.todayVisitCount" icon="team" />
            <HeadInfo title="总访问量" :iconColor="seriesColor" :content="loginfo.totalVisitCount" icon="rise" />
          </div>
          <!--          <LineMulti :chartData="lineMultiData" height="33vh" type="line" :option="{ legend: { top: 'bottom' } }" />-->
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>
<script lang="ts" setup>
  import { computed, onMounted, ref, watch } from 'vue';
  import ChartGroupCard from '../components/ChartGroupCard.vue';
  import SaleTabCard from '../components/SaleTabCard.vue';
  import HeadInfo from '/@/components/chart/HeadInfo.vue';
  import { getLoginfo, getStatistics, getVisitInfo } from '../api';
  import { useRootSetting } from '/@/hooks/setting/useRootSetting';

  const loading = ref(true);
  const { getThemeColor } = useRootSetting();

  // 使用实时数据对象
  const statistics = ref({
    todayCount: 0,
    yesterdayCount: 0,
    growthRate: 0,
    rejectedCount: 0,
    totalCount: 0,
    averageCount: 0,
    buttonStats: [] as { name: string; total: number }[],
    monthlyData: [] as { month: string; count: number }[],
  });

  // 实时数据获取函数
  async function fetchStatistics() {
    try {
      const res = await getStatistics();
      console.log('接收到的统计数据:', res); // 添加日志输出
      console.log('res是否有success属性:', 'success' in res);
      // 直接使用响应数据，不检查 success 属性
      statistics.value = {
        todayCount: res.todayCount || res.data?.todayCount || 0,
        yesterdayCount: res.yesterdayCount || 0,
        growthRate: res.growthRate || 0,
        rejectedCount: res.rejectedCount || res.data?.rejectedCount || 0,
        totalCount: res.totalCount || res.data?.totalCount || 0,
        averageCount: res.averageCount || 0,
        buttonStats: res.buttonStats || [],
        monthlyData: res.monthlyData || res.data?.monthlyData || generateMonthlyData(),
      };

      console.log('更新后的 statistics:', statistics.value);
    } catch (e) {
      console.error('获取统计数据失败', e);
    }
  }

  // 生成模拟月度数据（当后端未提供时）
  function generateMonthlyData() {
    return Array.from({ length: 12 }, (_, i) => ({
      name: `${i + 1}月`,
      value: Math.floor(Math.random() * 1000) + 200,
    }));
  }

  // 转换按钮统计数据格式
  const buttonStats = computed(() => {
    return statistics.value.buttonStats.map((item) => ({
      name: item.name,
      total: item.total,
    }));
  });
  // 在 setup 中添加转换函数
  const barData = computed(() => {
    if (!statistics.value.monthlyData) return [];

    return statistics.value.monthlyData.map((item) => {
      // 提取月份数字 (格式如 "2025-05" -> 5)
      const monthNum = parseInt(item.month.split('-')[1]);
      return {
        name: `${monthNum}月`,
        value: item.count,
      };
    });
  });

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

  setTimeout(() => {
    loading.value = false;
  }, 500);

  const loginfo = ref({});
  const lineMultiData = ref([]);
  function initLogInfo() {
    getLoginfo(null).then((res) => {
      if (res.success) {
        Object.keys(res.result).forEach((key) => {
          res.result[key] = res.result[key] + '';
        });
        loginfo.value = res.result;
      }
    });
    getVisitInfo(null).then((res) => {
      if (res.success) {
        lineMultiData.value = [];
        res.result.forEach((item) => {
          lineMultiData.value.push({ name: item.type, type: 'ip', value: item.ip, color: ipColor.value });
          lineMultiData.value.push({ name: item.type, type: 'visit', value: item.visit, color: visitColor.value });
        });
      }
    });
  }

  const ipColor = ref();
  const visitColor = ref();
  const seriesColor = ref();
  watch(
    () => getThemeColor.value,
    () => {
      seriesColor.value = getThemeColor.value;
      visitColor.value = '#67B962';
      ipColor.value = getThemeColor.value;
      initLogInfo();
    },
    { immediate: true }
  );

  function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
  }
</script>

<style lang="less" scoped>
  .infoArea {
    display: flex;
    justify-content: space-between;
    padding: 0 10%;
    .head-info.center {
      padding: 0;
    }
    .head-info {
      min-width: 0;
    }
  }
  .circle-cust {
    position: relative;
    top: 28px;
    left: -100%;
  }

  .extra-wrapper {
    line-height: 55px;
    padding-right: 24px;

    .extra-item {
      display: inline-block;
      margin-right: 24px;

      a {
        margin-left: 24px;
      }
    }
  }

  /* 首页访问量统计 */
  .head-info {
    position: relative;
    text-align: left;
    padding: 0 32px 0 0;
    min-width: 125px;

    &.center {
      text-align: center;
      padding: 0 32px;
    }

    span {
      color: rgba(0, 0, 0, 0.45);
      display: inline-block;
      font-size: 0.95rem;
      line-height: 42px;
      margin-bottom: 4px;
    }

    p {
      line-height: 42px;
      margin: 0;

      a {
        font-weight: 600;
        font-size: 1rem;
      }
    }
  }
  .ant-card {
    ::v-deep(.ant-card-head-title) {
      font-weight: normal;
    }
  }
</style>