<template>
  <div class="app-container home">
    <!-- 统计卡片行 -->
    <el-row :gutter="20" class="panel-group">
      <!-- 订单统计卡片 -->
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="stat-section">
          <div class="section-title">订单统计</div>
          <el-row :gutter="20">
            <el-col :xs="12" :sm="12" :lg="6">
              <div class="stat-card stat-card-blue">
                <div class="stat-card-title">洗衣件数</div>
                <div class="stat-card-value">
                  <count-to :start-val="0" :end-val="orderStats.clothCount || 0" :duration="2600" />
                </div>
              </div>
            </el-col>
            <el-col :xs="12" :sm="12" :lg="6">
              <div class="stat-card stat-card-green">
                <div class="stat-card-title">洗衣订单金额</div>
                <div class="stat-card-value">
                  <count-to :start-val="0" :end-val="orderStats.clothOrderAmount || 0" :duration="2600" prefix="￥" :decimals="2"/>
                </div>
              </div>
            </el-col>
            <el-col :xs="12" :sm="12" :lg="6">
              <div class="stat-card stat-card-red">
                <div class="stat-card-title">商品订单数</div>
                <div class="stat-card-value">
                  <count-to :start-val="0" :end-val="orderStats.goodsOrderCount || 0" :duration="2600" />
                </div>
              </div>
            </el-col>
            <el-col :xs="12" :sm="12" :lg="6">
              <div class="stat-card stat-card-orange">
                <div class="stat-card-title">商品订单金额</div>
                <div class="stat-card-value">
                  <count-to :start-val="0" :end-val="orderStats.goodsOrderAmount || 0" :duration="2600" prefix="￥" :decimals="2"/>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>

      <!-- 充值统计卡片 -->
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="stat-section">
          <div class="section-title">充值统计</div>
          <el-row :gutter="20">
            <el-col :xs="12" :sm="12" :lg="6">
              <div class="stat-card stat-card-purple">
                <div class="stat-card-title">付款金额</div>
                <div class="stat-card-value">
                  <count-to ref="rechargePayAmount" :start-val="0" :end-val="chargeStats.rechargePayAmount || 0" :duration="2600" prefix="￥" :decimals="2"/>
                </div>
              </div>
            </el-col>
            <el-col :xs="12" :sm="12" :lg="6">
              <div class="stat-card stat-card-cyan">
                <div class="stat-card-title">充值笔数</div>
                <div class="stat-card-value">
                  <count-to :start-val="0" :end-val="chargeStats.rechargeCount || 0" :duration="2600" />
                </div>
              </div>
            </el-col>
            <el-col :xs="12" :sm="12" :lg="6">
              <div class="stat-card stat-card-teal">
                <div class="stat-card-title">退款金额</div>
                <div class="stat-card-value">
                  <count-to :start-val="0" :end-val="chargeStats.chargeRefundAmount || 0" :duration="2600" prefix="￥" :decimals="2"/>
                </div>
              </div>
            </el-col>
            <el-col :xs="12" :sm="12" :lg="6">
              <div class="stat-card stat-card-indigo">
                <div class="stat-card-title">退款笔数</div>
                <div class="stat-card-value">
                  <count-to :start-val="0" :end-val="chargeStats.refundCount || 0" :duration="2600"/>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>

    <!-- 今日概览 -->
    <el-row :gutter="20" class="panel-group" style="margin-top: 20px">
      <el-col :span="24">
        <div class="chart-wrapper">
          <div class="chart-header">
            <div class="chart-title">营收概览</div>
            <div class="chart-actions">
              <el-radio-group v-model="dailyTimeRange" size="small" @change="handleDailyTimeRangeChange">
                <el-radio-button label="today">今日</el-radio-button>
                <el-radio-button label="yesterday">昨日</el-radio-button>
              </el-radio-group>
            </div>
          </div>
          <div class="chart-content-1">
            <el-row :gutter="20" class="panel-group">
              <el-col :xs="12" :sm="12" :lg="6">
                <div class="card-panel">
                  <div class="card-panel-icon-wrapper icon-orders">
                    <svg-icon icon-class="form" class-name="card-panel-icon" />
                  </div>
                  <div class="card-panel-description">
                    <div class="card-panel-text">洗衣件数</div>
                    <count-to :start-val="0" :end-val="dailyOrderStats.clothOrderCount || 0" :duration="2600" class="card-panel-num" />
                  </div>
                </div>
              </el-col>
              <el-col :xs="12" :sm="12" :lg="6">
                <div class="card-panel">
                  <div class="card-panel-icon-wrapper icon-revenue">
                    <svg-icon icon-class="money" class-name="card-panel-icon" />
                  </div>
                  <div class="card-panel-description">
                    <div class="card-panel-text">洗衣订单金额</div>
                    <count-to :start-val="0" :end-val="dailyOrderStats.clothOrderAmount || 0" :duration="2600" class="card-panel-num" prefix="￥" :decimals="2"/>
                  </div>
                </div>
              </el-col>
              <el-col :xs="12" :sm="12" :lg="6">
                <div class="card-panel">
                  <div class="card-panel-icon-wrapper icon-charge">
                    <svg-icon icon-class="money" class-name="card-panel-icon" />
                  </div>
                  <div class="card-panel-description">
                    <div class="card-panel-text">充值金额</div>
                    <count-to :start-val="0" :end-val="dailyChargeStats.rechargePayAmount || 0" :duration="2600" class="card-panel-num" prefix="￥" :decimals="2"/>
                  </div>
                </div>
              </el-col>
              <el-col :xs="12" :sm="12" :lg="6">
                <div class="card-panel">
                  <div class="card-panel-icon-wrapper icon-charge-count">
                    <svg-icon icon-class="form" class-name="card-panel-icon" />
                  </div>
                  <div class="card-panel-description">
                    <div class="card-panel-text">充值笔数</div>
                    <count-to :start-val="0" :end-val="dailyChargeStats.rechargeCount || 0" :duration="2600" class="card-panel-num" />
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 经营趋势图表 -->
    <el-row :gutter="32" style="margin-top: 32px">
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <div class="chart-title">订单趋势</div>
          <div class="chart-content">
            <order-trend-chart :data="orderTrendData" />
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <div class="chart-title">充值趋势</div>
          <div class="chart-content">
            <charge-trend-chart :data="chargeTrendData" />
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import CountTo from 'vue-count-to'
import { getStoreDashboard, getStoreDailyStatistics, getStoreDailyTrend, listStoreStatistics, listStoreChargeStatistics } from '@/api/settlement/storeStatistics'
import OrderTrendChart from './components/OrderTrendChart'
import ChargeTrendChart from './components/ChargeTrendChart'

export default {
  name: 'Index',
  components: {
    CountTo,
    OrderTrendChart,
    ChargeTrendChart
  },
  data() {
    return {
      // 订单统计数据
      orderStats: {
        dailyInFactoryCount: 0,
        dailyInFactoryAmount: 0,
        dailyRefundCount: 0,
        dailyRefundAmount: 0
      },
      // 充值统计数据
      chargeStats: {
        dailyChargeAmount: 0,
        dailyChargeCount: 0,
        dailyMemberChargeAmount: 0
      },
      // 今日概览数据
      dailyOrderStats: {
        dailyInFactoryCount: 0,
        dailyInFactoryAmount: 0
      },
      dailyChargeStats: {
        dailyChargeAmount: 0,
        dailyChargeCount: 0
      },
      // 时间范围选择
      dailyTimeRange: 'today',
      // 趋势数据
      orderTrendData: [],
      chargeTrendData: []
    }
  },
  created() {
    this.getDashboardData()
    this.getDailyStatistics()
    this.getTrendData()
  },
  methods: {
    /**
     * 获取仪表盘数据
     */
    getDashboardData() {
      getStoreDashboard().then(response => {
        if (response.code === 200) {
          this.orderStats = response.data.orderStats || {}
          this.chargeStats = response.data.chargeStats || {}
        }
      })
    },

    /**
     * 处理今日概览时间范围变化
     */
    handleDailyTimeRangeChange() {
      this.getDailyStatistics()
    },

    /**
     * 获取今日概览数据
     */
    getDailyStatistics() {
      const date = this.dailyTimeRange === 'today'
        ? this.formatDate(new Date())
        : this.formatDate(this.getYesterday())

      getStoreDailyStatistics(date).then(response => {
        if (response.code === 200) {
          this.dailyOrderStats = response.data.orderStats || {}
          this.dailyChargeStats = response.data.chargeStats || {}
        }
      })
    },

    /**
     * 获取趋势数据
     */
    getTrendData() {
      // 获取最近15天的日期范围
      const endDate = new Date()
      const startDate = new Date()
      startDate.setDate(endDate.getDate() - 14)

      const params = {
        startDate: this.formatDate(startDate),
        endDate: this.formatDate(endDate)
      }

      // 获取订单趋势数据
      listStoreStatistics(params).then(response => {
        if (response.code === 200) {
          this.orderTrendData = response.rows || []
        }
      })

      // 获取充值趋势数据
      listStoreChargeStatistics(params).then(response => {
        if (response.code === 200) {
          this.chargeTrendData = response.rows || []
        }
      })
    },

    /**
     * 获取昨天的日期
     */
    getYesterday() {
      const yesterday = new Date()
      yesterday.setDate(yesterday.getDate() - 1)
      return yesterday
    },

    /**
     * 格式化日期为 yyyy-MM-dd
     */
    formatDate(date) {
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      return `${year}-${month}-${day}`
    }
  }
}
</script>

<style lang="scss" scoped>
.home {
  .panel-group {
    margin-top: 18px;

    .stat-section {
      background: #fff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);

      .section-title {
        font-size: 16px;
        font-weight: bold;
        color: #303133;
        margin-bottom: 20px;
      }
    }

    .stat-card {
      height: 120px;
      border-radius: 8px;
      padding: 20px 10px;
      color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      transition: all 0.3s;

      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
      }

      .stat-card-title {
        font-size: 16px;
        margin-bottom: 10px;
        opacity: 0.9;
      }

      .stat-card-value {
        font-size: 20px;
        font-weight: bold;
      }
    }

    .stat-card-blue {
      background: linear-gradient(135deg, #1890ff, #36cfc9);
    }

    .stat-card-green {
      background: linear-gradient(135deg, #52c41a, #73d13d);
    }

    .stat-card-red {
      background: linear-gradient(135deg, #f5222d, #ff4d4f);
    }

    .stat-card-orange {
      background: linear-gradient(135deg, #fa8c16, #ffa940);
    }

    .stat-card-purple {
      background: linear-gradient(135deg, #722ed1, #b37feb);
    }

    .stat-card-cyan {
      background: linear-gradient(135deg, #13c2c2, #5cdbd3);
    }

    .stat-card-teal {
      background: linear-gradient(135deg, #006d75, #08979c);
    }

    .stat-card-indigo {
      background: linear-gradient(135deg, #2f54eb, #597ef7);
    }

    .card-panel {
      height: 108px;
      cursor: pointer;
      font-size: 12px;
      position: relative;
      overflow: hidden;
      color: #666;
      background: #fff;
      box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
      border-color: rgba(0, 0, 0, .05);
      &:hover {
        .card-panel-icon-wrapper {
          color: #fff;
        }
        .icon-orders {
          background: #40c9c6;
        }
        .icon-revenue {
          background: #34bfa3;
        }
        .icon-charge {
          background: #722ed1;
        }
        .icon-charge-count {
          background: #13c2c2;
        }
      }
      .card-panel-icon-wrapper {
        float: left;
        margin: 14px 0 0 14px;
        padding: 16px;
        transition: all 0.38s ease-out;
        border-radius: 6px;
      }
      .card-panel-icon {
        float: left;
        font-size: 48px;
      }
      .card-panel-description {
        float: right;
        font-weight: bold;
        margin: 26px;
        margin-left: 0px;
        .card-panel-text {
          line-height: 18px;
          color: rgba(0, 0, 0, 0.45);
          font-size: 16px;
          margin-bottom: 12px;
        }
        .card-panel-num {
          font-size: 20px;
        }
      }
    }
  }

  .chart-wrapper {
    background: #fff;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);

    .chart-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;

      .chart-title {
        font-size: 16px;
        font-weight: bold;
        color: #303133;
      }
    }

    .chart-content {
      height: 300px;
    }

    .chart-content-1 {
      height: 130px;
    }
  }
}
</style>

