<template>
  <view class="finance-balance-stats">
    <!-- 顶部数据统计卡片 (3列布局) -->
    <view class="stats-grid">
      <view class="stat-card border-shadow">
        <view class="stat-icon-circle bg-blue">
          <text class="icon-white">💰</text>
        </view>
        <view class="stat-content">
          <text class="stat-value">{{ statsData.current_balance.toFixed(2) }}</text>
          <text class="stat-label">当前余额</text>
        </view>
      </view>
      <view class="stat-card border-shadow">
        <view class="stat-icon-circle bg-orange">
          <text class="icon-white">🏦</text>
        </view>
        <view class="stat-content">
          <text class="stat-value">{{ statsData.total_accumulation.toFixed(2) }}</text>
          <text class="stat-label">累计余额</text>
        </view>
      </view>
      <view class="stat-card border-shadow">
        <view class="stat-icon-circle bg-green">
          <text class="icon-white">💳</text>
        </view>
        <view class="stat-content">
          <text class="stat-value">{{ statsData.total_consumption.toFixed(2) }}</text>
          <text class="stat-label">累计消耗余额</text>
        </view>
      </view>
    </view>

    <!-- 时间筛选区 -->
    <view class="filter-bar border-shadow">
      <view class="filter-item">
        <text class="filter-label">时间选择:</text>
        <view class="date-picker-wrap">
          <text class="calendar-icon">📅</text>
          <text class="date-range">2026/01/05 - 2026/02/03</text>
        </view>
      </view>
    </view>

    <!-- 趋势图表区 (CRMEB 1:1) -->
    <view class="chart-box border-shadow">
      <view class="chart-header">
        <text class="chart-title">余额使用趋势</text>
        <view class="chart-legend">
          <view class="legend-item">
            <view class="dot blue-dot"></view>
            <text class="legend-txt">余额积累</text>
          </view>
          <view class="legend-item">
            <view class="dot green-dot"></view>
            <text class="legend-txt">余额消耗</text>
          </view>
        </view>
        <view class="chart-ops">
          <text class="op-icon">📥</text>
        </view>
      </view>
      <view class="main-chart-wrap">
        <EChartsView v-if="trendOption != null" :option="trendOption" class="main-trend-chart" />
      </view>
    </view>

    <!-- 底部双列分析 -->
    <view class="bottom-analysis">
      <view class="analysis-box border-shadow">
        <view class="box-header">
          <text class="box-title">余额来源分析</text>
          <view class="btn-toggle" @click="toggleSourceStyle">
            <text class="toggle-txt">切换样式</text>
          </view>
        </view>
        <view class="chart-container">
          <!-- 样式 0: 图表 -->
          <EChartsView v-if="sourceStyleMode == 0 && sourceOption != null" :option="sourceOption" class="pie-chart" />
          
          <!-- 样式 1: 列表 -->
          <view v-if="sourceStyleMode == 1" class="stats-table">
            <view class="table-header">
              <text class="th col-idx">序号</text>
              <text class="th col-name">来源</text>
              <text class="th col-amount">金额</text>
              <text class="th col-percent">占比率</text>
            </view>
            <scroll-view class="table-body">
              <view class="table-row" v-for="(item, index) in sourceData" :key="index">
                <text class="td col-idx">{{ index + 1 }}</text>
                <text class="td col-name">{{ item.name }}</text>
                <text class="td col-amount">{{ item.value.toFixed(2) }}</text>
                <view class="td col-percent">
                  <view class="progress-container">
                    <view class="progress-bar" :style="{ width: item.percent + '%' }"></view>
                  </view>
                  <text class="percent-txt">{{ item.percent.toFixed(2) }}%</text>
                </view>
              </view>
            </scroll-view>
          </view>
        </view>
      </view>
      <view class="analysis-box border-shadow">
        <view class="box-header">
          <text class="box-title">余额消耗</text>
          <view class="btn-toggle" @click="toggleConsumptionStyle">
            <text class="toggle-txt">切换样式</text>
          </view>
        </view>
        <view class="chart-container">
          <!-- 样式 0: 图表 -->
          <EChartsView v-if="consumptionStyleMode == 0 && consumptionOption != null" :option="consumptionOption" class="pie-chart" />
          
          <!-- 样式 1: 列表 -->
          <view v-if="consumptionStyleMode == 1" class="stats-table">
            <view class="table-header">
              <text class="th col-idx">序号</text>
              <text class="th col-name">来源</text>
              <text class="th col-amount">金额</text>
              <text class="th col-percent">占比率</text>
            </view>
            <scroll-view class="table-body">
              <view class="table-row" v-for="(item, index) in consumptionDataList" :key="index">
                <text class="td col-idx">{{ index + 1 }}</text>
                <text class="td col-name">{{ item.name }}</text>
                <text class="td col-amount">{{ item.value.toFixed(2) }}</text>
                <view class="td col-percent">
                  <view class="progress-container">
                    <view class="progress-bar" :style="{ width: item.percent + '%' }"></view>
                  </view>
                  <text class="percent-txt">{{ item.percent.toFixed(2) }}%</text>
                </view>
              </view>
            </scroll-view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="uts">
import { ref, onMounted } from 'vue'
import EChartsView from '@/uni_modules/charts/EChartsView.vue'
import { 
  fetchAdminBalanceStats, 
  fetchAdminBalanceTrend, 
  fetchAdminBalanceDistribution 
} from '@/services/admin/financeService.uts'

const trendOption = ref<any>(null)
const sourceOption = ref<any>(null)
const consumptionOption = ref<any>(null)
const loading = ref(false)

// 顶部汇总指标
const statsData = ref({
  current_balance: 0,
  total_accumulation: 0,
  total_consumption: 0
})

// 样式切换状态: 0=图表, 1=列表
const sourceStyleMode = ref(0)
const consumptionStyleMode = ref(0)

// 统计数据列表 (用于展示样式1)
const sourceData = ref<any[]>([])
const consumptionDataList = ref<any[]>([])

/**
 * 转换 Plain Object 工具
 */
function toPlainObject(obj : any) : any {
  if (obj == null) return null
  if (typeof obj !== 'object') return obj
  if (Array.isArray(obj)) {
    return (obj as Array<any>).map((item : any) : any => toPlainObject(item))
  }
  const plain : Record<string, any> = {}
  const keys = Object.keys(obj as Record<string, any>)
  for (let i = 0; i < keys.length; i++) {
    const key = keys[i]
    if (key.startsWith('_') || key == 'toJSON') continue
    const value = (obj as Record<string, any>)[key]
    if (typeof value == 'function') continue
    if (value != null && typeof value == 'object' && !Array.isArray(value)) {
      plain[key] = toPlainObject(value)
    } else {
      plain[key] = value
    }
  }
  return plain
}

onMounted(() => {
  loadAllData()
})

async function loadAllData() {
  loading.value = true
  const endTime = new Date().toISOString()
  const startTime = new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString() // 默认最近30天

  try {
    // 1. 加载汇总指标
    const stats = await fetchAdminBalanceStats()
    if (stats != null) {
      statsData.value.current_balance = (stats as any).current_balance ?? 0
      statsData.value.total_accumulation = (stats as any).total_accumulation ?? 0
      statsData.value.total_consumption = (stats as any).total_consumption ?? 0
    }

    // 2. 加载趋势数据
    const trendData = await fetchAdminBalanceTrend(startTime, endTime)
    initTrendChart(trendData)

    // 3. 加载分布数据 (来源与消耗)
    const distRes = await fetchAdminBalanceDistribution(startTime, endTime)
    if (distRes != null) {
      sourceData.value = (distRes as any).income ?? []
      consumptionDataList.value = (distRes as any).expense ?? []
      initSourceChart()
      initConsumptionChart()
    }
  } catch (e) {
    uni.showToast({ title: '加载统计数据失败', icon: 'none' })
  } finally {
    loading.value = false
  }
}

function initTrendChart(data : any[]) {
  const dates = data.map(item => item.date_group.substring(5))
  const accumulationData = data.map(item => item.accumulation)
  const consumptionData = data.map(item => item.consumption)

  const option = {
    grid: { left: '3%', right: '4%', bottom: '5%', top: '5%', containLabel: true },
    tooltip: { trigger: 'axis' },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: dates,
      axisLine: { lineStyle: { color: '#f0f0f0' } },
      axisLabel: { color: '#999', interval: 4 }
    },
    yAxis: {
      type: 'value',
      axisLine: { show: false },
      splitLine: { lineStyle: { color: '#f5f5f5' } },
      axisLabel: { color: '#999' }
    },
    series: [
      {
        name: '余额积累',
        type: 'line',
        smooth: true,
        data: accumulationData,
        itemStyle: { color: '#1890ff' }
      },
      {
        name: '余额消耗',
        type: 'line',
        smooth: true,
        data: consumptionData,
        itemStyle: { color: '#52c41a' }
      }
    ]
  }
  trendOption.value = toPlainObject(option)
}

function initSourceChart() {
  const option = {
    tooltip: { trigger: 'item', formatter: '{b}: {c}%' },
    legend: { orient: 'vertical', right: '5%', top: 'center', itemWidth: 10, itemHeight: 10 },
    color: ['#5b8ff9', '#5ad8a6', '#5d7092', '#f6bd16', '#e8684a'],
    series: [
      {
        name: '余额来源',
        type: 'pie',
        radius: '70%',
        center: ['40%', '50%'],
        label: { show: true, fontSize: 11, formatter: '{b}\n{c}%' },
        data: sourceData.value.map(item => ({ value: item.percent, name: item.name }))
      }
    ]
  }
  sourceOption.value = toPlainObject(option)
}

function initConsumptionChart() {
  const option = {
    tooltip: { trigger: 'item', formatter: '{b}: {c}%' },
    legend: { orient: 'vertical', right: '5%', top: 'center', itemWidth: 10, itemHeight: 10 },
    color: ['#5b8ff9', '#5ad8a6', '#5d7092', '#f6bd16'],
    series: [
      {
        name: '余额消耗',
        type: 'pie',
        radius: '70%',
        center: ['40%', '50%'],
        label: { show: true, fontSize: 11, formatter: '{b}\n{c}%' },
        data: consumptionDataList.value.map(item => ({ value: item.percent, name: item.name }))
      }
    ]
  }
  consumptionOption.value = toPlainObject(option)
}

function toggleSourceStyle() {
  sourceStyleMode.value = sourceStyleMode.value === 0 ? 1 : 0
  if (sourceStyleMode.value === 0) {
    setTimeout(() => initSourceChart(), 50)
  }
}

function toggleConsumptionStyle() {
  consumptionStyleMode.value = consumptionStyleMode.value === 0 ? 1 : 0
  if (consumptionStyleMode.value === 0) {
    setTimeout(() => initConsumptionChart(), 50)
  }
}
</script>

<style scoped lang="scss">
.finance-balance-stats {
  padding: 0;
  background-color: transparent;
  min-height: auto;
}

.border-shadow {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

/* 顶部卡片 */
.stats-grid {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 20px;
}

.stat-card {
  flex: 1;
  margin: 0 10px;
  padding: 24px 30px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.stats-grid .stat-card:first-child { margin-left: 0; }
.stats-grid .stat-card:last-child { margin-right: 0; }

.stat-icon-circle {
  width: 60px;
  height: 60px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
}

.bg-blue { background-color: #40a9ff; }
.bg-orange { background-color: #ffa940; }
.bg-green { background-color: #73d13d; }

.icon-white { color: #fff; font-size: 24px; }

.stat-content {
  display: flex;
  flex-direction: column;
}

.stat-value {
  font-size: 28px;
  font-weight: 500;
  color: #303133;
  line-height: 1.2;
}

.stat-label {
  font-size: 14px;
  color: #909399;
  margin-top: 4px;
}

/* 时间筛选区 */
.filter-bar {
  padding: 16px 24px;
  margin-bottom: 20px;
}

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

.filter-label {
  font-size: 14px;
  color: #606266;
  margin-right: 15px;
}

.date-picker-wrap {
  width: 320px;
  height: 36px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 12px;
}

.calendar-icon { font-size: 14px; color: #c0c4cc; margin-right: 10px; }
.date-range { font-size: 14px; color: #606266; }

/* 趋势图表区 */
.chart-box {
  padding: 24px;
  margin-bottom: 20px;
}

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

.chart-title { font-size: 16px; font-weight: 600; color: #303133; margin-right: auto; }

.chart-legend {
  display: flex;
  flex-direction: row;
}

.legend-item { display: flex; flex-direction: row; align-items: center; margin-left: 20px; }
.legend-txt { font-size: 13px; color: #666; }
.dot { width: 10px; height: 10px; border-radius: 5px; margin-right: 8px; }
.blue-dot { background-color: #1890ff; }
.green-dot { background-color: #52c41a; }

.chart-ops { margin-left: 20px; }
.op-icon { font-size: 20px; color: #909399; }

.main-chart-wrap {
  height: 400px;
  width: 100%;
}

.main-trend-chart {
  width: 100%;
  height: 100%;
}

/* 底部分析 */
.bottom-analysis {
  display: flex;
  flex-direction: row;
  margin: 0 -10px 40px -10px;
}

.analysis-box {
  flex: 1;
  margin: 0 10px;
  padding: 24px;
}

.box-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.box-title { font-size: 15px; font-weight: 600; color: #303133; }

.btn-toggle {
  padding: 4px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 15px;
  cursor: pointer;
}

.toggle-txt { font-size: 12px; color: #606266; }

.chart-container {
  height: 300px;
  width: 100%;
}

.pie-chart {
  width: 100%;
  height: 100%;
}

/* 列表样式 */
.stats-table {
  display: flex;
  flex-direction: column;
}

.table-header {
  display: flex;
  flex-direction: row;
  background-color: #e6f0ff;
  padding: 12px 0;
  border-radius: 4px;
}

.th {
  font-size: 13px;
  color: #606266;
  text-align: center;
  font-weight: 500;
}

.table-row {
  display: flex;
  flex-direction: row;
  padding: 15px 0;
  border-bottom: 1px solid #f0f0f0;
  align-items: center;
}

.td {
  font-size: 13px;
  color: #606266;
  text-align: center;
}

.col-idx { width: 60px; }
.col-name { flex: 1; }
.col-amount { flex: 1.5; }
.col-percent { flex: 2; display: flex; flex-direction: row; align-items: center; justify-content: center; padding: 0 20px; }

.progress-container {
  flex: 1;
  height: 8px;
  background-color: #f5f5f5;
  border-radius: 4px;
  margin-right: 10px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background-color: #1890ff;
  border-radius: 4px;
}

.percent-txt {
  width: 60px;
  font-size: 12px;
  color: #666;
}
</style>
