<template>
  <div class="app-container home">
    <!-- 累积统计卡片行 -->
    <el-row :gutter="20" class="panel-group">
      <el-col :xs="12" :sm="12" :lg="4">
        <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="statistics.clothCount" :duration="2600" />
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="4">
        <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="statistics.clothReceiveAmount" :duration="2600" prefix="￥" decimals="2"/>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="4">
        <div class="stat-card stat-card-purple">
          <div class="stat-card-title">商品订单数</div>
          <div class="stat-card-value">
            <count-to :start-val="0" :end-val="statistics.goodsOrderCount" :duration="2600" />
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="4">
        <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="statistics.goodsReceiveAmount" :duration="2600" prefix="￥" decimals="2"/>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="4">
        <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="statistics.chargeCount" :duration="2600" />
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="4">
        <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="statistics.chargeAmount" :duration="2600" prefix="￥" decimals="2"/>
          </div>
        </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="revenueTimeRange" size="small" @change="handleRevenueTimeRangeChange">
                <el-radio-button label="today">今日</el-radio-button>
                <el-radio-button label="week">近一周</el-radio-button>
                <el-radio-button label="halfMonth">近半个月</el-radio-button>
                <el-radio-button label="month">近一个月</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="4">
                <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="dayStatistics.clothCount" :duration="2600" class="card-panel-num" />
                  </div>
                </div>
              </el-col>
              <el-col :xs="12" :sm="12" :lg="4">
                <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="dayStatistics.clothReceiveAmount" :duration="2600" class="card-panel-num" prefix="￥" decimals="2"/>
                  </div>
                </div>
              </el-col>
              <el-col :xs="12" :sm="12" :lg="4">
                <div class="card-panel">
                  <div class="card-panel-icon-wrapper icon-goods">
                    <svg-icon icon-class="shopping" class-name="card-panel-icon" />
                  </div>
                  <div class="card-panel-description">
                    <div class="card-panel-text">商品订单数</div>
                    <count-to :start-val="0" :end-val="dayStatistics.goodsOrderCount" :duration="2600" class="card-panel-num" />
                  </div>
                </div>
              </el-col>
              <el-col :xs="12" :sm="12" :lg="4">
                <div class="card-panel">
                  <div class="card-panel-icon-wrapper icon-goods-amount">
                    <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="dayStatistics.goodsReceiveAmount" :duration="2600" class="card-panel-num" prefix="￥" decimals="2"/>
                  </div>
                </div>
              </el-col>
              <el-col :xs="12" :sm="12" :lg="4">
                <div class="card-panel">
                  <div class="card-panel-icon-wrapper icon-charge">
                    <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="dayStatistics.chargeCount" :duration="2600" class="card-panel-num" />
                  </div>
                </div>
              </el-col>
              <el-col :xs="12" :sm="12" :lg="4">
                <div class="card-panel">
                  <div class="card-panel-icon-wrapper icon-charge-amount">
                    <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="dayStatistics.chargeAmount" :duration="2600" class="card-panel-num" prefix="￥" decimals="2"/>
                  </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="8">
        <div class="chart-wrapper">
          <div class="chart-title">洗衣交易趋势</div>
          <div class="chart-content">
            <amount-trend-chart :data="clothTrendData" />
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <div class="chart-title">商品交易趋势</div>
          <div class="chart-content">
            <amount-trend-chart :data="goodsTrendData" />
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <div class="chart-title">充值交易趋势</div>
          <div class="chart-content">
            <amount-trend-chart :data="chargeTrendData" />
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 门店排行 -->
    <el-row :gutter="32" style="margin-top: 32px">
      <el-col :xs="24" :sm="24" :lg="24">
        <div class="chart-wrapper">
          <div class="chart-header">
            <div class="chart-title">门店营收排行</div>
            <div class="chart-actions">
              <el-radio-group v-model="rankingTimeRange" size="small" @change="handleRankingTimeRangeChange">
                <el-radio-button label="week">近一周</el-radio-button>
                <el-radio-button label="halfMonth">近半个月</el-radio-button>
                <el-radio-button label="month">近一个月</el-radio-button>
              </el-radio-group>
            </div>
          </div>
          <div class="chart-content">
            <el-table :data="storeRankings" style="width: 100%" :show-header="true">
              <el-table-column prop="index" type="index" label="排名" width="80" />
              <el-table-column label="门店名称" align="center" prop="storeName" />
              <el-table-column label="洗衣件数" align="center" prop="clothCount" />
              <el-table-column label="洗衣金额" align="center" prop="clothReceiveAmount">
                <template slot-scope="scope">
                  ¥{{ scope.row.clothReceiveAmount }}
                </template>
              </el-table-column>
              <el-table-column label="零售单数" align="center" prop="goodsOrderCount" />
              <el-table-column label="零售金额" align="center" prop="goodsReceiveAmount">
                <template slot-scope="scope">
                  ¥{{ scope.row.goodsReceiveAmount }}
                </template>
              </el-table-column>
              <el-table-column label="充值笔数" align="center" prop="chargeCount" />
              <el-table-column label="充值金额" align="center" prop="chargeAmount">
                <template slot-scope="scope">
                  ¥{{ scope.row.chargeAmount }}
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import CountTo from 'vue-count-to'
import {
  platformDashborad, getplatformDayTrend, listplatformStatisticsByDate, listplatformStatisticsByStore
} from '@/api/settlement/statistics'
import AmountTrendChart from './components/AmountTrendChart'

export default {
  name: 'Index',
  components: {
    CountTo,
    AmountTrendChart
  },
  data() {
    return {
      version: "3.8.4",
      statistics: {
        clothCount: 0,
        clothReceiveAmount: 0,
        goodsReceiveAmount: 0,
        goodsOrderCount: 0,
        chargeCount: 0,
        chargeAmount: 0
      },
      dayStatistics: {
        clothCount: 0,
        clothReceiveAmount: 0,
        goodsReceiveAmount: 0,
        goodsOrderCount: 0,
        chargeCount: 0,
        chargeAmount: 0
      },
      revenueTimeRange: 'today',
      rankingTimeRange: 'week',
      clothTrendData: [],
      goodsTrendData: [],
      chargeTrendData: [],
      storeRankings: []
    }
  },
  created() {
    this.getStatistics()
    this.getFactoryStatisticsData()
    this.getStoreRankings()
    this.getTrendData()
  },
  methods: {
    getStatistics() {
      // 获取累积统计数据
      platformDashborad({}).then(response => {
        this.statistics = response.data.orderStats
      })
    },
    handleRevenueTimeRangeChange() {
      this.getFactoryStatisticsData()
    },
    handleRankingTimeRangeChange() {
      this.getStoreRankings()
    },
    getFactoryStatisticsData() {
      // 根据选择的时间范围获取工厂统计数据
      const params = {
        startDate: this.getStartDateByTimeRange(),
        endDate: this.formatDate(new Date())
      }
      getplatformDayTrend(params).then(response => {
        if(response.data.orderTrend) {
          this.dayStatistics = response.data.orderTrend
        }
      })
    },
    getStartDateByTimeRange() {
      const today = new Date()
      let startDate = new Date()

      switch (this.revenueTimeRange) {
        case 'today':
          startDate = today
          break
        case 'week':
          startDate.setDate(today.getDate() - 7)
          break
        case 'halfMonth':
          startDate.setDate(today.getDate() - 15)
          break
        case 'month':
          startDate.setDate(today.getDate() - 30)
          break
      }
      return this.formatDate(startDate)
    },
    getStartDateByTimeRange1() {
      const today = new Date()
      let startDate = new Date()

      switch (this.rankingTimeRange) {
        case 'week':
          startDate.setDate(today.getDate() - 7)
          break
        case 'halfMonth':
          startDate.setDate(today.getDate() - 15)
          break
        case 'month':
          startDate.setDate(today.getDate() - 30)
          break
      }
      return this.formatDate(startDate)
    },
    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}`
    },
    getStoreRankings() {
      // 获取最近一周的日期范围
      const endDate = new Date()
      const startDate = new Date()
      const params = {
        startDate: this.getStartDateByTimeRange1(),
        endDate: this.formatDate(endDate),
        pageSize: 10
      }

      // 使用 listFactoryStatisticsByStore 方法获取门店排行数据
      listplatformStatisticsByStore(params).then(response => {
        this.storeRankings = response.rows || []
      })
    },
    getTrendData() {
      // 获取最近一周的日期范围
      const endDate = new Date()
      const startDate = new Date()
      startDate.setDate(endDate.getDate() - 7)

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

      // 获取趋势数据
      listplatformStatisticsByDate(params).then(response => {
        const data = response.data || []

        // 处理洗衣交易趋势数据
        this.clothTrendData = data.map(item => ({
          date: item.day,
          value: item.clothOrderAmount || 0
        }))

        // 处理零售交易趋势数据
        this.goodsTrendData = data.map(item => ({
          date: item.day,
          value: item.goodsReceiveAmount || 0
        }))

        // 处理充值交易趋势数据
        this.chargeTrendData = data.map(item => ({
          date: item.day,
          value: item.chargeAmount || 0
        }))
      })
    }
  }
}
</script>

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

    .stat-card {
      height: 120px;
      border-radius: 8px;
      padding: 20px;
      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: 28px;
        font-weight: bold;
      }
    }

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

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

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

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

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

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

    .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);
      display: flex;
      align-items: center;
      justify-content: space-between;
      &:hover {
        .card-panel-icon-wrapper {
          color: #fff;
        }
        .icon-orders {
          background: #1890ff;
        }
        .icon-revenue {
          background: #52c41a;
        }
        .icon-goods {
          background: #722ed1;
        }
        .icon-goods-amount {
          background: #fa8c16;
        }
        .icon-charge {
          background: #f5222d;
        }
        .icon-charge-amount {
          background: #13c2c2;
        }
      }
      .card-panel-icon-wrapper {
        float: left;
        margin: 0 0 0 14px;
        padding: 16px;
        transition: all 0.38s ease-out;
        border-radius: 6px;
      }
      .card-panel-icon {
        // float: left;
        font-size: 38px;
      }
      .card-panel-description {
        // float: right;
        font-weight: bold;
        margin: 0 26px 0 0;
        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>

