<template>

  <div class="leakage-card">

    <OrderLoadingPanel
      v-if="loading"
      compact
      title="正在加载价值漏损数据"
      detail="正在读取退款金额与成功交易额"
    />

    <div class="card-header">

      <h4 class="card-title">订单价值漏损分析 (退款)</h4>

      <span class="icon-wrapper">💧</span>

    </div>

    <div class="value-area">

      <p class="main-value">{{ leakageData.leakageRatePercent }}%</p>

      <p class="sub-text">价值漏损率</p>

    </div>

    <div class="details-area">

      <div class="detail-item">

        <p class="detail-label">总退款金额</p>

        <p class="detail-value refund">{{ leakageData.totalRefundAmount }}</p>

      </div>

      <div class="detail-item">

        <p class="detail-label">总成功交易额</p>

        <p class="detail-value success">{{ leakageData.totalSuccessAmount }}</p>

      </div>

    </div>

  </div>

</template>



<script>
import { getOrderLeakageRate } from '@/api/order';
import OrderLoadingPanel from '../../components/OrderLoadingPanel.vue';



export default {

  name: 'LeakageCard',
  components: {
    OrderLoadingPanel
  },

  props: {

    dateRange: {

      type: Object,

      default: () => ({ start: '', end: '' })

    }

  },

  data() {

    return {

      leakageData: {

        totalRefundAmount: '¥0.00',

        leakageRatePercent: 0,

        totalSuccessAmount: '¥0.00'

      },

      loading: true,

      currencyFormatter: new Intl.NumberFormat('zh-CN', { style: 'currency', currency: 'CNY' })

    };

  },

  watch: {

    dateRange: {

      handler(newRange) {

        this.fetchLeakageData(newRange);

      },

      deep: true

    }

  },

  mounted() {

    this.fetchLeakageData();

  },

  methods: {

    async fetchLeakageData(dateRange = null) {

      this.loading = true;

      try {
        const params = dateRange && dateRange.start && dateRange.end
          ? { startDate: dateRange.start, endDate: dateRange.end }
          : undefined;

        const response = await getOrderLeakageRate(params);

        if (response) {

          this.leakageData.totalRefundAmount = this.currencyFormatter.format(response.totalRefundAmount || 0);

          this.leakageData.leakageRatePercent = (response.leakageRatePercent || 0).toFixed(1);

          this.leakageData.totalSuccessAmount = this.currencyFormatter.format(response.totalSuccessAmount || 0);

        }

      } catch (error) {

        console.error('获取漏损数据失败:', error);

      } finally {

        this.loading = false;

      }

    }

  }

};

</script>





<style scoped>

.leakage-card {

  background-color: white;

  padding: 20px;

  border-radius: 8px;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);

  border-left: 4px solid #E6A23C;

  position: relative;

  overflow: hidden;

}

.card-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 15px;

}

.card-title {

  font-size: 16px;

  font-weight: 600;

  margin: 0;

}

.icon-wrapper {

  font-size: 24px;

  color: #E6A23C;

}

.value-area {

  text-align: center;

  margin: 10px 0 20px;

}

.main-value {

  font-size: 32px;

  font-weight: bold;

  color: #E6A23C;

  margin: 0;

}

.sub-text {

  font-size: 12px;

  color: #999;

  margin-top: 5px;

}

.details-area {

  display: flex;

  justify-content: space-around;

  border-top: 1px solid #f0f0f0;

  padding-top: 15px;

}

.detail-item {

  text-align: center;

}

.detail-label {

  font-size: 12px;

  color: #999;

  margin-bottom: 5px;

}

.detail-value {

  font-size: 14px;

  font-weight: 500;

  margin: 0;

}

.detail-value.refund { color: #F56C6C; }

.detail-value.success { color: #67C23A; }

</style>
