<template>
  <a-page-header :show-back="false">
    <a-row :gutter="16">
      <!-- 应用基本信息卡片 -->
      <a-col :span="24" style="margin-bottom: 16px">
        <a-card :bordered="false">
          <template #title>
            <a-space>
              <span>概况</span>
              <a-divider type="vertical" />
              <div class="order-notify-bar">
                <span class="order-notify-label">新订单提醒</span>
                <a-switch v-model:checked="notifyEnabled" @change="onNotifyToggle" size="small" />
                <a-tooltip title="开启后每60秒自动检测新订单，检测到后播放叮声并语音播报">
                  <InfoCircleOutlined class="order-notify-icon" />
                </a-tooltip>
                <a-button size="small" :disabled="!notifyEnabled" @click="onTestNotify">测试</a-button>
              </div>
            </a-space>
          </template>
          <a-row :gutter="16">
            <a-col :span="6">
              <a-image
                :width="80"
                :height="80"
                :preview="false"
                style="border-radius: 8px"
                :src="siteStore.websiteLogo"
                fallback="/logo.png"
              />
            </a-col>
            <a-col :span="14">
              <div class="system-info">
                <h2 class="ele-text-heading">{{ siteStore.websiteName }}</h2>
                <p class="ele-text-secondary">{{
                  siteStore.websiteComments
                }}</p>
                <a-space>
                  <a-tag color="blue">版本 {{ systemInfo.version }}</a-tag>
                  <a-tag color="green">{{ systemInfo.status }}</a-tag>
                  <a-popover title="小程序码">
                    <template #content>
                      <p
                        ><img
                          :src="siteStore.websiteDarkLogo"
                          alt="小程序码"
                          width="300"
                          height="300"
                      /></p>
                    </template>
                    <a-tag>
                      <QrcodeOutlined />
                    </a-tag>
                  </a-popover>
                </a-space>
              </div>
            </a-col>
            <a-col :span="3">
              <div class="flex justify-center items-center h-full w-full">
              </div>
            </a-col>
          </a-row>
        </a-card>
      </a-col>

      <!-- 统计数据卡片 -->
      <a-col :span="6">
        <a-card :bordered="false" class="stat-card">
          <a-statistic
            title="用户总数"
            :value="userCount"
            :value-style="{ color: '#3f8600' }"
            :loading="loading"
          >
            <template #prefix>
              <UserOutlined />
            </template>
          </a-statistic>
        </a-card>
      </a-col>

      <a-col :span="6">
        <a-card :bordered="false" class="stat-card">
          <a-statistic
            title="订单总数"
            :value="orderCount"
            :value-style="{ color: '#1890ff' }"
            :loading="loading"
          >
            <template #prefix>
              <AccountBookOutlined />
            </template>
          </a-statistic>
        </a-card>
      </a-col>

      <a-col :span="6">
        <a-card :bordered="false" class="stat-card">
          <a-statistic
            title="总营业额"
            :value="totalSales"
            :value-style="{ color: '#cf1322' }"
            :loading="loading"
          >
            <template #prefix>
              <MoneyCollectOutlined />
            </template>
          </a-statistic>
        </a-card>
      </a-col>

      <a-col :span="6">
        <a-card :bordered="false" class="stat-card">
          <a-statistic
            title="系统运行天数"
            :value="runDays"
            suffix="天"
            :value-style="{ color: '#722ed1' }"
            :loading="loading"
          >
            <template #prefix>
              <ClockCircleOutlined />
            </template>
          </a-statistic>
        </a-card>
      </a-col>

      <!-- 系统基本信息 -->
      <a-col :span="12">
        <a-card title="基本信息" :bordered="false">
          <a-descriptions :column="1" size="small">
            <a-descriptions-item label="系统名称">
              {{ systemInfo.name }}
            </a-descriptions-item>
            <a-descriptions-item label="版本号">
              {{ systemInfo.version }}
            </a-descriptions-item>
            <a-descriptions-item label="部署环境">
              {{ systemInfo.environment }}
            </a-descriptions-item>
            <a-descriptions-item label="数据库">
              {{ systemInfo.database }}
            </a-descriptions-item>
            <a-descriptions-item label="服务器">
              {{ systemInfo.server }}
            </a-descriptions-item>
            <a-descriptions-item label="创建时间">
              {{ siteInfo?.createTime }}
            </a-descriptions-item>
            <a-descriptions-item label="到期时间">
              {{ siteInfo?.expirationTime }}
            </a-descriptions-item>
            <a-descriptions-item label="技术支持">
              <span
                class="cursor-pointer"
                >企业官网</span
              >
            </a-descriptions-item>
          </a-descriptions>
        </a-card>
      </a-col>

      <!-- 快捷操作 -->
      <a-col :span="12">
        <a-card title="快捷操作" :bordered="false">
          <a-space direction="vertical" style="width: 100%">
            <a-button
              type="primary"
              block
              @click="$router.push('/website/index')"
            >
              <ShopOutlined />
              站点管理
            </a-button>
            <a-button block @click="$router.push('/website/order')">
              <CalendarOutlined />
              订单管理
            </a-button>
            <a-button block @click="$router.push('/system/user')">
              <UserOutlined />
              用户管理
            </a-button>
            <a-button block @click="$router.push('/system/login-record')">
              <FileTextOutlined />
              系统日志
            </a-button>
            <a-button block @click="$router.push('/system/setting')">
              <SettingOutlined />
              系统设置
            </a-button>
          </a-space>
        </a-card>
      </a-col>
    </a-row>
  </a-page-header>
</template>

<script lang="ts" setup>
  import { ref, onMounted, onUnmounted, computed } from 'vue';
  import { useOrderNotify } from '@/views/shop/shopOrder/useOrderNotify';
  import {
    UserOutlined,
    CalendarOutlined,
    QrcodeOutlined,
    ShopOutlined,
    ClockCircleOutlined,
    SettingOutlined,
    AccountBookOutlined,
    FileTextOutlined,
    MoneyCollectOutlined,
    InfoCircleOutlined
  } from '@ant-design/icons-vue';
  import { openNew } from '@/utils/common';
  import { useSiteStore } from '@/store/modules/site';
  import { useStatisticsStore } from '@/store/modules/statistics';
  import { useUserStore } from '@/store/modules/user';
  import { getTenantInfo } from '@/api/layout';
  import { storeToRefs } from 'pinia';

  // 使用状态管理
  const siteStore = useSiteStore();
  const statisticsStore = useStatisticsStore();
  const userStore = useUserStore();

  // 从 store 中获取响应式数据
  const { siteInfo, loading: siteLoading } = storeToRefs(siteStore);
  const { loading: statisticsLoading } = storeToRefs(statisticsStore);

  // 系统信息
  const systemInfo = ref({
    name: '小程序商城',
    description:
      '基于Spring、SpringBoot、SpringMVC等技术栈构建的前后端分离开发平台',
    version: '2.0.0',
    status: '运行中',
    logo: '/logo.png',
    environment: '生产环境',
    database: 'MySQL 8.0',
    server: 'Linux CentOS 7.9',
    expirationTime: '2024-01-01 09:00:00'
  });

  // 计算属性
  const now = ref(Date.now());
  const tenantCreateTime = ref<string>('');
  let runDaysTimer: ReturnType<typeof setInterval>;
  const runDays = computed(() => {
    if (!tenantCreateTime.value) return 0;
    return Math.floor((now.value - new Date(tenantCreateTime.value).getTime()) / (24 * 60 * 60 * 1000));
  });
  const userCount = computed(() => statisticsStore.userCount);
  const orderCount = computed(() => statisticsStore.orderCount);
  const totalSales = computed(() => statisticsStore.totalSales);

  // 加载状态
  const loading = computed(() => siteLoading.value || statisticsLoading.value);

  // 加载数据
  const loadData = async () => {
    // 独立请求租户信息，不受其他请求失败影响
    getTenantInfo()
      .then((res) => {
        tenantCreateTime.value = res?.createTime || '';
      })
      .catch((e) => {
        console.warn('获取租户信息失败:', e);
      });

    try {
      await Promise.all([
        siteStore.fetchSiteInfo(),
        statisticsStore.fetchStatistics()
      ]);
    } catch (error) {
      console.error('加载数据失败:', error);
    }
  };

  // 新订单声音提醒
  const { enabled: notifyEnabled, toggle: onNotifyToggle, testNotify: onTestNotify } = useOrderNotify({
    onNewOrder: () => loadData()
  });

  onMounted(async () => {
    await loadData();
    // 开始自动刷新统计数据（每5分钟）
    statisticsStore.startAutoRefresh();
    // 运行天数每小时检查一次（跨天自动更新）
    runDaysTimer = setInterval(() => { now.value = Date.now(); }, 60 * 60 * 1000);
  });

  onUnmounted(() => {
    // 组件卸载时停止自动刷新
    statisticsStore.stopAutoRefresh();
    clearInterval(runDaysTimer);
  });
</script>

<style scoped>
  .system-info h2 {
    margin-bottom: 8px;
  }

  /* 新订单提醒栏（概况卡片标题中） */
  .order-notify-bar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 2px 12px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 6px;
  }
  .order-notify-label {
    font-size: 13px;
    color: #166534;
    white-space: nowrap;
  }
  .order-notify-icon {
    color: #16a34a;
    font-size: 14px;
    cursor: help;
  }

  .stat-card {
    text-align: center;
    margin-bottom: 16px;
  }

  .stat-card :deep(.ant-statistic-title) {
    font-size: 14px;
    color: #666;
  }

  .stat-card :deep(.ant-statistic-content) {
    font-size: 24px;
    font-weight: 600;
  }
</style>
