<template>
  <div class="app-container home">
    <!-- 累积统计卡片行 -->
    <el-row :gutter="20" class="panel-group">
      <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="statistics.dailyInFactoryCount" :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="statistics.dailyInFactoryAmount" :duration="2600" prefix="￥" />
          </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="statistics.dailyRefundCount" :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="statistics.dailyRefundAmount" :duration="2600" prefix="￥" />
          </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="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="factoryStatistics.dailyInFactoryCount" :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="factoryStatistics.dailyInFactoryAmount" :duration="2600" class="card-panel-num" prefix="￥" />
                  </div>
                </div>
              </el-col>
              <el-col :xs="12" :sm="12" :lg="6">
                <div class="card-panel">
                  <div class="card-panel-icon-wrapper icon-cancel">
                    <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="factoryStatistics.dailyRefundCount" :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-cancel-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="factoryStatistics.dailyRefundAmount" :duration="2600" class="card-panel-num" prefix="￥" />
                  </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">
            <amount-trend-chart :data="amountTrendData" />
          </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">
            <count-trend-chart :data="countTrendData" />
          </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="dailyInFactoryAmount">
                <template slot-scope="scope">
                  ¥{{ scope.row.dailyInFactoryAmount }}
                </template>
              </el-table-column>
              <el-table-column label="退单金额" align="center" prop="dailyRefundAmount">
                <template slot-scope="scope">
                  ¥{{ scope.row.dailyRefundAmount }}
                </template>
              </el-table-column>
              <el-table-column label="入厂衣服数" align="center" prop="dailyInFactoryCount" />
              <el-table-column label="检查衣服数" align="center" prop="dailyCheckedCount" />
              <el-table-column label="出厂衣服数" align="center" prop="dailyOutFactoryCount" />
            </el-table>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import CountTo from 'vue-count-to'
import { getTotalStatistics, listStatisticsByDate, listFactoryStatisticsByStore, factoryDashborad } from '@/api/settlement/statistics'
import { getTimeoutClothing } from '@/api/statistics/reception'
import AmountTrendChart from './components/AmountTrendChart'
import CountTrendChart from './components/CountTrendChart'

export default {
  name: 'Index',
  dicts: ['sys_source_type'],
  components: {
    CountTo,
    AmountTrendChart,
    CountTrendChart
  },
  data() {
    return {
      version: "3.8.4",
      timeoutClothing: {},
      roleType: false,
      statistics: {
        totalClothCount: 0,
        totalClothAmount: 0,
        totalCancelCount: 0,
        totalCancelAmount: 0
      },
      factoryStatistics: {
        dailyInFactoryCount: 0,
        dailyInFactoryAmount: 0,
        dailyRefundCount: 0,
        dailyRefundAmount: 0,
        dailyActualSettlementAmount: 0
      },
      revenueTimeRange: 'today',
      rankingTimeRange: 'week',
      amountTrendData: [],
      countTrendData: [],
      storeRankings: []
    }
  },
  created() {
    // this.getroletype()
    // this.getTimeout()
    this.getStatistics()
    this.getFactoryStatisticsData()
    this.getStoreRankings()
    this.getTrendData()
  },
  methods: {
    getroletype() {
      let name = ''
      this.dict.type.sys_source_type.map(item => {
        if (item.value === this.$store.getters.user.userType) {
          name = item.label
        }
      })
    },
    goTarget(href) {
      window.open(href, "_blank");
    },
    getTimeout() {
      getTimeoutClothing(this.queryParams).then(response => {
        this.timeoutClothing = response.data;
      });
    },
    btn_goto(type) {
      this.$router.push({ path: '/query/overtimeOrders' })
    },
    getStatistics() {
      // 获取累积统计数据
      factoryDashborad({}).then(response => {
        this.statistics = response.data
      })
    },
    handleRevenueTimeRangeChange() {
      this.getFactoryStatisticsData()
    },
    handleRankingTimeRangeChange() {
      this.getStoreRankings()
    },
    getFactoryStatisticsData() {
      // 根据选择的时间范围获取工厂统计数据
      const params = {
        startDate: this.getStartDateByTimeRange(),
        endDate: this.formatDate(new Date())
      }
      getTotalStatistics(params).then(response => {
        this.factoryStatistics = response.data
      })
    },
    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)
    },
    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()
      startDate.setDate(endDate.getDate() - 7)

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

      // 使用 listFactoryStatisticsByStore 方法获取门店排行数据
      listFactoryStatisticsByStore(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)
      }

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

        // 处理金额趋势数据
        this.amountTrendData = data.map(item => ({
          date: item.statisticsDate,
          value: item.dailyInFactoryAmount || 0
        }))

        // 处理件数趋势数据 - 确保格式正确
        this.countTrendData = {
          dates: data.map(item => item.statisticsDate || ''),
          inFactory: data.map(item => item.dailyInFactoryCount || 0),
          checked: data.map(item => item.dailyCheckedCount || 0),
          outFactory: data.map(item => item.dailyOutFactoryCount || 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-red {
      background: linear-gradient(135deg, #f5222d, #ff4d4f);
    }
    
    .stat-card-orange {
      background: linear-gradient(135deg, #fa8c16, #ffa940);
    }
    
    .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-cancel {
          background: #f4516c;
        }
        .icon-cancel-amount {
          background: #ff9800;
        }
      }
      .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>

