<template>
  <div class="app-container home">
    <!-- 顶部统计区域 -->
    <el-row :gutter="20">
      <!-- 商户付费 - 合并为一个卡片 -->
      <el-col :span="6">
        <div class="merchant-payment-card">
          <div class="card-header">
            <div class="title">商户付费</div>
            <div class="tabs">
              <el-button size="small" :type="timeFilter === 'today' ? 'primary' : ''" plain @click="timeFilter = 'today'">今日</el-button>
              <el-button size="small" :type="timeFilter === 'month' ? 'primary' : ''" plain @click="timeFilter = 'month'">本月</el-button>
              <el-button size="small" :type="timeFilter === 'year' ? 'primary' : ''" plain @click="timeFilter = 'year'">今年</el-button>
            </div>
          </div>
          <div class="chart-wrapper">
            <div ref="pieChartRef" class="echart"></div>
          </div>
        </div>
      </el-col>

      <!-- 统计卡片 -->
      <el-col :span="18">
        <div class="stat-cards-wrapper">
          <el-row :gutter="20" class="stat-row-top">
            <el-col :span="12">
              <div class="stat-card">
                <div class="card-title">平台注册数</div>
                <div class="stat-row">
                  <div class="stat-item">
                    <div class="label">今日</div>
                    <div class="value">20</div>
                  </div>
                  <div class="stat-item">
                    <div class="label">本月</div>
                    <div class="value">44</div>
                  </div>
                  <div class="stat-item">
                    <div class="label">本年度</div>
                    <div class="value">400</div>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="stat-card">
                <div class="card-title">客户注册数</div>
                <div class="stat-row">
                  <div class="stat-item">
                    <div class="label">今日</div>
                    <div class="value">23</div>
                  </div>
                  <div class="stat-item">
                    <div class="label">本月</div>
                    <div class="value">56</div>
                  </div>
                  <div class="stat-item">
                    <div class="label">本年度</div>
                    <div class="value">100</div>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="stat-row-bottom">
            <el-col :span="12">
              <div class="stat-card">
                <div class="card-title">门店数增长</div>
                <div class="stat-row">
                  <div class="stat-item">
                    <div class="label">今日</div>
                    <div class="value">4</div>
                  </div>
                  <div class="stat-item">
                    <div class="label">本月</div>
                    <div class="value">12</div>
                  </div>
                  <div class="stat-item">
                    <div class="label">本年度</div>
                    <div class="value">100</div>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="stat-card">
                <div class="card-title">门店收银金额</div>
                <div class="stat-row">
                  <div class="stat-item">
                    <div class="label">今日</div>
                    <div class="value">¥4,000</div>
                  </div>
                  <div class="stat-item">
                    <div class="label">本月</div>
                    <div class="value">¥8,000</div>
                  </div>
                  <div class="stat-item">
                    <div class="label">本年度</div>
                    <div class="value">¥23,333</div>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>

    <!-- 门店使用排行榜 -->
    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="24">
        <div class="table-card">
          <div class="table-header">
            <h3>
              <i class="el-icon-connection" style="color: #f56c6c; margin-right: 8px"></i>
              门店使用排行榜
            </h3>
            <div class="tabs">
              <el-button size="small" :type="tableFilter === 'month' ? 'primary' : ''" plain @click="tableFilter = 'month'">本月</el-button>
              <el-button size="small" :type="tableFilter === 'year' ? 'primary' : ''" plain @click="tableFilter = 'year'">本年度</el-button>
            </div>
          </div>
          <el-table :data="storeList" style="width: 100%" border>
            <el-table-column prop="rank" label="排序" width="80" align="center" />
            <el-table-column prop="storeId" label="门店编号" width="150" />
            <el-table-column prop="storeName" label="门店名称" />
            <el-table-column prop="userCount" label="用户注册数" width="150" align="center" />
            <el-table-column prop="createTime" label="创建时间" width="200" />
          </el-table>
          <div class="pagination">
            <el-pagination
              :current-page="currentPage"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="pageSize"
              layout="total, prev, pager, next, sizes, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Index" lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';

// 时间筛选
const timeFilter = ref('today');
const tableFilter = ref('month');

// 模拟数据
const storeList = ref([
  { rank: 1, storeId: 'LE-001', storeName: '门店名称总店', userCount: 1004, createTime: '2025-07-29 01:01' },
  { rank: 2, storeId: 'LE-002', storeName: '门店名称总店', userCount: 223, createTime: '2025-07-17 07:36' },
  { rank: 3, storeId: 'LE-003', storeName: '门店名称总店', userCount: 222, createTime: '2025-07-29 05:42' },
  { rank: 4, storeId: 'LE-004', storeName: '门店名称总店', userCount: 211, createTime: '2025-07-12 03:34' },
  { rank: 5, storeId: 'LE-005', storeName: '门店名称总店', userCount: 88, createTime: '2025-08-06 08:12' },
  { rank: 6, storeId: 'LE-006', storeName: '门店名称总店', userCount: 22, createTime: '2025-07-11 05:15' },
  { rank: 7, storeId: 'LE-007', storeName: '门店名称总店', userCount: 12, createTime: '2025-07-10 11:05' }
]);

// 分页相关
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(500);

const handleSizeChange = (val: number) => {
  pageSize.value = val;
};

const handleCurrentChange = (val: number) => {
  currentPage.value = val;
};

// ECharts 饼图
const pieChartRef = ref<HTMLDivElement | null>(null);
let chartInstance: echarts.ECharts | null = null;
let resizeHandler: (() => void) | null = null;

const initPieChart = () => {
  if (!pieChartRef.value) return;

  chartInstance = echarts.init(pieChartRef.value);

  const chartData = [
    {
      value: 6000,
      name: '套餐付费',
      itemStyle: { color: '#409eff' },
      label: { show: false },
      emphasis: { label: { show: false } }
    },
    {
      value: 1000,
      name: '短信费用',
      itemStyle: { color: '#5cdbd3' },
      label: { show: false },
      emphasis: { label: { show: false } }
    },
    {
      value: 3000,
      name: '商品费用',
      itemStyle: { color: '#f6bd16' },
      label: { show: false },
      emphasis: { label: { show: false } }
    }
  ];

  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{b}: ¥{c}'
    },
    legend: {
      show: true,
      orient: 'vertical',
      right: '8%',
      top: 'center',
      textStyle: {
        color: '#333',
        fontSize: 11
      },
      itemGap: 10,
      itemWidth: 12,
      itemHeight: 12,
      formatter: (name: string) => {
        const item = chartData.find((d: any) => d.name === name);
        return `${name}\n¥${item?.value || 0}`;
      }
    },
    graphic: [
      {
        type: 'text',
        left: 'center',
        top: 'middle',
        z: 999,
        style: {
          text: '¥10,000',
          textAlign: 'center',
          textVerticalAlign: 'middle',
          fill: '#333',
          fontSize: 16,
          fontWeight: 'bold'
        }
      }
    ],
    series: [
      {
        name: '商户付费',
        type: 'pie',
        radius: ['55%', '80%'],
        center: ['50%', '50%'], // ← 修改为水平居中
        avoidLabelOverlap: false,
        label: {
          show: false
        },
        emphasis: {
          scale: true,
          scaleSize: 3
        },
        labelLine: {
          show: false
        },
        data: chartData
      }
    ]
  };

  chartInstance.setOption(option);

  // 监听窗口大小变化，重新渲染图表
  resizeHandler = () => {
    chartInstance?.resize();
  };
  window.addEventListener('resize', resizeHandler);
};

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

onBeforeUnmount(() => {
  // 清理图表实例
  if (chartInstance) {
    chartInstance.dispose();
    chartInstance = null;
  }
  // 移除resize监听器
  if (resizeHandler) {
    window.removeEventListener('resize', resizeHandler);
    resizeHandler = null;
  }
});
</script>

<style lang="scss" scoped>
.app-container {
  height: 100vh;
  padding: 20px;
  background: #f5f5f5;
  box-sizing: border-box;
}

// 确保el-row和el-col能够伸展高度
.app-container :deep(.el-row) {
  &:first-child {
    display: flex;
    flex-wrap: wrap;

    .el-col {
      display: flex;
      flex-direction: column;
    }
  }
}

/* 右侧统计卡片容器 */
.stat-cards-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 20px;

  .stat-row-top,
  .stat-row-bottom {
    flex: 1;
    display: flex;

    .el-col {
      display: flex;
      flex-direction: column;
    }
  }
}

/* 商户付费卡片 - 与右侧2x2区域等高 */
.merchant-payment-card {
  background: white;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  height: 100%;

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
    height: 60px; // 固定header高度

    .title {
      font-size: 14px;
      font-weight: 500;
      color: #333;
    }

    .tabs {
      display: flex;
      gap: 8px;
    }
  }

  .chart-wrapper {
    flex: 1;
    padding: 20px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
}

.echart {
  width: 100%;
  height: 100%;
}

.stat-card {
  padding: 16px;
  background: white;
  border-radius: 4px;
  height: 100%;
  display: flex;
  flex-direction: column;

  .card-title {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
  }

  .stat-row {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex: 1;

    .stat-item {
      text-align: center;
      flex: 1;

      .label {
        font-size: 12px;
        color: #999;
        margin-bottom: 8px;
      }

      .value {
        font-size: 20px;
        font-weight: bold;
        color: #333;
      }
    }
  }
}

/* 表格卡片容器 */
.table-card {
  background: white;
  border-radius: 4px;
  padding: 16px;

  .table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f0f0f0;

    h3 {
      margin: 0;
      font-size: 16px;
      font-weight: 500;
      color: #333;
      display: flex;
      align-items: center;
    }

    .tabs {
      display: flex;
      gap: 10px;
    }
  }

  .pagination {
    margin-top: 16px;
    text-align: right;
  }
}
</style>
