<template>
  <view class="admin-page">
    <view class="admin-sections">
      <!-- 筛选栏 -->
      <view class="admin-card filter-card">
        <view class="filter-item">
          <text class="filter-label">用户渠道：</text>
        <view class="select-box">
          <text class="select-text">全部</text>
          <text class="select-arrow">▼</text>
        </view>
      </view>
      
      <view class="filter-item">
        <text class="filter-label">选择时间：</text>
        <view class="date-picker-box">
          <text class="date-icon">📅</text>
          <text class="date-text">2026/01/04 - 2026/02/02</text>
        </view>
      </view>

      <view class="filter-btns">
        <button class="btn primary" @click="onSearch">查询</button>
        <button class="btn" @click="onExport">导出</button>
      </view>
    </view>

    <!-- 用户概况卡片区 (使用 6-2-1 响应式网格) -->
    <view class="admin-card section-card">
      <view class="section-header">
        <text class="section-title">用户概况</text>
        <text class="info-icon">❓</text>
      </view>

      <view class="kpi-grid-6">
        <view class="kpi-card" v-for="item in kpiData" :key="item.title">
          <view class="kpi-icon-box" :style="{ backgroundColor: item.bg }">
            <text class="kpi-icon">{{ item.icon }}</text>
          </view>
          <view class="kpi-content">
            <text class="kpi-label">{{ item.title }}</text>
            <text class="kpi-value">{{ item.value }}</text>
            <view class="kpi-meta">
              <text class="meta-label">环比增长：</text>
              <text class="meta-value" :class="item.trend">
                {{ item.percent }} 
                <text class="trend-icon">{{ item.trend === 'up' ? '▲' : '▼' }}</text>
              </text>
            </view>
          </view>
        </view>
      </view>

      <!-- 图表区 -->
      <view class="chart-container">
        <view class="chart-header">
          <view class="header-left"></view>
          <view class="header-right">
            <text class="download-icon">📥</text>
          </view>
        </view>
        <AnalyticsMultiLineChart 
          :xLabels="chartData.x" 
          :series="chartData.series"
          :height="450"
        />
      </view>
    </view>

      <!-- 地域分布与性别比例 -->
      <view class="analysis-row">
        <view class="map-col">
          <AnalyticsUserMapTable />
        </view>
        <view class="gender-col">
          <AnalyticsUserGenderSection />
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="uts">
import { ref } from 'vue'
import AnalyticsMultiLineChart from '@/components/analytics/AnalyticsMultiLineChart.uvue'
import AnalyticsUserMapTable from '@/components/analytics/AnalyticsUserMapTable.uvue'
import AnalyticsUserGenderSection from '@/components/analytics/AnalyticsUserGenderSection.uvue'

const kpiData = [
  { title: '累计用户', value: '80887', percent: '0.79%', trend: 'up', icon: '👥', bg: '#efebff' },
  { title: '访客数', value: '1076', percent: '11.65%', trend: 'down', icon: '👤', bg: '#e8f4ff' },
  { title: '浏览量', value: '8843', percent: '12.09%', trend: 'down', icon: '📁', bg: '#e6fff1' },
  { title: '新增用户数', value: '635', percent: '14.65%', trend: 'down', icon: '👤', bg: '#fff7e6' },
  { title: '成交用户数', value: '122', percent: '0.81%', trend: 'down', icon: '👥', bg: '#f2f0ff' },
  { title: '付费会员数', value: '76', percent: '13.63%', trend: 'down', icon: '💎', bg: '#f2f0ff' }
]

const chartData = {
  x: ['01-04', '01-05', '01-06', '01-07', '01-08', '01-09', '01-10', '01-11', '01-12', '01-13', '01-14', '01-15', '01-16', '01-17', '01-18', '01-19', '01-20', '01-21', '01-22', '01-23', '01-24', '01-25', '01-26', '01-27', '01-28', '01-29', '01-30', '01-31', '02-01', '02-02'],
  series: [
    { name: '新增用户数', color: '#1890ff', data: [40, 30, 25, 30, 22, 10, 20, 32, 28, 15, 8, 12, 18, 22, 15, 12, 25, 30, 28, 25, 35, 20, 18, 22, 20, 15, 10, 8, 15, 38] },
    { name: '访客数', color: '#52c41a', data: [70, 75, 65, 55, 65, 50, 45, 35, 50, 68, 72, 65, 50, 48, 55, 65, 75, 62, 58, 85, 70, 55, 48, 58, 65, 72, 68, 60, 45, 50] },
    { name: '浏览量', color: '#fa8c16', data: [520, 500, 420, 280, 580, 180, 220, 100, 180, 450, 500, 400, 320, 340, 150, 280, 450, 320, 440, 460, 320, 260, 320, 280, 380, 400, 320, 330, 250, 300] },
    { name: '成交用户数', color: '#722ed1', data: [15, 12, 10, 8, 18, 5, 8, 4, 6, 12, 15, 10, 8, 9, 4, 10, 12, 8, 10, 12, 8, 6, 10, 8, 12, 14, 10, 8, 5, 8] },
    { name: '新增付费用户数', color: '#f5222d', data: [5, 4, 3, 2, 6, 1, 2, 1, 2, 4, 5, 3, 2, 3, 1, 3, 4, 2, 3, 4, 2, 2, 3, 2, 4, 5, 3, 2, 1, 3] }
  ]
}

function onSearch() {
  uni.showToast({ title: '搜索中...' })
}

function onExport() {
  uni.showToast({ title: '导出中...' })
}
</script>

<style scoped>
.admin-page {
  /* 使用 Layout 的背景和内边距 */
  min-height: 100vh;
}

.filter-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 32px;
  padding: var(--admin-card-padding);
}

.filter-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.filter-label {
  font-size: 14px;
  color: #333;
}

.select-box {
  width: 180px;
  height: 32px;
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
}

.select-text { font-size: 14px; color: #333; }
.select-arrow { font-size: 10px; color: #bfbfbf; }

.date-picker-box {
  min-width: 240px;
  height: 32px;
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 12px;
  gap: 8px;
}

.date-icon { font-size: 14px; }
.date-text { font-size: 14px; color: #333; }

.filter-btns {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.btn {
  height: 32px;
  padding: 0 16px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  background-color: #fff;
  border: 1px solid #d9d9d9;
  margin: 0;
}

.btn.primary {
  background-color: #1890ff;
  border-color: #1890ff;
  color: #fff;
}

.section-card {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.section-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 24px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.info-icon {
  margin-left: 6px;
  color: #999;
  font-size: 14px;
}

/* kpi-row 已废弃，采用全局 kpi-grid-6 */
.kpi-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 16px 8px;
  min-width: 0;
}

.kpi-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  flex-shrink: 0;
}

.kpi-icon { font-size: 20px; }

.kpi-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.kpi-label { font-size: 13px; color: #666; margin-bottom: 4px; }
.kpi-value { font-size: 24px; font-weight: 700; color: #333; line-height: 1.2; margin-bottom: 4px; }

.kpi-meta {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}

.meta-label { font-size: 12px; color: #999; }
.meta-value { font-size: 12px; font-weight: 500; }
.meta-value.up { color: #f5222d; }
.meta-value.down { color: #52c41a; }

.trend-icon {
  font-size: 10px;
  margin-left: 2px;
}

.chart-container {
  border-top: 1px solid #f0f0f0;
  padding-top: 24px;
}

.chart-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 24px;
}

.download-icon {
  font-size: 18px;
  color: #8c8c8c;
  cursor: pointer;
}

.analysis-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--admin-section-gap);
  width: 100%;
}

.map-col, .gender-col {
  min-width: 0;
  display: flex; /* 让子元素可以正常撑开 */
  flex-direction: column;
}

@media (max-width: 1199.98px) {
  .analysis-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .filter-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .filter-item {
    width: 100%;
  }
  
  .select-box, .date-picker-box {
    flex: 1;
  }
}

/* @media (max-width: 1199.98px)  已将 analysis-row 移出，与 filter-card 逻辑解耦 */
</style>
