<template>
  <div class="p-4">
    <ChartGroupCard class="enter-y" :loading="loading" type="chart" :statistics="statistics" />
    <SaleTabCard class="!my-4 enter-y" :loading="loading" @range-change="handleRangeChange" />
    <a-row>
      <a-col :span="24">
        <a-card :loading="questionLoading" :bordered="false" title="问题输入量统计">
          <div class="infoArea">
            <HeadInfo title="今日" :contentColor="black" :iconColor="ipColor" :content="formatNumber(questionStats.todayCount)" icon="environment" />
            <HeadInfo title="本周" :contentColor="black" :iconColor="ipColor" :content="formatNumber(questionStats.weekCount)" icon="environment" />
            <HeadInfo title="本月" :contentColor="black" :iconColor="ipColor" :content="formatNumber(questionStats.monthCount)" icon="environment" />
            <HeadInfo title="本年" :contentColor="black" :iconColor="ipColor" :content="formatNumber(questionStats.yearCount)" icon="environment" />
            <HeadInfo title="总计" :contentColor="black" :iconColor="ipColor" :content="formatNumber(questionStats.totalCount)" 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 { 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, getQuestionStatistics, getStatistics, getVisitInfo } from '../api';
  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
  import { black } from 'picocolors';

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

  // 默认范围类型（全部）
  const rangeType = ref<string | null>(null);
  const dateRange = ref<{ startTime?: string; endTime?: string }>({});

  // 处理范围变化
  const handleRangeChange = (params: { rangeType: string | null; startTime?: string; endTime?: string }) => {
    rangeType.value = params.rangeType;
    dateRange.value = {
      startTime: params.startTime,
      endTime: params.endTime,
    };
    fetchStatistics();
  };

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

  const questionStats = ref({
    todayCount: 0,
    weekCount: 0,
    monthCount: 0,
    yearCount: 0,
    totalCount: 0,
  });

  // 获取问题统计数据的方法
  async function fetchQuestionStatistics() {
    try {
      questionLoading.value = true;
      const res = await getQuestionStatistics();
      console.log('问题统计数据:', res);

      // 更新数据（根据实际接口返回结构调整）
      questionStats.value = {
        todayCount: res.todayCount ?? 0,
        weekCount: res.weekCount ?? 0,
        monthCount: res.monthCount ?? 0,
        yearCount: res.yearCount ?? 0,
        totalCount: res.totalCount ?? 0,
      };
    } catch (error) {
      console.error('获取问题统计失败', error);
    } finally {
      questionLoading.value = false;
    }
  }
  // 实时数据获取函数
  async function fetchStatistics() {
    try {
      const params = {
        rangeType: rangeType.value,
        ...dateRange.value,
      };

      const res = await getStatistics(params);
      console.log('接收到的统计数据:', res); // 添加日志输出
      console.log('res是否有success属性:', 'success' in res);
      // 直接使用响应数据，不检查 success 属性
      statistics.value = {
        todayCount: res.todayCount || res.data?.todayCount || 0,
        earliestTime: res.earliestTime || '',
        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,
        monthlyData: res.monthlyData || res.data?.monthlyData || generateMonthlyData(),
        dailyCounts: res.dailyCounts || [],
        dailyRejectedCounts: res.dailyRejectedCounts || [],
      };

      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 formatNumber = (num: number) => {
    return num.toLocaleString();
  };

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

  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>