<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">
			  <el-tooltip placement="top">
			    <template #content>
			      截至当前时间，今日新增用户数量<br />
			    </template>
			    <el-icon>
			      <InfoFilled />
			    </el-icon>
			  </el-tooltip>
            <span>今日新增用户</span>
          </div>
          <p class="text-red-300">{{ timer.seconds }}s后刷新</p>
        </div>
      </template>
      <div class="money-wrapper">{{ todayChargeData.new_user_num || '0' }}</div>
      <div class="flex items-center justify-between">
        <div>
          <!-- <p class="text-lg font-bold">普通充值</p> -->
          <div>
			<el-tooltip placement="top">
				<template #content>
				  新增用户中进行充值的人数<br />
				</template>
				<el-icon>
				  <InfoFilled />
				</el-icon>
			</el-tooltip>
            <span class="text-sm">充值人数：</span>
		
            <span class="text-base">{{ todayChargeData.new_user_recharge_num || '0' }}人</span>
          </div>
          <div>
            <span class="text-sm">会员充值：</span>
            <span class="text-base">{{ todayChargeData.recharge_vip_num || '0' }}人</span>
          </div>
          <div>
            <span class="text-sm">普通充值：</span>
            <span class="text-base">{{ todayChargeData.recharge_coin_num || '0' }}人</span>
          </div>
        </div>
        <div>
          <!-- <p class="text-lg font-bold">会员充值</p> -->
          <div>
			  <el-tooltip placement="top">
			  	<template #content>
			  	  新增用户当天充值金额<br />
			  	</template>
			  	<el-icon>
			  	  <InfoFilled />
			  	</el-icon>
			  </el-tooltip>
            <span class="text-sm">充值金额：</span>
            <span class="text-base">{{ todayChargeData.new_user_recharge_total || '-' }}</span>
          </div>
          <div>
			  <el-tooltip placement="top">
			  	<template #content>
			  	  新增用户当天充值金额/新用户当天充值人数<br />
			  	</template>
			  	<el-icon>
			  	  <InfoFilled />
			  	</el-icon>
			  </el-tooltip>
            <span class="text-sm">人均充值：</span>
            <span class="text-base">{{ todayChargeData.recharge_mean || '-' }}</span>
          </div>
          <div>
			  <el-tooltip placement="top">
			  	<template #content>
			  	  充值人数/新增用户数<br />
			  	</template>
			  	<el-icon>
			  	  <InfoFilled />
			  	</el-icon>
			  </el-tooltip>
            <span class="text-sm">充值率：</span>
            <span class="text-base">{{ todayChargeData.recharge_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">{{ currentMonth.new_user_num || '-' }}</div>
      <div class="flex items-center justify-between">
        <div>
          
          <div>
            <span class="text-sm">充值人数：</span>
            <span class="text-base">{{ currentMonth.new_user_recharge_num || '-' }}人</span>
          </div>
          <div>
            <span class="text-sm">会员充值：</span>
            <span class="text-base">{{ currentMonth.new_user_recharge_vip_num || '-' }}人</span>
          </div>
          <div>
            <span class="text-sm">普通充值：</span>
            <span class="text-base">{{ currentMonth.new_user_recharge_coin_num || '-' }}人</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">{{ lastMonth.new_user_num || '-' }}</div>
      <div class="flex items-center justify-between">
        <div>
          <div>
            <span class="text-sm">充值人数：</span>
            <span class="text-base">{{ lastMonth.new_user_recharge_num || '-' }}人</span>
          </div>
          <div>
            <span class="text-sm">会员充值：</span>
            <span class="text-base">{{ lastMonth.new_user_recharge_vip_num || '-' }}人</span>
          </div>
          <div>
            <span class="text-sm">普通充值：</span>
            <span class="text-base">{{ lastMonth.new_user_recharge_coin_num || '-' }}人</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">{{ totalData.new_user_total || '-' }}</div>
      <div class="flex items-center justify-between">
        <div>
        
          <div>
            <span class="text-sm">累计充值人数：</span>
            <span class="text-base">{{ totalData.recharge_user_total || '-' }}人</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 Cache from '@/support/cache'
import {
  statisticUserTodayData,
  statisticUserHistoryData,
} from '@/api/dataStatistics/userStatistics'

const todayChargeData = ref({})
const currentMonth = ref({})
const lastMonth = ref({})
const totalData = ref({})
const miniprogram_idJ = ref(0)
const rolesIdentify = inject('rolesIdentify')
const refreshInterface = (): void => {
  initTodayCharge()
};
const timer = useCountdownTimer(60, refreshInterface);

const initTodayCharge = () => {
 
  statisticUserTodayData({miniprogram_id:miniprogram_idJ.value}).then(res => {
    todayChargeData.value = res.data
  })
}
const init = () => {
  
    statisticUserHistoryData({miniprogram_id:miniprogram_idJ.value}).then(res => {
		currentMonth.value = res.data.month;
		lastMonth.value = res.data.lastMonth;
		totalData.value = res.data.history;
    })
}

onMounted(() => {
 if (JSON.parse(Cache.get('nav_data'))?.app.id) {
	miniprogram_idJ.value = JSON.parse(Cache.get('nav_data'))?.app.id
  }
  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>
