<template>
  <div
    class="CustomerRecharge"
    v-loading="loading"
  >
    <div class="Dashboard-title">储值视图
      <div class="CustomerRechargeChart-tip">
        <span
          class="CustomerRecharge-tooltip"
          style="background-color:#4e82fb;"
        ></span> 总充值：
        <span style="color:#f00;">{{ rechargeCount && rechargeCount.rechargeMoney ? $formatPrice(rechargeCount.rechargeMoney) : '0.00' }}元</span>
        <span
          class="CustomerRecharge-tooltip"
          style="background-color:#26c9a8;"
        ></span> 充值笔数：
        <span style="color:#f00;">{{ rechargeCount && rechargeCount.rechargeMen ? rechargeCount.rechargeMen : 0 }}笔</span>
      </div>
    </div>
    <Chart :data="rechargeList" />
  </div>
</template>

<script>
import Chart from './chart';
import { mapGetters, mapActions } from 'vuex';

export default {
  name: 'CustomerRecharge',
  components: {
    Chart,
  },
  computed: {
    ...mapGetters('Dashboard/customerData/customerRecharge', [
      'rechargeList',
      'rechargeCount',
      'loading',
    ]),
  },
  created() {
    this.initData();
  },
  methods: {
    ...mapActions('Dashboard/customerData/customerRecharge', [
      'getRechargeOrderList',
    ]),
    initData() {
      this.getRechargeOrderList();
    },
  },
};
</script>

<style lang="scss">
.CustomerRecharge {
  .Dashboard-title {
    display: flex;
    align-items: center;
  }
  .CustomerRechargeChart-tip {
    position: absolute;
    right: 0;
    color: #333;
    font-size: 14px;
    font-weight: normal;
    text-align: center;
    .CustomerRecharge-tooltip {
      display: inline-block;
      width: 10px;
      height: 5px;
      margin-bottom: 2px;
      margin-left: 10px;
    }
  }
}
</style>