<template>
  <div class="flex w-full card-wrapper">
    <el-card class="box-card" shadow="hover" v-action="'statistic.chargeTJ.todayCharge'">
      <template #header>
        <div class="flex items-center justify-between card-header">
          <div class="flex items-center">
            <span>今日充值</span>
            <el-tooltip placement="top">
              <template #content>
                截至当前时间，今日累计充值<br />
              </template>
              <el-icon>
                <InfoFilled />
              </el-icon>
            </el-tooltip>
          </div>
          <p class="text-red-300">{{ timer.seconds }}s后刷新</p>
        </div>
      </template>
      <div class="money-wrapper">￥{{ todayChargeData.pay_money || '-' }}</div>
      <div class="flex items-center justify-between">
        <div>
          <p class="text-lg font-bold">普通充值</p>
          <div>
            <span class="text-sm">已支付：</span>
            <span class="text-base">{{ todayChargeData.common_pay_count || '-' }}单</span>
          </div>
          <div>
            <span class="text-sm">未支付：</span>
            <span class="text-base">{{ todayChargeData.common_unpay_count || '-' }}单</span>
          </div>
          <div>
            <span class="text-sm">支付率：</span>
            <span class="text-base">{{ todayChargeData.company_pay_rate || '-' }}</span>
          </div>
        </div>
        <div>
          <p class="text-lg font-bold">会员充值</p>
          <div>
            <span class="text-sm">已支付：</span>
            <span class="text-base">{{ todayChargeData.vip_pay_count || '-' }}单</span>
          </div>
          <div>
            <span class="text-sm">未支付：</span>
            <span class="text-base">{{ todayChargeData.vip_unpay_count || '-' }}单</span>
          </div>
          <div>
            <span class="text-sm">支付率：</span>
            <span class="text-base">{{ todayChargeData.vip_pay_rate || '-' }}</span>
          </div>
        </div>
      </div>
    </el-card>
    <el-card class="box-card" shadow="hover" v-action="'statistic.chargeTJ.currentMonthCharge'">
      <template #header>
        <div class="flex items-center justify-between card-header">
          <div class="flex items-center">
            <span>本月充值</span>
            <el-tooltip placement="top">
              <template #content>
                本月截至昨日的累计充值金额<br />
              </template>
              <el-icon>
                <InfoFilled />
              </el-icon>
            </el-tooltip>
            <span class="ml-2 text-red-300">(不包含当日)</span>
          </div>
        </div>
      </template>
      <div class="money-wrapper">￥{{ currentMonthChargeData.pay_money || '-' }}</div>
      <div class="flex items-center justify-between">
        <div>
          <p class="text-lg font-bold">普通充值</p>
          <div>
            <span class="text-sm">已支付：</span>
            <span class="text-base">{{ currentMonthChargeData.common_pay_count || '-' }}单</span>
          </div>
          <div>
            <span class="text-sm">未支付：</span>
            <span class="text-base">{{ currentMonthChargeData.common_unpay_count || '-' }}单</span>
          </div>
          <div>
            <span class="text-sm">支付率：</span>
            <span class="text-base">{{ currentMonthChargeData.company_pay_rate || '-' }}</span>
          </div>
        </div>
        <div>
          <p class="text-lg font-bold">会员充值</p>
          <div>
            <span class="text-sm">已支付：</span>
            <span class="text-base">{{ currentMonthChargeData.vip_pay_count || '-' }}单</span>
          </div>
          <div>
            <span class="text-sm">未支付：</span>
            <span class="text-base">{{ currentMonthChargeData.vip_unpay_count || '-' }}单</span>
          </div>
          <div>
            <span class="text-sm">支付率：</span>
            <span class="text-base">{{ currentMonthChargeData.vip_pay_rate || '-' }}</span>
          </div>
        </div>
      </div>
    </el-card>
    <el-card class="box-card" shadow="hover" v-action="'statistic.chargeTJ.lastMonthCharge'">
      <template #header>
        <div class="flex items-center justify-between card-header">
          <div class="flex items-center">
            <span>上月充值</span>
            <el-tooltip placement="top">
              <template #content>
                上月的累计充值<br />
              </template>
              <el-icon>
                <InfoFilled />
              </el-icon>
            </el-tooltip>
          </div>
        </div>
      </template>
      <div class="money-wrapper">￥{{ lastMonthChargeData.pay_money || '-' }}</div>
      <div class="flex items-center justify-between">
        <div>
          <p class="text-lg font-bold">普通充值</p>
          <div>
            <span class="text-sm">已支付：</span>
            <span class="text-base">{{ lastMonthChargeData.common_pay_count || '-' }}单</span>
          </div>
          <div>
            <span class="text-sm">未支付：</span>
            <span class="text-base">{{ lastMonthChargeData.common_unpay_count || '-' }}单</span>
          </div>
          <div>
            <span class="text-sm">支付率：</span>
            <span class="text-base">{{ lastMonthChargeData.company_pay_rate || '-' }}</span>
          </div>
        </div>
        <div>
          <p class="text-lg font-bold">会员充值</p>
          <div>
            <span class="text-sm">已支付：</span>
            <span class="text-base">{{ lastMonthChargeData.vip_pay_count || '-' }}单</span>
          </div>
          <div>
            <span class="text-sm">未支付：</span>
            <span class="text-base">{{ lastMonthChargeData.vip_unpay_count || '-' }}单</span>
          </div>
          <div>
            <span class="text-sm">支付率：</span>
            <span class="text-base">{{ lastMonthChargeData.vip_pay_rate || '-' }}</span>
          </div>
        </div>
      </div>
    </el-card>
    <el-card class="box-card" shadow="hover" v-action="'statistic.chargeTJ.totalCharge'">
      <template #header>
        <div class="flex items-center justify-between card-header">
          <div class="flex items-center">
            <span>累计充值</span>
            <el-tooltip placement="top">
              <template #content>
                昨日及之前的所有累计充值金额<br />
              </template>
              <el-icon>
                <InfoFilled />
              </el-icon>
            </el-tooltip>
            <span class="ml-2 text-red-300">(不包含当日)</span>
          </div>
        </div>
      </template>
      <div class="money-wrapper">￥{{ totalChargeData.pay_money || '-' }}</div>
      <div class="flex items-center justify-between">
        <div>
          <p class="text-lg font-bold">普通充值</p>
          <div>
            <span class="text-sm">已支付：</span>
            <span class="text-base">{{ totalChargeData.common_pay_count || '-' }}单</span>
          </div>
          <div>
            <span class="text-sm">未支付：</span>
            <span class="text-base">{{ totalChargeData.common_unpay_count || '-' }}单</span>
          </div>
          <div>
            <span class="text-sm">支付率：</span>
            <span class="text-base">{{ totalChargeData.company_pay_rate || '-' }}</span>
          </div>
        </div>
        <div>
          <p class="text-lg font-bold">会员充值</p>
          <div>
            <span class="text-sm">已支付：</span>
            <span class="text-base">{{ totalChargeData.vip_pay_count || '-' }}单</span>
          </div>
          <div>
            <span class="text-sm">未支付：</span>
            <span class="text-base">{{ totalChargeData.vip_unpay_count || '-' }}单</span>
          </div>
          <div>
            <span class="text-sm">支付率：</span>
            <span class="text-base">{{ totalChargeData.vip_pay_rate || '-' }}</span>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { checkPermission } from '@/directives/permission';
import { InfoFilled } from '@element-plus/icons-vue';
import { useCountdownTimer } from '@/utils/timerUtils';
import {
  statisticChargeTodayCharge,
  statisticChargeCurrentMonthCharge,
  statisticChargeLastMonthCharge,
  statisticChargeTotalCharge
} from '@/api/dataStatistics/rechargeStatistics/index'

const todayChargeData = ref({})
const currentMonthChargeData = ref({})
const lastMonthChargeData = ref({})
const totalChargeData = ref({})
const rolesIdentify = inject('rolesIdentify')
const refreshInterface = (): void => {
  initTodayCharge()
};
const timer = useCountdownTimer(60, refreshInterface);

const initTodayCharge = () => {
  if (!checkPermission('statistic.chargeTJ.todayCharge')) return;
  statisticChargeTodayCharge().then(res => {
    todayChargeData.value = res.data
  })
}
const init = () => {
  if (checkPermission('statistic.chargeTJ.currentMonthCharge')) {
    statisticChargeCurrentMonthCharge().then(res => {
      currentMonthChargeData.value = res.data;
    })
  }
  if (checkPermission('statistic.chargeTJ.lastMonthCharge')) {
    statisticChargeLastMonthCharge().then(res => {
      lastMonthChargeData.value = res.data;
    })
  }
  if (checkPermission('statistic.chargeTJ.totalCharge')) {
    statisticChargeTotalCharge().then(res => {
      totalChargeData.value = res.data;
    })
  }
}

onMounted(() => {
  init()
  initTodayCharge()
});

</script>

<style scoped lang="scss">
.box-card {
  width: 300px;
  margin: 8px;

  .money-wrapper {
    height: 50px;
    width: 100%;
    color: #ed892c;
    font-size: 26px;
  }
}

.card-wrapper {
  background-color: #ffffff;
  margin-bottom: 8px;
  padding: 16px;
}
</style>
