<template>
    <div class="app-container">
      <!-- 顶部统计卡片 -->
      <el-row :gutter="20" class="mb8">
        <el-col :span="8">
          <el-card shadow="hover" class="statistics-card">
            <div class="title">今日订单总额</div>
            <div class="amount">¥{{ todayStats.totalOrderAmount || 0 }}</div>
            <div class="sub-info">
              <span>洗衣: ¥{{ todayStats.clothOrderAmount || 0 }}</span>
              <span>商品: ¥{{ todayStats.goodsOrderAmount || 0 }}</span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="hover" class="statistics-card">
            <div class="title">今日充值总额</div>
            <div class="amount">¥{{ todayStats.totalChargeAmount || 0 }}</div>
            <div class="sub-info">
              <span>实付: ¥{{ todayStats.rechargePayAmount || 0 }}</span>
              <span>赠送: ¥{{ todayStats.arriveGiveAmount || 0 }}</span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="hover" class="statistics-card">
            <div class="title">今日退款总额</div>
            <div class="amount">¥{{ todayStats.totalRefundAmount || 0 }}</div>
            <div class="sub-info">
              <span>订单退款: ¥{{ todayStats.orderRefundAmount || 0 }}</span>
              <span>充值退款: ¥{{ todayStats.rechargeRefundAmount || 0 }}</span>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 查询条件 -->
      <el-form :model="queryParams" ref="queryForm" @submit.native.prevent :inline="true" class="mb8">
        <el-form-item label="统计日期">
          <el-date-picker
            v-model="queryParams.date"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
            @change="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 数据展示 -->
      <el-row :gutter="20">
        <!-- 洗衣订单统计 -->
        <el-col :span="24">
          <el-card class="box-card mb8">
            <div slot="header" class="clearfix">
              <span class="card-title">洗衣订单统计</span>
            </div>
            <el-descriptions :column="4" border>
              <el-descriptions-item label="订单笔数">{{ orderStats.clothOrderCount || 0 }}</el-descriptions-item>
              <el-descriptions-item label="订单金额">¥{{ orderStats.clothOrderAmount || 0 }}</el-descriptions-item>
              <el-descriptions-item label="实收金额">¥{{ orderStats.clothReceiveAmount || 0 }}</el-descriptions-item>
              <el-descriptions-item label="会员金额">¥{{ orderStats.clothMemberAmount || 0 }}</el-descriptions-item>
              <el-descriptions-item label="微信支付">¥{{ orderStats.clothWechatAmount || 0 }}</el-descriptions-item>
              <el-descriptions-item label="支付宝支付">¥{{ orderStats.clothAlipayAmount || 0 }}</el-descriptions-item>
              <el-descriptions-item label="现金支付">¥{{ orderStats.clothCashAmount || 0 }}</el-descriptions-item>
              <el-descriptions-item label="退款总金额">¥{{ orderStats.clothRefundAmount || 0 }}</el-descriptions-item>
              <el-descriptions-item label="微信退款">¥{{ orderStats.clothWechatRefundAmount || 0 }}</el-descriptions-item>
              <el-descriptions-item label="支付宝退款">¥{{ orderStats.clothAlipayRefundAmount || 0 }}</el-descriptions-item>
              <el-descriptions-item label="现金退款">¥{{ orderStats.clothCashRefundAmount || 0 }}</el-descriptions-item>
              <el-descriptions-item label="会员退款">¥{{ orderStats.clothMemberRefundAmount || 0 }}</el-descriptions-item>
            </el-descriptions>
          </el-card>
        </el-col>

        <!-- 商品订单统计 -->
        <el-col :span="24">
          <el-card class="box-card mb8">
            <div slot="header" class="clearfix">
              <span class="card-title">商品订单统计</span>
            </div>
            <el-descriptions :column="4" border>
              <el-descriptions-item label="订单笔数">{{ orderStats.goodsOrderCount || 0 }}</el-descriptions-item>
              <el-descriptions-item label="订单金额">¥{{ orderStats.goodsOrderAmount || 0 }}</el-descriptions-item>
              <el-descriptions-item label="实收金额">¥{{ orderStats.goodsReceiveAmount || 0 }}</el-descriptions-item>
              <el-descriptions-item label="会员金额">¥{{ orderStats.goodsMemberAmount || 0 }}</el-descriptions-item>
              <el-descriptions-item label="微信支付">¥{{ orderStats.goodsWechatAmount || 0 }}</el-descriptions-item>
              <el-descriptions-item label="支付宝支付">¥{{ orderStats.goodsAlipayAmount || 0 }}</el-descriptions-item>
              <el-descriptions-item label="现金支付">¥{{ orderStats.goodsCashAmount || 0 }}</el-descriptions-item>
              <el-descriptions-item label="退款总金额">¥{{ orderStats.goodsRefundAmount || 0 }}</el-descriptions-item>
              <el-descriptions-item label="微信退款">¥{{ orderStats.goodsWechatRefundAmount || 0 }}</el-descriptions-item>
              <el-descriptions-item label="支付宝退款">¥{{ orderStats.goodsAlipayRefundAmount || 0 }}</el-descriptions-item>
              <el-descriptions-item label="现金退款">¥{{ orderStats.goodsCashRefundAmount || 0 }}</el-descriptions-item>
              <el-descriptions-item label="会员退款">¥{{ orderStats.goodsMemberRefundAmount || 0 }}</el-descriptions-item>
            </el-descriptions>
          </el-card>
        </el-col>

        <!-- 充值统计 -->
        <el-col :span="24">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span class="card-title">充值统计</span>
            </div>
            <el-descriptions :column="4" border>
              <el-descriptions-item label="充值笔数">{{ chargeStats.rechargeCount || 0 }}</el-descriptions-item>
              <el-descriptions-item label="现金实付">¥{{ chargeStats.rechargePayAmount || 0 }}</el-descriptions-item>
              <el-descriptions-item label="现金到账">¥{{ chargeStats.arriveCashAmount || 0 }}</el-descriptions-item>
              <el-descriptions-item label="赠送到账">¥{{ chargeStats.arriveGiveAmount || 0 }}</el-descriptions-item>
              <el-descriptions-item label="福利金到账">¥{{ chargeStats.arriveWelfareAmount || 0 }}</el-descriptions-item>
              <el-descriptions-item label="微信支付">¥{{ chargeStats.wechatPayAmount || 0 }}</el-descriptions-item>
              <el-descriptions-item label="支付宝支付">¥{{ chargeStats.alipayAmount || 0 }}</el-descriptions-item>
              <el-descriptions-item label="现金支付">¥{{ chargeStats.cashPayAmount || 0 }}</el-descriptions-item>
              <el-descriptions-item label="卡密支付">¥{{ chargeStats.cardPayAmount || 0 }}</el-descriptions-item>
              <el-descriptions-item label="退款总金额">¥{{ chargeStats.refundAmount || 0 }}</el-descriptions-item>
              <el-descriptions-item label="微信退款">¥{{ chargeStats.wechatRefundAmount || 0 }}</el-descriptions-item>
              <el-descriptions-item label="支付宝退款">¥{{ chargeStats.alipayRefundAmount || 0 }}</el-descriptions-item>
              <el-descriptions-item label="现金退款">¥{{ chargeStats.cashRefundAmount || 0 }}</el-descriptions-item>
              <el-descriptions-item label="赠送余额退回">¥{{ chargeStats.arriveGiveRefundAmount || 0 }}</el-descriptions-item>
              <el-descriptions-item label="福利余额退回">¥{{ chargeStats.arriveWelfareRefundAmount || 0 }}</el-descriptions-item>
              <el-descriptions-item label="现金余额退回">¥{{ chargeStats.arriveCashRefundAmount || 0 }}</el-descriptions-item>
            </el-descriptions>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </template>

  <script>
  import { getDailyStatistics } from '@/api/settlement/bill'

  export default {
    name: 'StoreDailyReport',
    dicts: ['pay_type'],
    data() {
      return {
        // 遮罩层
        loading: false,
        // 查询参数
        queryParams: {
          date: new Date().toISOString().split('T')[0]
        },
        // 今日统计数据
        todayStats: {
          totalOrderAmount: 0,
          clothOrderAmount: 0,
          goodsOrderAmount: 0,
          totalChargeAmount: 0,
          rechargePayAmount: 0,
          arriveGiveAmount: 0,
          totalRefundAmount: 0,
          orderRefundAmount: 0,
          rechargeRefundAmount: 0
        },
        // 订单统计数据
        orderStats: {
          clothOrderCount: 0,
          clothOrderAmount: 0,
          clothReceiveAmount: 0,
          clothMemberAmount: 0,
          clothRefundAmount: 0,
          clothWechatRefundAmount: 0,
          clothAlipayRefundAmount: 0,
          clothCashRefundAmount: 0,
          clothWechatAmount: 0,
          clothAlipayAmount: 0,
          clothCashAmount: 0,
          clothMemberRefundAmount: 0,
          goodsOrderCount: 0,
          goodsOrderAmount: 0,
          goodsReceiveAmount: 0,
          goodsMemberAmount: 0,
          goodsRefundAmount: 0,
          goodsWechatRefundAmount: 0,
          goodsAlipayRefundAmount: 0,
          goodsCashRefundAmount: 0,
          goodsWechatAmount: 0,
          goodsAlipayAmount: 0,
          goodsCashAmount: 0,
          goodsMemberRefundAmount: 0
        },
        // 充值统计数据
        chargeStats: {
          rechargeCount: 0,
          rechargePayAmount: 0,
          wechatPayAmount: 0,
          alipayAmount: 0,
          cashPayAmount: 0,
          cardPayAmount: 0,
          arriveGiveAmount: 0,
          arriveWelfareAmount: 0,
          refundAmount: 0,
          wechatRefundAmount: 0,
          alipayRefundAmount: 0,
          cashRefundAmount: 0,
          cardRefundAmount: 0,
          arriveCashAmount: 0,
          arriveGiveRefundAmount: 0,
          arriveWelfareRefundAmount: 0,
          arriveCashRefundAmount: 0
        }
      }
    },
    created() {
      this.getList()
    },
    methods: {
      /** 查询列表 */
      getList() {
        this.loading = true
        getDailyStatistics(this.queryParams).then(response => {
          const { orderStats = {}, chargeStats = {} } = response.data || {}

          // 处理订单统计数据
          this.orderStats = {
            clothOrderCount: orderStats.clothOrderCount || 0,
            clothOrderAmount: orderStats.clothOrderAmount || 0,
            clothReceiveAmount: orderStats.clothReceiveAmount || 0,
            clothMemberAmount: orderStats.clothMemberAmount || 0,
            clothRefundAmount: orderStats.clothRefundAmount || 0,
            clothWechatRefundAmount: orderStats.clothWechatRefundAmount || 0,
            clothAlipayRefundAmount: orderStats.clothAlipayRefundAmount || 0,
            clothCashRefundAmount: orderStats.clothCashRefundAmount || 0,
            clothWechatAmount: orderStats.clothWechatAmount || 0,
            clothAlipayAmount: orderStats.clothAlipayAmount || 0,
            clothCashAmount: orderStats.clothCashAmount || 0,
            clothMemberRefundAmount: orderStats.clothMemberRefundAmount || 0,
            goodsOrderCount: orderStats.goodsOrderCount || 0,
            goodsOrderAmount: orderStats.goodsOrderAmount || 0,
            goodsReceiveAmount: orderStats.goodsReceiveAmount || 0,
            goodsMemberAmount: orderStats.goodsMemberAmount || 0,
            goodsRefundAmount: orderStats.goodsRefundAmount || 0,
            goodsWechatRefundAmount: orderStats.goodsWechatRefundAmount || 0,
            goodsAlipayRefundAmount: orderStats.goodsAlipayRefundAmount || 0,
            goodsCashRefundAmount: orderStats.goodsCashRefundAmount || 0,
            goodsWechatAmount: orderStats.goodsWechatAmount || 0,
            goodsAlipayAmount: orderStats.goodsAlipayAmount || 0,
            goodsCashAmount: orderStats.goodsCashAmount || 0,
            goodsMemberRefundAmount: orderStats.goodsMemberRefundAmount || 0
          }

          // 处理充值统计数据
          this.chargeStats = {
            rechargeCount: chargeStats.rechargeCount || 0,
            rechargePayAmount: chargeStats.rechargePayAmount || 0,
            wechatPayAmount: chargeStats.wechatPayAmount || 0,
            alipayAmount: chargeStats.alipayAmount || 0,
            cashPayAmount: chargeStats.cashPayAmount || 0,
            cardPayAmount: chargeStats.cardPayAmount || 0,
            arriveGiveAmount: chargeStats.arriveGiveAmount || 0,
            arriveWelfareAmount: chargeStats.arriveWelfareAmount || 0,
            refundAmount: chargeStats.refundAmount || 0,
            wechatRefundAmount: chargeStats.wechatRefundAmount || 0,
            alipayRefundAmount: chargeStats.alipayRefundAmount || 0,
            cashRefundAmount: chargeStats.cashRefundAmount || 0,
            cardRefundAmount: chargeStats.cardRefundAmount || 0,
            arriveCashAmount: chargeStats.arriveCashAmount || 0,
            arriveGiveRefundAmount: chargeStats.arriveGiveRefundAmount || 0,
            arriveWelfareRefundAmount: chargeStats.arriveWelfareRefundAmount || 0,
            arriveCashRefundAmount: chargeStats.arriveCashRefundAmount || 0
          }

          // 处理今日统计数据
          this.todayStats = {
            totalOrderAmount: (this.orderStats.clothOrderAmount || 0) + (this.orderStats.goodsOrderAmount || 0),
            clothOrderAmount: this.orderStats.clothOrderAmount || 0,
            goodsOrderAmount: this.orderStats.goodsOrderAmount || 0,
            totalChargeAmount: this.chargeStats.rechargePayAmount || 0,
            rechargePayAmount: this.chargeStats.rechargePayAmount || 0,
            arriveGiveAmount: this.chargeStats.arriveGiveAmount || 0,
            totalRefundAmount: (this.orderStats.clothRefundAmount || 0) + (this.orderStats.goodsRefundAmount || 0) + (this.chargeStats.refundAmount || 0),
            orderRefundAmount: (this.orderStats.clothRefundAmount || 0) + (this.orderStats.goodsRefundAmount || 0),
            rechargeRefundAmount: this.chargeStats.refundAmount || 0
          }

          this.loading = false
        }).catch(() => {
          this.loading = false
        })
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.getList()
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm('queryForm')
        this.handleQuery()
      }
    }
  }
  </script>

  <style scoped>
  .statistics-card {
    text-align: center;
    padding: 24px;
    height: 100%;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border-radius: 8px;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
  }

  .statistics-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  .statistics-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #409EFF, #67C23A);
  }

  .statistics-card .title {
    font-size: 15px;
    color: #606266;
    margin-bottom: 12px;
    font-weight: 500;
  }

  .statistics-card .amount {
    font-size: 28px;
    font-weight: 600;
    color: #303133;
    margin-bottom: 12px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  }

  .statistics-card .sub-info {
    font-size: 13px;
    color: #909399;
    display: flex;
    justify-content: center;
    gap: 16px;
  }

  .statistics-card .sub-info span {
    position: relative;
    padding: 0 8px;
  }

  .statistics-card .sub-info span:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 12px;
    background-color: #DCDFE6;
  }

  .card-title {
    font-size: 16px;
    font-weight: 600;
    color: #303133;
    position: relative;
    padding-left: 12px;
  }

  .card-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 16px;
    background: #409EFF;
    border-radius: 2px;
  }

  .mb8 {
    margin-bottom: 8px;
  }

  /* 添加响应式布局 */
  @media screen and (max-width: 768px) {
    .statistics-card {
      padding: 16px;
    }

    .statistics-card .amount {
      font-size: 24px;
    }

    .statistics-card .sub-info {
      flex-direction: column;
      gap: 8px;
    }

    .statistics-card .sub-info span:not(:last-child)::after {
      display: none;
    }
  }
  </style>
